TreeView使用总汇聚

总结了一下用MS的TREE控件的心得,大家一起来分享,当然,也不乏有其他网友的一些好的见解被录入其中,另有遗漏处请大家不吝赐教!

相信只要你仔细阅读了这篇小菜文,并参考一下提供的例程,一定能够掌握TREE的基本用法!

1.工欲善其事,必先利其器。首先保证装好你的组件,这个包安装非常方便,只要运行一下即可在VS.NET的工具栏中找到并使用了:
http://218.56.11.178:8018/FileDown.aspx?FID=4
也可以关注一下官方站是否有新版发布:
http://msdn.microsoft.com/downloads/samples/internet/default.asp?url=/Downloads/samples/Internet/ASP_DOT_NET_ServerControls/WebControls/default.asp

2.常用的几个属性和方法
~Index 获取树节点在树节点集合中的位置。
~Nodes 获取分配给树视图控件的树节点集合。
~Parent 获取或设置控件的父容器。
~SelectedNode 获取或设置当前在树视图控件中选定的树节点。
~ExpandAll 展开所有树节点。
~Checked 获取或设置一个值,用以指示树节点是否处于选中状态。
~Text 获取或设置在树节点标签中显示的文本。
~Expand 展开树节点。
~Clear 清空树
~Remove 从树视图控件中移除当前树节点。
以上由其他网友总结,补充:
~Height 控件的高度
~Width 控件的宽度
~BackColor 背景颜色
~BorderColor 边框颜色
~BorderStyle 边框样式
~BorderWidth 边框宽度
~CssClass 应用于该控件的CSS类名
~ExpandedImageUrl 展开时显示的节点图标
~ImageUrl 未选择或展开是显示的节点图标
~SelectedImageUrl 选中状态下显示的节点图标
~Indent 缩进距离,只有在ShowLines设为TRUE时才生效。
~ShowLines 是否显示层级连接线
~ShowPlus 是否显示+/-符号按钮
~ShowToolTip 在有父节点上显示工具提示(+/-号的使用展开/关闭)。
~AccseeKey 控件使用的键盘快捷键
~AutoSelect 为TRUE时,当用键盘移动节点时,自动选择新节点
~AutoPostBack 当改变状态时,自动回存
~Enabled 控制控件的启用状态
~EnableViewState 控件是否自动保存其状态以用于往返行程
~ExpandLevel 初始化控件是展开节点的层数
~SelectExpands 当选中一个接点时,是否自动展开该节点
~TabIndex TAB键次序
~Visible 控件是否可见

3.实用技巧:
1)怎样点击文字(不是+/-号)即可展开(收缩)子节点
将TREE的ShowToolTip 属性设为false即可。

2)当鼠标指到某父接点时,如何不显示显示“节点名:user +/- to expand/collapse”
将TREE的SelectExpands 属性设为TRUE即可。

3)不显示树型的问题
首先:控件包没装好,使用上边介绍的控件包装一下试试。
其次:TreeView要求客户端浏览器版本为IE5.5及以上,最好要求客户端升级为IE6.0

4)关于闪烁
将AutoPostBack属性设置为真,SelectedIndexChange才能被执行。不过这样的话刷新的很厉害。不要刷新的话,将AutoPostBack属性设置为FALSE.

5)如何实现用键盘上下左右键移动焦点时,自动选择新节点并执行新节点
将TREE的AutoSelect 属性设为TRUE即可。

6)不想显示+/-符号按钮怎么做?
将TREE的ShowPlus 属性设为False即可。

7)不想显示层级连接线怎么做?
将TREE的ShowLines 属性设为False即可。

8)如何设置节点旁的图标
~ExpandedImageUrl、ImageUrl、SelectedImageUrl这3个属性是控制图标的,选择自己喜欢的就OK了。

4.看看这个例子,对你一定有启发,是一棵无级树,不过在实际使用中可能会有些麻烦:
http://218.56.11.178:8018/FileDown.aspx?FID=246

5.这个论坛也使用了树(asp.net+C#+MSSQL 2000),并且代码开放,,如果觉得有参考价值,不妨装起来看看,其中还包含了其他一些常用的asp.net编程技巧,演示了TREE控件如何和数据库结合,动态显示库中的数据,这棵树只有两层,不过比较实用:
http://218.56.11.178:8018/FileDown.aspx?FID=212
其中:tree.aspx、tree.aspx.cs是TREE控件使用的主要部分。

论坛的实际应用演示地址,在这里:
http://expert.kaer.cn/








TreeView使用集锦   hgknight(原作)

原来在论坛里发过专题帖子,只是由于帖子丢失原因,有些问题找不到了,同时这次也补充了一些,发到文档区以方便查询吧
原贴
http://expert.****.net/Expert/topic/1525/1525202.xml

1.下载地址
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp
下载后是后缀为bat的版本
(1)bulid.将bulid.bat的路径指向csc.exe所在路径,生成Microsoft.Web.UI.WebControls.dll。
(2)在wwwroot下创建空目录webctrl_client\1_0。
(3)将build\Runtime下的文件拷至webctrl_client\1_0下。
(4)选择工具箱的自定义工具箱,添加Microsoft.Web.UI.WebControls.dll。
有些麻烦
但如果你能找到后缀是msi的自动安装版本,直接下一步就行(我一直用这个版本,hoho)
安装后,通过“自定义工具箱”->“.net框架组件”把TreeView添加到工具箱里

2.运行时无法显示
一般是TreeView的版本问题,最好下载英文版自动安装版本重新安装,安装前应该先到添加删除程序里卸掉原版本

3.显示格式出错(非树状显示)
TreeView要求客户端浏览器版本为IE5.5及以上,最好要求客户端升级为IE6.0

4.框架里使用TreeView
设置NavigateUrl、Target属性,可更新另外的Frame

5.找不到TreeNode类
使用TreeView,最好添加namespace:using Microsoft.Web.UI.WebControls;

6.遍历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 + " ");
}
}

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

8.修改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";

9.展开时不提交,改变选择节点时才提交
将autopostback设置成false;
在body里添加 <body οnlοad="initTree()">
然后在PageLoad里写:
string strTreeName = "TreeView1";
string strRef = Page.GetPostBackEventReference(TreeView1);
string strScript = "<script language=\"JavaScript\"> \n" + "<!-- \n" + "         function initTree() { \n" +"                 " + strTreeName + ".onSelectedIndexChange = function() { \n" +   "if (event.oldTreeNodeIndex !=  
event.newTreeNodeIndex) \n" + "this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex); \n" +   "window.setTimeout('" + strRef.Replace("'","\\'")   + "', 0, 'JavaScript'); \n" +   "                 } \n" +     "         } \n" +   "// --> \n" + "</script>";
Page.RegisterClientScriptBlock("InitTree",strScript );

这样就只有你点击的节点更改的时候才提交!

10.TreeView结合XML
把XML文件设置为如下格式,然后直接设置TreeNodeSrc为该XML文件就行
<?xml version="1.0" encoding="GB2312"?>
<TREENODES>
<TREENODE TEXT="node0" EXPANDED="true">
<TREENODE TEXT="node1"/>
<TREENODE TEXT="node2"/>
</TREENODE>
<TREENODE TEXT="node3" NavigateURL="3.aspx"/>
</TREENODES>
或者用代码
TreeView1.TreeNodesrc="a.xml";
TreeView1.DataBind();



客户端控制TreeView
http://expert.****.net/Expert/topic/1382/1382892.xml

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

2.得到所选节点的Text,ID或NodeData
function GetAttribute()
{
alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"));
}
替换Text为ID或NodeData,可分别得到所选节点的ID或NodeData

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

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

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

6.js遍历所有节点
var AllRootNode=new Array();
AllRootNode=TreeView1.getChildren();
AlertNode(AllRootNode);  

function AlertNode(NodeArray)
{
if(parseInt(NodeArray.length)==0)
  return;
else
{
  for(i=0;i<NodeArray.length;i++)
  {
  var cNode;
  cNode=NodeArray;
  alert(cNode.getAttribute("Text"));
  if(parseInt(cNode.getChildren().length)!=0)
  AlertNode(cNode.getChildren());  
  }
}
}


ASP.net2.0 为用户提供了treeviewmenu导航控件,使用十分方便,极大提高了用户开发项目的速度和效率。

尤其是treeviewmenu绑定web.sitemap之类的XML文件,形成层次数据非常便捷。

但我在项目开发过程中,很多地方是需要绑定关系数据库,毕竟关系数据库是最常用、操作最方便的存储形式。

对于treebview与关系数据库绑定可以动态绑定,也就是在page_load事件中首先添加第一级节点,然后在treeviewSelectedNodeChanged事件中进行判断添加下一级节点。因为使用AJAX技术后,把treeview控件放在UpdatePanel控件之内,用户的页面体验效果相当不错。

然而对于menu控件,这样就有麻烦了,因为我发现menuUpdatePanel控件中有问题:就是移动鼠标后原来的菜单项会遗留在屏幕上,直到单击新的菜单项(不知道是bug,还是我哪里出现问题)。也许有人觉得menu不要动态绑定,直接绑定XML做成静态的多好!但在做项目时需要不同的用户登陆后出现的菜单效果不同,而在web.sitemaproles角色控制又不是十分便利,所以使用关系数据库直接对menu菜单项的enabled进行赋值,控制更加灵活。

因为有bug,只能把menu控件放在UpdatePanel控件之外,对menu的绑定就要在page_load事件中一次性绑定,如果使用menu控件的MenuItemClick事件绑定,那么用户受不了这样的体验!

实现的效果如下:

TreeView使用总汇聚

具体实现代码如下:

 

TreeView使用总汇聚TreeView使用总汇聚default.aspx
 1TreeView使用总汇聚TreeView使用总汇聚<%TreeView使用总汇聚@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>
 2TreeView使用总汇聚<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3TreeView使用总汇聚<html xmlns="http://www.w3.org/1999/xhtml" >
 4TreeView使用总汇聚<head runat="server">
 5TreeView使用总汇聚    <title>导航控件测试</title>
 6TreeView使用总汇聚</head>
 7TreeView使用总汇聚<body>
 8TreeView使用总汇聚    <form id="form1" runat="server">
 9TreeView使用总汇聚
10TreeView使用总汇聚  
11TreeView使用总汇聚        <asp:Menu ID="Menu1" 
12TreeView使用总汇聚            runat="server" 
13TreeView使用总汇聚            disappearafter="2000"
14TreeView使用总汇聚            staticsubmenuindent="10px" 
15TreeView使用总汇聚            orientation="Horizontal"
16TreeView使用总汇聚            StaticEnableDefaultPopOutImage="False"
17TreeView使用总汇聚            BackColor="#E3EAEB" 
18TreeView使用总汇聚            DynamicHorizontalOffset="2" 
19TreeView使用总汇聚            Font-Names="宋体" 
20TreeView使用总汇聚            Font-Size="14px" 
21TreeView使用总汇聚            ForeColor="#666666" >
22TreeView使用总汇聚        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
23TreeView使用总汇聚        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
24TreeView使用总汇聚        <DynamicMenuStyle BackColor="#E3EAEB" />
25TreeView使用总汇聚        <StaticSelectedStyle BackColor="#E3EAEB" />
26TreeView使用总汇聚        <DynamicSelectedStyle BackColor="#E3EAEB" />
27TreeView使用总汇聚        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
28TreeView使用总汇聚        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
29TreeView使用总汇聚        </asp:Menu>
30TreeView使用总汇聚     
31TreeView使用总汇聚    </form>
32TreeView使用总汇聚</body>
33TreeView使用总汇聚</html>

 

 

TreeView使用总汇聚TreeView使用总汇聚default.aspx.vb
 1TreeView使用总汇聚Imports System
 2TreeView使用总汇聚Imports System.Data
 3TreeView使用总汇聚Imports System.Data.SqlClient
 4TreeView使用总汇聚TreeView使用总汇聚Partial Class Default4Class Default4
 5TreeView使用总汇聚    Inherits System.Web.UI.Page
 6TreeView使用总汇聚    Public strConn, strSQL As String
 7TreeView使用总汇聚    Dim myConn As SqlConnection
 8TreeView使用总汇聚   Dim mydv As DataView
 9TreeView使用总汇聚    Dim i As Integer
10TreeView使用总汇聚    Dim menunode As MenuItem
11TreeView使用总汇聚TreeView使用总汇聚    Protected Sub Page_Load()Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load
12TreeView使用总汇聚        strConn = System.Configuration.ConfigurationManager.AppSettings("connstring")
13TreeView使用总汇聚        myConn = New SqlConnection(strConn)
14TreeView使用总汇聚      
15TreeView使用总汇聚        If Not Page.IsPostBack Then
16TreeView使用总汇聚            strSQL = "select * from menu "
17TreeView使用总汇聚            mydv = GetDataView(strSQL, "menu")
18TreeView使用总汇聚            mydv.RowFilter = "parentid=0"
19TreeView使用总汇聚            For i = 0 To mydv.Count - 1
20TreeView使用总汇聚                menunode = New MenuItem
21TreeView使用总汇聚                menunode.Text = mydv.Item(i).Item("text")
22TreeView使用总汇聚                menunode.Value = mydv.Item(i).Item("id")
23TreeView使用总汇聚                menunode.Enabled = mydv.Item(i).Item("Enabled")
24TreeView使用总汇聚                menunode.Target = mydv.Item(i).Item("Target")
25TreeView使用总汇聚                menunode.NavigateUrl = mydv.Item(i).Item("url")
26TreeView使用总汇聚                Menu1.Items.Add(menunode)
27TreeView使用总汇聚                addnode(menunode, menunode.Value)
28TreeView使用总汇聚                mydv.RowFilter = "parentid=0"
29TreeView使用总汇聚            Next
30TreeView使用总汇聚        End If
31TreeView使用总汇聚    End Sub

32TreeView使用总汇聚
33TreeView使用总汇聚TreeView使用总汇聚    Sub addnode()Sub addnode(ByVal pnode As MenuItem, ByVal pid As Integer)
34TreeView使用总汇聚        Dim menunode As MenuItem
35TreeView使用总汇聚        Dim j As Integer
36TreeView使用总汇聚        mydv.RowFilter = "parentid=" & pid
37TreeView使用总汇聚        For j = 0 To mydv.Count - 1
38TreeView使用总汇聚            menunode = New MenuItem
39TreeView使用总汇聚            menunode.Text = mydv.Item(j).Item("text")
40TreeView使用总汇聚            menunode.Value = mydv.Item(j).Item("id")
41TreeView使用总汇聚            menunode.Enabled = mydv.Item(j).Item("Enabled")
42TreeView使用总汇聚            menunode.Target = mydv.Item(j).Item("Target")
43TreeView使用总汇聚            menunode.NavigateUrl = mydv.Item(j).Item("url")
44TreeView使用总汇聚            pnode.ChildItems.Add(menunode)
45TreeView使用总汇聚            addnode(menunode, menunode.Value)
46TreeView使用总汇聚            mydv.RowFilter = "parentid=" & pid
47TreeView使用总汇聚        Next
48TreeView使用总汇聚
49TreeView使用总汇聚    End Sub

50TreeView使用总汇聚
51TreeView使用总汇聚TreeView使用总汇聚    Function GetDataView()Function GetDataView(ByVal Sql As StringByVal strTable As StringAs DataView
52TreeView使用总汇聚        Dim myDataAdapter As SqlDataAdapter
53TreeView使用总汇聚        Dim myDataSet As DataSet
54TreeView使用总汇聚        myConn.Open()
55TreeView使用总汇聚        myDataAdapter = New SqlDataAdapter(Sql, myConn)
56TreeView使用总汇聚        myConn.Close()
57TreeView使用总汇聚        myDataSet = New DataSet
58TreeView使用总汇聚        myDataAdapter.Fill(myDataSet, strTable)
59TreeView使用总汇聚        GetDataView = New DataView(myDataSet.Tables(strTable))
60TreeView使用总汇聚    End Function

61TreeView使用总汇聚
62TreeView使用总汇聚   
63TreeView使用总汇聚End Class

64TreeView使用总汇聚

 

 数据库结构如下:

TreeView使用总汇聚

上面实现的关键是:
1、addnode递归过程,实现下级节点的添加;
2、DataView的RowFilter属性,mydv.RowFilter = "parentid=" & pid,筛选出某节点的下级节点,进行添加。

转载于:https://www.cnblogs.com/wayne-ivan/archive/2007/12/16/996727.html