TreeView详细说明
http://www.microsoft.com/china/MSDN/library/archives/library/DNAspp/html/aspnet-usingtreeviewieWebcontrol.asp  
  TreeView详细说明,包括安装和使用。  
  ----------------------------------------------  
   
  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();   
    
      
   

旧文

Microsfot.Web.UI.WebControls.TreeView JavaScript控制方法研究

caidaoli@hotmail.com 2003-11-26

  1. 被选择的节点的索引：
    tree.selectedNodeIndex

  2. 被单击的节点的索引：
    tree.clickedNodeIndex

  3. 获取一个节点：
    tree.getTreeNode(nodeIndex)

  4. 在根节点下增加一个子节点：
    var tree = document.all['TreeView1'];
    var node = tree.createTreeNode() ;
    tree.add(node);
    node.setAttribute( "text", "aaaa");

  5. 在当前节点下增加一个子节点：
    var tree = document.all['TreeView1'];
    var node = tree.createTreeNode() ;
    var parentNode = tree.getTreeNode( tree.clickedNodeIndex);
    parentNode.add(node);
    node.setAttribute( "text", "aaaa");

  6. 通过XML文件来增加子节点：
    node.setAttribute("NavigateUrl","xxx");
    node.databind();
  7. 动态增加子节点后自动展开：
    node.setAttribute('expanded', 'true');//MS提供的HTC中需要修改一个地方，否则就会产生一个异常
  8. 获取节点的属性：
    node.getAttribute("xxx")
  9. 设置节点的属性 ：
    node.setAttribute('xxx', 'xxxx');
  10. 常用属性列表：
    属性 值 含义
    CheckBox True False 是否有选择框
    checked True False 选择框是否被选中
    Expanded True False 是否展开
    ImageURL 　 正常状态下左边的图标
    SelectedImageUrl 　 当节点被选择时左边的图标
    ExpandedImageUrl 　 当节点被展开后左边的图标
    Target 　 目标框架
    navigateurl 　 目标URL
    type 　 节点的类型
    childtype 　 子节点的类型
    Text 　 节点显示的文本
    innerText 　 　
    innerHTML 　 　
    defaultstyle 　 默认的风格
    hoverstyle 　 当鼠标移到节点的上面时的风格
    selectedstyle 　 当节点被选择时的风格
    treenodesrc 　 　
  11. 获取父节点：
    node.getParent()
  12. 获取子节点：
    node.getChildren()
  13. 判断节点是否有子节点
    node.getChildren().length > 0
  14. 响应onselectedindexchange事件：
    var tree = document.all["tvMain"];
    tree.attachEvent("onselectedindexchange", SelectedIndexChange);

  客户端控制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());          
        }  
      }  
    }  
 posted on 2007-07-06 14:10  思绪随风  阅读(697)  评论(1)  编辑  收藏  举报