ASP.NET TreeView级联选择问题

原创 2007年09月28日 13:50:00

 

ASP.NET TreeView级联选择问题
关于ASP.NET TreeView控件级联选择问题,网上有不少的解决办法。个人觉得给TreeView注册onclick事件是最好的办法。下面是用于级联选择的一个JavaScript方法,将此方法注册到TreeViewonclick即可实现级联选择:
    function CheckSubNodes()
    {
         var obj = window.event.srcElement;
         var TreeNodeFound = false;
         var CheckedState;
         if(obj.tagName=="INPUT"&&obj.type=="checkbox")
         {
             var TreeNode = obj;
             CheckedState = obj.checked;
             do
             {
                 obj = obj.parentNode;
                 
             }
             while(obj.tagName!="TABLE")
             var parentTreeLevel = obj.rows[0].cells.length;
             var parentTreeNode = obj.rows[0].cells[0];
             var tables = obj.parentElement.getElementsByTagName("TABLE");
             var numTables = tables.length;
             if(numTables>=1)
             {
                  for(var i=0;i<=numTables;i++)
                  {
                      if(tables[i]==obj)
                      {
                           TreeNodeFound = true;
                           i++;
                           if(i==numTables)
                           {
                                return;
                           }
                      }
                      if(TreeNodeFound==true)
                      {
                           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 = CheckedState;
                            }
                            else
                            {
                                 return;
                            }
                      }
 
                  }
             }
        
         }
}
说实话,这段JavaScript代码是比较冗长的,我建了一个页面,里面包含一个TreeView,用于测试此方法:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>TreeView级联选择</title>
<script language="javascript">
    function CheckSubNodes()
    {
         var obj = window.event.srcElement;
         var TreeNodeFound = false;
         var CheckedState;
         if(obj.tagName=="INPUT"&&obj.type=="checkbox")
         {
             var TreeNode = obj;
             CheckedState = obj.checked;
             do
             {
                 obj = obj.parentNode;
                
             }
             while(obj.tagName!="TABLE")
             var parentTreeLevel = obj.rows[0].cells.length;
             var parentTreeNode = obj.rows[0].cells[0];
             var tables = obj.parentElement.getElementsByTagName("TABLE");
             var numTables = tables.length;
             if(numTables>=1)
             {
                  for(var i=0;i<=numTables;i++)
                  {
                      if(tables[i]==obj)
                      {
                           TreeNodeFound = true;
                           i++;
                           if(i==numTables)
                           {
                                return;
                           }
                      }
                      if(TreeNodeFound==true)
                      {
                           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 = CheckedState;
                            }
                            else
                            {
                                 return;
                            }
                      }
 
                  }
             }
        
         }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True" onclick="CheckSubNodes()">
            <Nodes>
                <asp:TreeNode Text="新建节点1" Value="新建节点1">
                    <asp:TreeNode Text="新建节点1.1" Value="新建节点1.1">
                        <asp:TreeNode Text="新建节点1.1.1" Value="新建节点1.1.1"></asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="新建节点2" Value="新建节点2">
                    <asp:TreeNode Text="新建节点2.1" Value="新建节点2.1"></asp:TreeNode>
                    <asp:TreeNode Text="新建节点2.2" Value="新建节点2.2"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="新建节点3" Value="新建节点3">
                    <asp:TreeNode Text="新建节点3.1" Value="新建节点3.1"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="新建节点4" Value="新建节点4"></asp:TreeNode>
            </Nodes>
        </asp:TreeView>
    </div>
    </form>
</body>
</html>
测试时,点击“新建节点1.1”会出错(但此方法还是实现了功能,尽管出错了),在开启IE调试功能时会弹出错误提示,若没有开启IE调试状态栏也会出现错误提示。下面是我的一个方法:
    function CheckSubNodes()
    {
          var obj = window.event.srcElement;      //获取事件对象的来源
          var CheckState; //定义一个变量,用于存储选中状态(true or false),以便于在子节点级联
          if(obj.tagName=="INPUT"&&obj.type=="checkbox")    //如果事件的来源是checkbox 
          {
               CheckState = obj.checked;            //获得该checkbox的选中状态
               do
               {
                  obj = obj.parentNode;           
               }
               while(obj.tagName!="TABLE")    
//获得包含该checkbox的table,由于每个节点都在一个table中,因此相当于获取到节点
               obj = obj.nextSibling;           //获得该节点的兄弟节点
               if(obj!=null&&obj.tagName=="DIV")  
//判断该节点是否为空以及是否为一棵子树,子树包含在DIV中(且在该节点的后一个节点中),
//而节点包含在table中
               {
                    var inputs = obj.getElementsByTagName("INPUT");   
//获得该节点子树中的checkbox
                    for(var i=0;i<inputs.length;i++)
                    {
                        inputs[i].checked = CheckState;     
//遍历inputs,使子树的所有checkbox状态与该节点一致
                    }
               }
          }
}   
与上一个方法比起来,这个方法比上一个简练(效率自然也高一些),且没有任何错误(在IE 7下测试)。要测试此方法,请将上述测试页面CheckSubNodes()方法替换为我的方法。

TreeView实现级联选择

问题 TreeView
  • htsitr2
  • htsitr2
  • 2014年09月04日 12:15
  • 1778

bootstrap treeview级联勾选的正确姿势

上一篇文章已经说过它自带级联功能。必须用这个:https://github.com/patternfly/patternfly-bootstrap-treeview $('#tree').treev...
  • hotqin888
  • hotqin888
  • 2018年01月06日 21:55
  • 260

Asp.Net TreeView 复选框选择

//TreeView onclick 触发事件 function client_OnTreeNodeChecked(event) { //得到当前所 Click...
  • liwateryi
  • liwateryi
  • 2016年01月11日 17:14
  • 444

asp.net 查找Treeview中被选中的节点

  一个简单的Demo挑选出被选中的节点: 页面代码:  protected void btnShow_Click(object sender, EventArgs e)    ...{       ...
  • JustLovePro
  • JustLovePro
  • 2008年04月03日 17:20
  • 3503

ASPNET树形级联

#region 绑定树操作 private void BindTree() { sql = "select id,char_name,char_id from L_Ch...
  • qwe8254
  • qwe8254
  • 2016年06月29日 09:08
  • 101

TreeView CheckBox勾选联动

在C# Winform项目中用到了TreeView控件,并且需要勾选的功能,父子节点联动,需要实现如下:      1.当选中父节点的时候,如果它的子节点有没有选中的,则选中。      ...
  • esunshine1985
  • esunshine1985
  • 2015年10月30日 11:46
  • 1309

TreeView的子节点和父节点级联选中

TreeView的子节点和父节点级联选中 参考:(TreeView的子节点和父节点级联选中)http://blog.sina.com.cn/s/blog_56616d970100c483.htm...
  • alex_0629
  • alex_0629
  • 2016年10月17日 00:26
  • 1337

asp.net treeview 控件的使用

    TreeView 是 ASP.NET 的 Navigation 中的一个控件,实际上就是我们平时所说的树型菜单。 在视图设计中添加 TreeView。 HTML代码清单:后台代码清单:prot...
  • liumqj
  • liumqj
  • 2011年06月16日 11:54
  • 4896

ASP.NET 2005 C#如何在TreeView中设置节点之间的间距,节点上下间距?

如果觉得TreeView的各节点的上下间距比较小的话,可通过以下属性来设置: TreeView1.NodeStyle.Height = 28;...
  • hfzsjz
  • hfzsjz
  • 2009年06月23日 10:59
  • 2731

bootstrap-Treeview实现级联勾选

bootstrap-treeview插件默认不支持级联勾选的,想要实现那就要自己动手了
  • jiang_2992
  • jiang_2992
  • 2017年03月14日 14:00
  • 8124
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET TreeView级联选择问题
举报原因:
原因补充:

(最多只允许输入30个字)