2008-07-07

tree控件经验

引自：http://blog.csdn.net/szg3827/archive/2008/04/07/2256366.aspx

 

总结了一下用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.csdn.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 onload="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.csdn.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的导航控件treeview和menu

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

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

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

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

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

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

实现的效果如下：



具体实现代码如下：

 


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

 

 


 1 Imports  System
  2 Imports  System.Data
  3 Imports  System.Data.SqlClient
  4 Partial  Class  Default4
  5      Inherits  System.Web.UI.Page
  6      Public  strConn, strSQL  As   String
 7      Dim  myConn  As  SqlConnection
  8     Dim  mydv  As  DataView
  9      Dim  i  As   Integer
10      Dim  menunode  As  MenuItem
 11      Protected   Sub  Page_Load( ByVal  sender  As   Object ,  ByVal  e  As  System.EventArgs)  Handles   Me .Load
 12         strConn  =  System.Configuration.ConfigurationManager.AppSettings( " connstring " )
 13         myConn  =   New  SqlConnection(strConn)
 14       
 15          If   Not  Page.IsPostBack  Then
16             strSQL  =   " select * from menu  "
17             mydv  =  GetDataView(strSQL,  " menu " )
 18             mydv.RowFilter  =   " parentid=0 "
19              For  i  =   0   To  mydv.Count  -   1
20                 menunode  =   New  MenuItem
 21                 menunode.Text  =  mydv.Item(i).Item( " text " )
 22                 menunode.Value  =  mydv.Item(i).Item( " id " )
 23                 menunode.Enabled  =  mydv.Item(i).Item( " Enabled " )
 24                 menunode.Target  =  mydv.Item(i).Item( " Target " )
 25                 menunode.NavigateUrl  =  mydv.Item(i).Item( " url " )
 26                 Menu1.Items.Add(menunode)
 27                 addnode(menunode, menunode.Value)
 28                 mydv.RowFilter  =   " parentid=0 "
29              Next
30          End   If
31      End Sub
32
33      Sub  addnode( ByVal  pnode  As  MenuItem,  ByVal  pid  As   Integer )
 34          Dim  menunode  As  MenuItem
 35          Dim  j  As   Integer
36         mydv.RowFilter  =   " parentid= "   &  pid
 37          For  j  =   0   To  mydv.Count  -   1
38             menunode  =   New  MenuItem
 39             menunode.Text  =  mydv.Item(j).Item( " text " )
 40             menunode.Value  =  mydv.Item(j).Item( " id " )
 41             menunode.Enabled  =  mydv.Item(j).Item( " Enabled " )
 42             menunode.Target  =  mydv.Item(j).Item( " Target " )
 43             menunode.NavigateUrl  =  mydv.Item(j).Item( " url " )
 44             pnode.ChildItems.Add(menunode)
 45             addnode(menunode, menunode.Value)
 46             mydv.RowFilter  =   " parentid= "   &  pid
 47          Next
48
49      End Sub
50
51      Function  GetDataView( ByVal  Sql  As   String ,  ByVal  strTable  As   String )  As  DataView
 52          Dim  myDataAdapter  As  SqlDataAdapter
 53          Dim  myDataSet  As  DataSet
 54         myConn.Open()
 55         myDataAdapter  =   New  SqlDataAdapter(Sql, myConn)
 56         myConn.Close()
 57         myDataSet  =   New  DataSet
 58         myDataAdapter.Fill(myDataSet, strTable)
 59         GetDataView  =   New  DataView(myDataSet.Tables(strTable))
 60      End Function
评论
发表评论

您还没有登录，请登录后发表评论