2015-09-10 2 views
0

EDITДинамически созданный формат TreeView

Это было исправлено добавлением width: 100% в CSS.

У меня есть динамически созданное древовидное представление, которое вытаскивает местоположения в качестве родительских узлов и списки сделок в этих местах дочерних узлов. Древовидное динамическое создание, поэтому не похоже, что я могу разместить div вокруг него и форматировать div. Я пробовал это. Форматирование в div не отображается вообще. Я хочу TreeView, чтобы отобразить так:

_ Местоположение

____ сделку

____ Deal B

____ Deal C

_ Местоположение B

____ Deal A

____ сделка B

____ Сделка C

Но прямо сейчас она отображается с центром и выглядит уродливой. Я пробовал использовать div, я пробовал использовать классы. Узлы отказываются выровнять по левому краю и остаются в центре. Я знаю, что класс работает, потому что я могу изменить поля, границу и цвет фона, но ничего не затрагивает фактический текст.

ASPX:

<asp:MultiView ID="LoginView" runat="server"> 
    <asp:View ID="VendorContent" runat="server"> 
      <h2>My Locations</h2> 
      <hr style="margin-left: 10%; margin-right: 10%"> 
      <br /> 
      <div class="location" runat="server"> 
       <div id="treeview" runat="server"> 
        <asp:TreeView ID="LocationTreeView" runat="server" Value="Left" CssClass="treeview"> 
        </asp:TreeView> 
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 
       </div> 
       <asp:Button runat="server" ID="saveChanges" OnClick="saveChanges_Click" Text="Save Changes" CssClass="save_treeview"/> 
       <a id="newDealLink" href="deals.aspx">Make a new deal</a> 
      </div> 
     </asp:View> 
</asp:MultiView> 

aspx.cs:

This is called in the page load if the view is a vendor: 

private void loadVendorTree(UserInfo userinfo) 
{ 
    LocationTreeView.ShowCheckBoxes = TreeNodeTypes.All; 

    foreach (Location location in locations) 
    { 
     List<int> deal_IDs = new List<int>(); 
     TreeNode node = new TreeNode(location.Address, location.Location_id.ToString()); 
     node.ShowCheckBox = false; 
     foreach (Deal deal in deals) 
     { 
      TreeNode dealNode = new TreeNode(deal.Info, deal.Deal_id.ToString()); 
      if(location.Deals.Contains(deal)){ 
       dealNode.Checked = true; 
      } 
      else 
      { 
       dealNode.Checked = false; 
      } 
      deal_IDs.Add(deal.Deal_id); 
      dealNode.SelectAction = TreeNodeSelectAction.Select; 
      node.ChildNodes.Add(dealNode); 
     } 
     LocationTreeView.Nodes.Add(node); 
    } 
} 

CSS:

.treeview { 
text-align: left; 
margin: .5em 0; 
padding-left: 0; 
padding-right: 6em; 
color: black; 
border: 2px solid pink; 
} 

.save_treeview { 
margin-left: .5em; 
margin-bottom: .5em; 
width: 10em; 
} 

.location { 
text-align: left; 
max-width: 45em; 
margin: 0 auto; 
background: rgba(255,255,255,0.5); 
border: 2px solid #dcdaf1; 
} 

Если кто-нибудь может мне помочь или направить меня к чему-то, что может я действительно ценю это ,

ответ

0

возможно попробовать гнездились неупорядоченные, как это:

<ul> 
    <li>Location A</li> 
    <li> 
     <ul> 
       <li>Deal A</li> 
       <li>Deal B</li> 
       <li>Deal C</li> 
     </ul> 
    </li> 
    <li>Location B</li> 
    <li> 
     <ul> 
       <li>Deal A</li> 
       <li>Deal B</li> 
       <li>Deal C</li> 
     </ul> 
    </li>  
</ul> 

Тогда просто стиль неупорядоченных списков и элементов списка с помощью CSS и вы хороши.

Смежные вопросы