动态创建树视图

Posted

技术标签:

【中文标题】动态创建树视图【英文标题】:Dynamically create a treeview 【发布时间】:2012-02-24 04:23:14 【问题描述】:

我正在尝试使用 c# 和 asp.net 。

我使用 populate ondemand 属性创建了一个延迟加载树视图。

>  <asp:TreeView ID="treeView1"  runat="server" 
>              OnTreeNodePopulate="treeview1_TreeNodePopulate"></asp:TreeView>

在代码后面我已经加载了我的数据,但最初我填充了父节点。我想要实现的是,当我单击父节点时,我会进行回发,然后填充其子节点,然后再次填充其子节点,等等。我有成千上万的数据,所以我不希望由于性能而填充所有数据。这就是为什么我只想根据所选节点填充节点子节点的原因。请参见下面的示例:

>Peter
    - - >user1
    - - >user2
    - - >user3
       - - >userPassword
       - - >userId
>john
>david
>Jack
    - - >user1
    - - >user2
       - - >userpassword
       - - >userId
       - - >Permissions
>Laura 
    - - > admin
    - - > permissions
       -- > user1
       -- > user2
         - - >userpassword
             - - >userId
             - - >Permissions           
>...
>...
>...

如您所见,可以有多个父节点和多个层。这些将根据我传递给 DB 的内容动态填充。每次我单击节点时,它都会展开节点并使用回发填充其子节点,然后当您再次单击其子节点时,它将执行回发并再次填充其子节点等。所以我需要有关如何创建动态树视图的帮助。

c#:

private void LoadTreeview()

 //Load data
 // Get data from DB.
 //loop through the list and build its parent nodes.
  foreach (var dxm in list)
  
                TreeNode tnParent = CheckNodeExist(dxm.Node); //I check to see if exists.
                if (tnParent== null)
                
                    TreeNode tn = new TreeNode();
                    tn.Text = dxm.Node;
                    tn.Value = dxm.Id.ToString();
                    tn.SelectAction = TreeNodeSelectAction.None;
                    tn.Collapse();
                    treeView1.Nodes.Add(tn);
                    tn.PopulateOnDemand = true; //lazy load
                    tnParent= tn;
                


上面的这个方法是在页面加载时调用的。

在 TreeNodePopulateEvent 上:(当一个节点被点击时)

protected void treeview1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
        
            ICollection<ITEMS> list = new Collection<ITEMS>();           

            list = GetData(e.Node.Text); //pass in the node you have selected  this will go and check in DB if the node does have any child nodes. If so will return with child nodes.

            foreach (var dxm in list)
            

                TreeNode tnChild = CheckNodeExist(dxm.Node);
                if (tnChild == null)
                
                    TreeNode tn = new TreeNode();
                    tn.Text = dxm.Node;
                    tn.Value = dxm.Id.ToString();
                    tn.SelectAction = TreeNodeSelectAction.None;
                    tn.Collapse();

                    tn.PopulateOnDemand = true;
                    tnChild = tn;
                    tnChild.ChildNodes.Add(tnChild);                  

                
            
        

【问题讨论】:

【参考方案1】:

我相信您正在寻找 SelectedNodeChanged 事件。您应该能够在此事件中加载您的子节点。基本上,每次您通过单击选择节点时都会触发此事件。

你的aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1" runat="server">

    </div>

    <asp:TreeView ID="TreeView1" runat="server" 
        onselectednodechanged="TreeView1_SelectedNodeChanged">

    </asp:TreeView>

    </form>
</body>
</html>

你的代码隐藏

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

    protected void Page_Load(object sender, EventArgs e)
    
        if (!Page.IsPostBack)
        
            TreeView1.Nodes.Add(new TreeNode("Node1"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("ChildNode"));
        

    


    protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
    
        Response.Write(TreeView1.SelectedNode.Text);
    

【讨论】:

谢谢.. 我如何附加到现有的树视图? 顺便说一句,“LinksTreeView”你会用你的树视图的 ID 替换,我从一些旧代码中复制和粘贴,这就是我在特定示例中使用的 ID。 当我点击节点时它没有触发事件?? protected void Select_Change(object sender, EventArgs e) 好的,试试这个方法,进入包含树视图的页面的设计视图,然后选择树视图控件。然后转到您的属性选项卡,属性选项卡应包含您的树视图属性。在顶部,应该有一个闪电般的粗体图标,单击该图标。从下面的列表中选择“SelectedNodeChanged”并双击它。这应该带你到你的代码隐藏。然后尝试我在上面发布的代码以获取选定的节点文本。我刚刚在一个测试项目中尝试过,效果很好 是的,但没有成功 protected void treeView1_SelectedNodeChanged(object sender, EventArgs e) 我在这个事件上设置了断点并且没有做任何事情?

以上是关于动态创建树视图的主要内容,如果未能解决你的问题,请参考以下文章

PHP:如何修改动态多维数组

如何使用角度动态创建元素? [关闭]

动态创建视图

CSS 对于动态创建的 html 无效

反应递归地创建动态树

动态创建匿名对象利用表达式树动态构建分组条件