asp.net treeview 控件的使用

    TreeView 是 ASP.NET 的 Navigation 中的一个控件,实际上就是我们平时所说的树型菜单。

 

在视图设计中添加 TreeView。

 

HTML代码清单:

<asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer" ShowLines="True">
</asp:TreeView>

后台代码清单:
protected void Page_Load(object sender, EventArgs e) 添加如下代码:
 
TreeView1.Nodes.Add(new TreeNode("根节点", "Desktop"));

TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("一级节点1", "11"));
TreeView1.Nodes[0].ChildNodes[0].ChildNodes.Add(new TreeNode("二级节点1", "21"));
TreeView1.Nodes[0].ChildNodes[0].ChildNodes[0].ChildNodes.Add(new TreeNode("二级节点2", "22"));

TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("一级节点2", "12"));
TreeView1.Nodes[0].ChildNodes[1].ChildNodes.Add(new TreeNode("二级节点3", "23"));
TreeView1.Nodes[0].ChildNodes[1].ChildNodes[0].ChildNodes.Add(new TreeNode("二级节点4", "24"));
 

 

      可以看出,在 ASP.NET 中做树型菜单非常的方便,并且在设计的时候选择不同的 ImageSet 值,显示的时候就会使用不同的图标。

 

常用属性:

  • ShowLines 是否显示树型菜单中连接各节点的虚线。默认值为 false。
  • ExpandDepth 默认展开菜单的深度值,0 表示全部不展开。默认值为全部展开。
  • ShowCheckBoxes 哪些节点上显示选择框。默认为 None。
  • SelectedNode 选择了的节点。当点击节点(不是节点左边的展开、关闭按钮)时就选择了一个节点。
  • SelectedValue 相当于 SelectedNode.Value。
  • TreeNode.ValuePath 父节点到指定节点的 value 字符串连接,各节点 value 之间用“/”分隔开。

常用方法:

  • TreeNodeCollection.Add(TreeNode child) 添加一个子节点,TreeNodeCollection 就是前面代码是的 Nodes、ChildNodes 等。
  • TreeNodeCollection.Remove(TreeNode value) 删除一个节点。
  • TreeNode.Expand() 折叠 TreeNode 节点。与 Collapse() 反义。
  • TreeNode.ExpandAll() 展开 TreeNode 节点及其子节点。与 CollapseAll() 反义。

常用事件:

  • SelectedNodeChanged 当选择了不同的节点时。
  • TreeNodeExpanded 当节点展开时。参数 TreeNodeEventArgs e,用以指明哪个节点被展开了。

方法示例:

 

1.C#遍历TreeView节点(递归算法)
private void Page_Load(object sender, System.EventArgs e)
{
    GetAllNodeText(TreeView1.Nodes);
}

void GetAllNodeText(TreeNodeCollection tnc)
{
    foreach(TreeNode node in tnc)
    {
        if(node.Nodes.Count!=0)
              GetAllNodeText(node.Nodes);
        Response.Write(node.Text + " ");
    }
}

2.得到node结点的父节点
TreeNode pnode;
if(node.Parent is TreeNode)
pnode=(TreeNode)node.Parent;
else
//node is root node

3.修改TreeView样式(示例)
<iewc:TreeView id="TreeView1" runat="server" HoverStyle="color:blue;background:#00ffCC;"

DefaultStyle="background:red;color:yellow;" SelectedStyle="color:red;background:#00ff00;">
用代码:
TreeView1.DefaultStyle["font-size"] = "20pt";

4.设置所选节点,如选中第二个节点
function SetSelNode()
{
    TreeView1.selectedNodeIndex="1";
}

5.得到所选节点的Text,ID或NodeData
function GetAttribute()
{
    alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"));
}

6.修改节点属性,如修改第一个节点的Text
function ModifyNode()
{
    var node=TreeView1.getTreeNode("0");
    node.setAttribute("Text","hgknight");
}

7.得到点击节点
function TreeView1.onclick()
{
    alert(TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("Text"));
}

8.添加节点
function AddNode()
{
    var node=TreeView1.createTreeNode();
    node.setAttribute("Text","hgknight");
    TreeView1.add(node);
}

9.js遍历所有节点
var NodeArray=new Array();
NodeArray=TreeView1.getChildren();
for(i=0;i<NodeArray.length;i++)
{
    cNode=NodeArray[i];
    alert(cNode.getAttribute("Text"));
}

 

10、判断 TreeView 的一个节点下是否有子节点

if(selNode.Nodes.Count==0)

{
    //该节点没有字节点
}


常见问题:

 

1、为什么TreeView 中的SelectedIndexChange为什么不执行?

AutoPostBack属性为真,SelectedIndexChange才能被执行。
selectedindexchange事件挂到控件上没有?
InitializeComponent方法中检查检查

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

冰蓝

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值