TreeView动态绑定数据源

本文介绍如何使用ASP.NET中的TreeView控件实现动态数据绑定。通过后台代码动态添加节点,并展示了一个具体的例子,包括设置样式和从数据库获取数据填充树形结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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);
           }
      }
}

 

转载于:https://www.cnblogs.com/eva_2010/archive/2012/04/13/2445907.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值