asp.net 树形目录

 
 原来在论坛里发过专题帖子，只是由于帖子丢失原因，有些问题找不到了，同时这次也补充了一些，发到文档区以方便查询吧
原贴
http://expert.youkuaiyun.com/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">   "    +    " <!--   "    +    "             function  initTree()  {   "    + "                          "    +   strTreeName   +    " .onSelectedIndexChange  =  function()  {   "    +      " if  (event.oldTreeNodeIndex  !=   
event .newTreeNodeIndex)   "   +   " this .queueEvent( ' onselectedindexchange ' ,   event .oldTreeNodeIndex   +    ' , '    +    event .newTreeNodeIndex);   "   +     " window.setTimeout( ' "  +  strRef.Replace(" '" , " / ' ")    +  " ' ,   0 ,   ' JavaScript ' );   "   +     "                         }   "   +       "             }   "   +     " //   -->  "  +  "</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.youkuaiyun.com/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());   
   }
  }
 }

 

--------------------------------------------------------------------------------
两个客户端操作TreeView节点CheckBox的小例子     选择自 hgknight 的 Blog 
关键字   TreeView CheckBox javascript
 
 
第一个例子是当取消或选中节点选中状态时，子节点也做相应的取消或选中变化
需要注意的是如果要初始设置TreeNode为选中状态，只能在客户端设置。如果在服务器端设置TreeNode为选中状态，则在客户端使用getAttribute("Checked")，得到的值永远是true。

<% ... @ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  %>
< HTML >
  < HEAD >
   < script  language ="C#"  runat ="server" > ...
   private void Page_Load(object sender, System.EventArgs e)
   ...{  
    TreeView1.Attributes.Add("oncheck","tree_oncheck(this)");
   }
   </ script >
   < script  language ="javascript" > ...
<!--
//初始化选中节点
function initchecknode()
...{
 var node=TreeView1.getTreeNode("1");
 node.setAttribute("Checked","true");
 setcheck(node,"true");
 FindCheckedFromNode(TreeView1);
}
//oncheck事件
function tree_oncheck(tree)
...{
 var node=tree.getTreeNode(tree.clickedNodeIndex);
 var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");
 setcheck(node,Pchecked);
 document.all.checked.value="";
 document.all.unchecked.value="";
 FindCheckedFromNode(TreeView1);
}
//设置子节点选中
function setcheck(node,Pc)
...{
 var i;
 var ChildNode=new Array();
 ChildNode=node.getChildren();
 
 if(parseInt(ChildNode.length)==0)
  return;
 else
 ...{
  for(i=0;i<ChildNode.length;i++)
  ...{
   var cNode;
   cNode=ChildNode[i];
   if(parseInt(cNode.getChildren().length)!=0)
    setcheck(cNode,Pc);
   cNode.setAttribute("Checked",Pc);
  }
 }
}
//获取所有节点状态
function FindCheckedFromNode(node) ...{
 var i = 0;
 var nodes = new Array();
 nodes = node.getChildren();
 
 for (i = 0; i < nodes.length; i++) ...{
  var cNode;
  cNode=nodes[i];
  if (cNode.getAttribute("Checked"))
   AddChecked(cNode);
  else
      AddUnChecked(cNode);
 
  if (parseInt(cNode.getChildren().length) != 0 ) ...{
   FindCheckedFromNode(cNode);
  }
 }
}
//添加选中节点
function AddChecked(node) ...{
 document.all.checked.value += node.getAttribute("NodeData");
 document.all.checked.value += ',';
}
//添加未选中节点
function AddUnChecked(node) ...{
 document.all.unchecked.value += node.getAttribute("NodeData");
 document.all.unchecked.value += ',';
}
//-->
   </ script >
  </ HEAD >
  < body  onload ="initchecknode()" >
   < iewc:TreeView  id ="TreeView1"  runat ="server"  ExpandLevel ="5" >
    < iewc:TreeNode  NodeData ="0"  CheckBox ="True"  Text ="Node0"  Expanded ="True" >
     < iewc:TreeNode  NodeData ="1"  CheckBox ="True"  Text ="Node1"  Expanded ="True" ></ iewc:TreeNode >
     < iewc:TreeNode  NodeData ="2"  CheckBox ="True"  Text ="Node2"  Expanded ="True" >
      < iewc:TreeNode  NodeData ="3"  CheckBox ="True"  Text ="Node3"  Expanded ="True" >
       < iewc:TreeNode  NodeData ="4"  CheckBox ="True"  Text ="Node4"
Expanded ="True" ></ iewc:TreeNode >
      </ iewc:TreeNode >
     </ iewc:TreeNode >
    </ iewc:TreeNode >
    < iewc:TreeNode  NodeData ="5"  CheckBox ="True"  Text ="Node5"  Expanded ="True" >
     < iewc:TreeNode  NodeData ="6"  CheckBox ="True"  Text ="Node6"  Expanded ="True" ></ iewc:TreeNode >
    </ iewc:TreeNode >
    < iewc:TreeNode  NodeData ="7"  CheckBox ="True"  Text ="Node7"  Expanded ="True" >
     < iewc:TreeNode  NodeData ="8"  CheckBox ="True"  Text ="Node8"  Expanded ="True" >
      < iewc:TreeNode  NodeData ="9"  CheckBox ="True"  Text ="Node9"
Expanded ="True" ></ iewc:TreeNode >
     </ iewc:TreeNode >
    </ iewc:TreeNode >
   </ iewc:TreeView >< P >
    < TABLE  id ="Table1"  cellSpacing ="1"  cellPadding ="1"  width ="300"  border ="1" >
     < TR >
      < TD >
       < asp:Label  id ="Label1"  runat ="server" > checked </ asp:Label ></ TD >
      < TD >
       < INPUT  id ="checked"  type ="text"  size ="32" ></ TD >
     </ TR >
     < TR >
      < TD >
       < asp:Label  id ="Label2"  runat ="server" > unchecked </ asp:Label ></ TD >
      < TD >< INPUT  id ="unchecked"  type ="text"  size ="32" ></ TD >
     </ TR >
    </ TABLE >
    < br >
   </ P >
  </ body >
</ HTML >

 
第二个例子是关于如何在服务器端得到客户端设置后的节点选中状态

<% ... @ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls,
Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<HTML>
 <HEAD>
  <script language="C#" runat="server">
   private void Button1_Click(object sender, System.EventArgs e)
   {
    Response.Write(TreeView1.Nodes[0].Checked);
   }
  </script>
  <script language="javascript">
   function set_check()
   {
    var nodeindex = "0";
    var node=TreeView1.getTreeNode(nodeindex);
    node.setAttribute("Checked","True");
    TreeView1.queueEvent('oncheck', nodeindex);
   }
  </script>
 </HEAD>
 <body>
  <form id="TestTree" method="post" runat="server">
   <iewc:TreeView id="TreeView1" runat="server">
    <iewc:TreeNode CheckBox="True" Text="Node0"></iewc:TreeNode>
   </iewc:TreeView>
   <br>
   <input type="button" value="set check" onclick="set_check()">
   <br>
   <asp:Button id="Button1" runat="server" Text="submit" OnClick="Button1_Click"></asp:Button>
  </form>
 </body>
</HTML>