TreeView动态绑定数据源

TreeView简单用法,动态绑定

首先,用到的CSS Style:

Style
<style type="text/css">
    .TreeView
    {
        border-bottom: 1px dotted #B2B2B2 !important;
    }
    .TreeView div
    {
        margin-left: 5px;
    }
    .TreeView table
    {
        border-top: 1px dotted #B2B2B2 !important;
        padding: 2px;
    }
    .TreeView div table
    {
        border-bottom: none !important;
        border-top: none !important;
    }
    .TreeView table td
    {
        padding: 2px 0;
    }
    .LeafNodesStyle
    {
    }
    .RootNodeStyle
    {
    }
    /* ALL ELEMENTS */.NodeStyle
    {
        /*color: #EFEFEF;*/
    }
    .ParentNodeStyle
    {
        background: #BCBCBC; /*#38CCAB*/
        padding: 2px;
        margin: 2px;
    }
    a.SelectedNodeStyle
    {
        background: #BBBBBB;/*#E5E5E5;*/
        display: block;
        padding: 2px 0 2px 3px;
    }
</style>

HTML Sources:

<div>
    <asp:TreeView ID="tvAcc" runat="server" ShowLines="True" ExpandDepth="2" NodeIndent="0"
        LeafNodeStyle-CssClass="LeafNodesStyle" CssClass="TreeView" NodeStyle-CssClass="NodeStyle"
        ParentNodeStyle-CssClass="ParentNodeStyle" RootNodeStyle-CssClass="RootNodeStyle"
        SelectedNodeStyle-CssClass="SelectedNodeStyle" LeafNodeStyle-Width="100%" NodeStyle-Width="100%"
        ParentNodeStyle-Width="100%" RootNodeStyle-Width="100%" SelectedNodeStyle-Width="100%"
        OnSelectedNodeChanged="tvAcc_SelectedNodeChanged">
        <Nodes>
        </Nodes>
        <HoverNodeStyle ForeColor="RoyalBlue" />
        <SelectedNodeStyle BackColor="Transparent" CssClass="SelectedNodeStyle" Width="100%" />
        <RootNodeStyle Font-Bold="True" Font-Size="Larger" HorizontalPadding="5px" CssClass="RootNodeStyle"
            Width="100%" BackColor="#38CCAB" />
        <ParentNodeStyle CssClass="ParentNodeStyle" Width="100%" BackColor="#BCBCBC" HorizontalPadding="5px"
            VerticalPadding="5px" />
        <LeafNodeStyle CssClass="LeafNodesStyle" Width="100%" BackColor="#BCBCBC" />
        <NodeStyle CssClass="NodeStyle" Width="100%" />
    </asp:TreeView>
</div>


后台代码:其中的一个:【ProductPhone】多个parent node的话,用for循环加入即可。

private void BindProductNode()
{
      TreeNode root = new TreeNode("Product Phone", "Product Phone", "", "#", "");
      root.Expanded = true;
      tvAcc.Nodes.Add(root);

       DataTable dtPlat = new DataTable();
       dtPlat = reportBLL.GetPlatformList();// Data Source from db

       DataTable dtPhone = new DataTable();//sub's title data source
       for (int i = 0; i < dtPlat.Rows.Count; i++)
       {
           string platName = dtPlat.Rows[i]["Platform"].ToString();
           string accID = dtPlat.Rows[i]["Platform"].ToString();
           TreeNode tree1 = new TreeNode(platName, accID, "", "", "");
           tree1.Expanded = false;
           root.ChildNodes.Add(tree1);

           dtPhone = reportBLL.GetPhoneList(platName);//eg."eDream6", get sub title's data source.
           for (int j = 0; j < dtPhone.Rows.Count; j++)
           {
               string phone = dtPhone.Rows[j]["Product"].ToString();
               TreeNode treeOverview = new TreeNode(phone, accID, "", "#.aspx?platform=" + platName + "&product=" + phone, "_blank");
               tree1.ChildNodes.Add(treeOverview);
           }
      }
}

 

posted @ 2012-04-13 15:49  eva.xiao  阅读(4819)  评论(0编辑  收藏  举报