现在的位置: 首页 > 综合 > 正文

treeview小结

2013年08月11日 ⁄ 综合 ⁄ 共 5949字 ⁄ 字号 评论关闭

总结了一下用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[i]; 
        alert(cNode.getAttribute( "Text ")); 
        if(parseInt(cNode.getChildren().length)!=0) 
          AlertNode(cNode.getChildren());         
      } 
    } 
  } 

抱歉!评论已关闭.