none
怎样用js实现单击父结点时子节点全部选中? RRS feed

  • 问题

  •  怎样用js实现单击父结点时子节点全部选中,而当所有的子节点选中时父节点选中?

    我从网上找了个却不好用。
    TreeView.getTreeNode(TreeView.selectedNodeIndex)这个在执行时出错,提示没有方法
    2009年2月12日 11:42

答案

  • 不好意思,拷贝的时候没拷贝好,变量出问题,现在改正,ie6-8,ff,opera,谷歌浏览器均支持
    <%@ Page Language="C#"%>  
    <script runat="server">   
     protected void Page_Load(object sender, EventArgs e)   
     {   
       TreeView1.Attributes.Add("onclick", "OnClientTreeNodeChecked(event)");   
     }   
     protected void Button1_Click(object sender, EventArgs e)   
     {   
       foreach (TreeNode node in TreeView1.CheckedNodes)   
       {   
         Response.Write("<li>"+ node.Text);   
       }   
     }    
    </script>  
    <html xmlns="http://www.w3.org/1999/xhtml">   
    <head id="Head1" runat="server">   
     <title>客户端实现全选子节点</title>  
    <script type="text/javascript" language="javascript">   
     //识别不同的浏览器   
     function getTargetElement(evt) {   
       var elem   
       if (evt.target)   
       {   
         elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target   
       }    
       else    
       {   
         elem = evt.srcElement   
       }   
       return elem   
     }   
     function OnClientTreeNodeChecked(evt)   
     {   
       evt = (evt) ? evt : ((window.event) ? window.event : "")   
       if(evt == "")   
       {   
         return   
       }   
       var obj = getTargetElement(evt)   
       var hasTreeNode = false  
       var treeNodeChecked   
       if (obj.tagName == "INPUT" && obj.type == "checkbox") {   
         var treeNode = obj  
         treeNodeChecked = treeNode.checked   
         while (obj.tagName != "TABLE")   
         {   
           obj = obj.parentNode   
         }   
         var parentTreeLevel = obj.rows[0].cells.length   
         var parentTreeNode = obj.rows[0].cells[0]   
         var containerDiv = obj.parentNode   
         if(containerDiv == null)   
         {   
           return   
         }        
         var tables = containerDiv.getElementsByTagName("TABLE")   
         var tableCount = tables.length   
         if(tableCount < 1)   
         {   
           return   
         }      
         for (i = 0; i < tableCount; i++)   
         {   
           if (tables[i] == obj)   
           {   
             hasTreeNode = true;   
             i++;   
             if (i == tableCount)   
             {   
               return;   
             }   
           }   
           if (hasTreeNode)   
           {   
             var childTreeLevel = tables[i].rows[0].cells.length;   
             if (childTreeLevel > parentTreeLevel)   
             {   
               var cell = tables[i].rows[0].cells[childTreeLevel - 1];   
               var inputs = cell.getElementsByTagName("INPUT");   
               inputs[0].checked = treeNodeChecked;   
             }   
             else   
             {   
               return;   
             }   
           }   
         }        
       }   
     }    
        
     </script>  
    </head>  
    <body>  
     <form id="form1" runat="server">   
       <asp:TreeView ID="TreeView1" runat="server" ShowLines="true"  
         ShowCheckBoxes="All">   
         <Nodes>  
           <asp:TreeNode Text="【孟子E章】站点一" SelectAction="SelectExpand">   
             <asp:TreeNode Text="ASP.NET技术">   
               <asp:TreeNode Text="缓存管理"/>   
               <asp:TreeNode Text="状态管理" />  
               <asp:TreeNode Text="导航控件">   
                 <asp:TreeNode Text="Menu 服务器控件" />  
                 <asp:TreeNode Text="SiteMapPath 服务器控件" />  
               </asp:TreeNode>  
             </asp:TreeNode>  
             <asp:TreeNode Text="C#技术" />  
           </asp:TreeNode>  
           <asp:TreeNode Text="【孟子E章】站点二" />  
           <asp:TreeNode Text="【孟子E章】站点三">   
             <asp:TreeNode Text="Web开发技术" />  
             <asp:TreeNode Text="Web脚本库" />  
           </asp:TreeNode>  
         </Nodes>  
       </asp:TreeView>  
       <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" />  
     </form>  
    </body>  
    </html>  


    孟宪会
    2009年2月13日 3:24
    版主

全部回复

  • 那是很早之前的代码吧。现在的方法都没有以小写开头的。下面是一个完整的例子
    <%@ Page Language="C#"%> 
    <script runat="server">  
     protected void Page_Load(object sender, EventArgs e)  
     {  
       TreeView1.Attributes.Add("onclick", "OnClientTreeNodeChecked(event)");  
     }  
     protected void Button1_Click(object sender, EventArgs e)  
     {  
       foreach (TreeNode node in TreeView1.CheckedNodes)  
       {  
         Response.Write("<li>"+ node.Text);  
       }  
     }   
    </script> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
     <title>客户端实现全选子节点</title> 
    <script type="text/javascript" language="javascript">  
     //识别不同的浏览器  
     function getTargetElement(evt) {  
       var elem  
       if (evt.target)  
       {  
         elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target  
       }   
       else   
       {  
         elem = evt.srcElement  
       }  
       return elem  
     }  
     function OnClientTreeNodeChecked(evt)  
     {  
       evt = (evt) ? evt : ((window.event) ? window.event : "")  
       if(evt == "")  
       {  
         return  
       }  
       var obj = getTargetElement(evt)  
       var hasTreeNode = false 
       var treeNodeChecked  
       if (obj.tagName == "INPUT" && obj.type == "checkbox") {  
         var treeNode = obj 
         treeNodetreeNodeChecked = treeNode.checked  
         while (obj.tagName != "TABLE")  
         {  
           objobj = obj.parentNode  
         }  
         var parentTreeLevel = obj.rows[0].cells.length  
         var parentTreeNode = obj.rows[0].cells[0]  
         var containerDiv = obj.parentNode  
         if(containerDiv == null)  
         {  
           return  
         }       
         var tables = containerDiv.getElementsByTagName("TABLE")  
         var tableCount = tables.length  
         if(tableCount < 1)  
         {  
           return  
         }     
         for (i = 0; i < tableCount; i++)  
         {  
           if (tables[i] == obj)  
           {  
             hasTreeNode = true;  
             i++;  
             if (i == tableCount)  
             {  
               return;  
             }  
           }  
           if (hasTreeNode)  
           {  
             var childTreeLevel = tables[i].rows[0].cells.length;  
             if (childTreeLevel > parentTreeLevel)  
             {  
               var cell = tables[i].rows[0].cells[childTreeLevel - 1];  
               var inputs = cell.getElementsByTagName("INPUT");  
               inputs[0].checked = treeNodeChecked;  
             }  
             else  
             {  
               return;  
             }  
           }  
         }       
       }  
     }   
       
     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server">  
       <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" 
         ShowCheckBoxes="All">  
         <Nodes> 
           <asp:TreeNode Text="【孟子E章】站点一" SelectAction="SelectExpand">  
             <asp:TreeNode Text="ASP.NET技术">  
               <asp:TreeNode Text="缓存管理"/>  
               <asp:TreeNode Text="状态管理" /> 
               <asp:TreeNode Text="导航控件">  
                 <asp:TreeNode Text="Menu 服务器控件" /> 
                 <asp:TreeNode Text="SiteMapPath 服务器控件" /> 
               </asp:TreeNode> 
             </asp:TreeNode> 
             <asp:TreeNode Text="C#技术" /> 
           </asp:TreeNode> 
           <asp:TreeNode Text="【孟子E章】站点二" /> 
           <asp:TreeNode Text="【孟子E章】站点三">  
             <asp:TreeNode Text="Web开发技术" /> 
             <asp:TreeNode Text="Web脚本库" /> 
           </asp:TreeNode> 
         </Nodes> 
       </asp:TreeView> 
       <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" /> 
     </form> 
    </body> 
    </html> 
     

    孟宪会
    2009年2月12日 12:15
    版主
  • 点击一个节点之后就没响应了,是不是哪出死循环了?
    2009年2月12日 23:59
  • 出现提示“该页上的脚本造成Internet Explorer运行速度减慢。如果继续运行,您的计算机将变得更慢,是否取消该脚本?”
    2009年2月13日 0:08
  •  
    while (obj.tagName != "TABLE")  
         {  
           obj obj = obj.parentNode  
         }
    这里出现了死循环
    2009年2月13日 0:16
  •  
    while (obj.tagName != "TABLE")  
         {  
           obj obj = obj.parentNode  
         }
    改为
    while (obj.tagName != "TABLE")  
         {  
               obj = obj.parentNode  
         }
    之后,只能实现单选,不能实现选中父节点全选子节点的功能
    2009年2月13日 0:27
  • 你的是什么版本的浏览器?
    孟宪会
    2009年2月13日 0:49
    版主
  • 版本是 IE6的,操作系统是winxp sp2
    2009年2月13日 1:12
  • 不好意思,拷贝的时候没拷贝好,变量出问题,现在改正,ie6-8,ff,opera,谷歌浏览器均支持
    <%@ Page Language="C#"%>  
    <script runat="server">   
     protected void Page_Load(object sender, EventArgs e)   
     {   
       TreeView1.Attributes.Add("onclick", "OnClientTreeNodeChecked(event)");   
     }   
     protected void Button1_Click(object sender, EventArgs e)   
     {   
       foreach (TreeNode node in TreeView1.CheckedNodes)   
       {   
         Response.Write("<li>"+ node.Text);   
       }   
     }    
    </script>  
    <html xmlns="http://www.w3.org/1999/xhtml">   
    <head id="Head1" runat="server">   
     <title>客户端实现全选子节点</title>  
    <script type="text/javascript" language="javascript">   
     //识别不同的浏览器   
     function getTargetElement(evt) {   
       var elem   
       if (evt.target)   
       {   
         elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target   
       }    
       else    
       {   
         elem = evt.srcElement   
       }   
       return elem   
     }   
     function OnClientTreeNodeChecked(evt)   
     {   
       evt = (evt) ? evt : ((window.event) ? window.event : "")   
       if(evt == "")   
       {   
         return   
       }   
       var obj = getTargetElement(evt)   
       var hasTreeNode = false  
       var treeNodeChecked   
       if (obj.tagName == "INPUT" && obj.type == "checkbox") {   
         var treeNode = obj  
         treeNodeChecked = treeNode.checked   
         while (obj.tagName != "TABLE")   
         {   
           obj = obj.parentNode   
         }   
         var parentTreeLevel = obj.rows[0].cells.length   
         var parentTreeNode = obj.rows[0].cells[0]   
         var containerDiv = obj.parentNode   
         if(containerDiv == null)   
         {   
           return   
         }        
         var tables = containerDiv.getElementsByTagName("TABLE")   
         var tableCount = tables.length   
         if(tableCount < 1)   
         {   
           return   
         }      
         for (i = 0; i < tableCount; i++)   
         {   
           if (tables[i] == obj)   
           {   
             hasTreeNode = true;   
             i++;   
             if (i == tableCount)   
             {   
               return;   
             }   
           }   
           if (hasTreeNode)   
           {   
             var childTreeLevel = tables[i].rows[0].cells.length;   
             if (childTreeLevel > parentTreeLevel)   
             {   
               var cell = tables[i].rows[0].cells[childTreeLevel - 1];   
               var inputs = cell.getElementsByTagName("INPUT");   
               inputs[0].checked = treeNodeChecked;   
             }   
             else   
             {   
               return;   
             }   
           }   
         }        
       }   
     }    
        
     </script>  
    </head>  
    <body>  
     <form id="form1" runat="server">   
       <asp:TreeView ID="TreeView1" runat="server" ShowLines="true"  
         ShowCheckBoxes="All">   
         <Nodes>  
           <asp:TreeNode Text="【孟子E章】站点一" SelectAction="SelectExpand">   
             <asp:TreeNode Text="ASP.NET技术">   
               <asp:TreeNode Text="缓存管理"/>   
               <asp:TreeNode Text="状态管理" />  
               <asp:TreeNode Text="导航控件">   
                 <asp:TreeNode Text="Menu 服务器控件" />  
                 <asp:TreeNode Text="SiteMapPath 服务器控件" />  
               </asp:TreeNode>  
             </asp:TreeNode>  
             <asp:TreeNode Text="C#技术" />  
           </asp:TreeNode>  
           <asp:TreeNode Text="【孟子E章】站点二" />  
           <asp:TreeNode Text="【孟子E章】站点三">   
             <asp:TreeNode Text="Web开发技术" />  
             <asp:TreeNode Text="Web脚本库" />  
           </asp:TreeNode>  
         </Nodes>  
       </asp:TreeView>  
       <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" />  
     </form>  
    </body>  
    </html>  


    孟宪会
    2009年2月13日 3:24
    版主
  • 再次不好意思,是本论坛的Bug。,

     treeNodetreeNodeChecked = treeNode.checked   
         while (obj.tagName != "TABLE")   
         {   
           objobj = obj.parentNode   
         }   


    应该是

     treeNodeChecked = treeNode.checked   
         while (obj.tagName != "TABLE")   
         {   
           obj = obj.parentNode   
         }   

    由给改错了

    【Update】 上面的贴子修正了

    孟宪会
    2009年2月13日 3:31
    版主
  •  还有个问题,就是:当所有子节点都选中的时候父节点却没有选中呢?
    2009年2月13日 4:54
  •  还有个问题是不能点击那个加号了,点加号的时候没有反应。后来我给treeview加了 EnableClientScript="true",加号可以点了,也可以正常折叠了。但是当父节点处于折叠状态的时候选中它的checkbox,当展开该父节点的时候它下面的子节点却没有选中?!
    2009年2月13日 6:39
  • 建议你使用纯js写的动态加载树
    孟宪会
    2009年2月13日 9:02
    版主