zoukankan      html  css  js  c++  java
  • asp.net2.0下利用javascript实现treeview中的checkbox全选

    实现了对Treeview控件中选择框CheckBox的全选处理。实现的是菜单选择框父项打勾后它下面的子项选择框全部为打勾。如果其中一项子 项取消打勾父项父项选择框为空。主要效果见下图:


    主要的实现原理是在TreeView控件的onclick事件中用JS实现全选操作。

    function OnTreeNodeChecked()
       {
        var ele = event.srcElement;
        if(ele.type=='checkbox')
        {
            var childrenDivID = ele.id.replace('CheckBox','Nodes');
            var div = document.getElementById(childrenDivID);
            if(div != null)
            {
                var checkBoxs = div.getElementsByTagName('INPUT');
                for(var i=0;i<checkBoxs.length;i++)
                {
                    if(checkBoxs[i].type=='checkbox')
                    checkBoxs[i].checked=ele.checked;
                }
            }
            else
            {
                var div = GetParentByTagName(ele,'DIV');
                var checkBoxs = div.getElementsByTagName('INPUT');
                var parentCheckBoxID = div.id.replace('Nodes','CheckBox');
                var parentCheckBox = document.getElementById(parentCheckBoxID);
                for(var i=0;i<checkBoxs.length;i++)
                {
                    if(checkBoxs[i].type=='checkbox' && checkBoxs[i].checked)
                    {
                        parentCheckBox.checked = true;
                        return;
                    }
                }
                parentCheckBox.checked = false;
            }
           
        }
    }

              function GetParentByTagName(element, tagName)
              {
                var parent = element.parentNode;
                var upperTagName = tagName.toUpperCase();
                while (parent && (parent.tagName.toUpperCase() != upperTagName))
                {
                  parent = parent.parentNode ? parent.parentNode : parent.parentElement;
                }
                 return parent;
              }

    剩下的就是TreeView控件绑定的onclick事件了。


    <asp:TreeView ID="TreeView1" runat="server" onclick="OnTreeNodeChecked()" ShowCheckBoxes="All"   ExpandDepth="2" Width="100%" Height="100%">
                                       
    </asp:TreeView>

    至此实现了所有的用JS实现TreeView控件的全选与部分选择的问题。

    虽然会提示  onclick不是有效属性,但是照样可以执行。

    TEST

  • 相关阅读:
    一个整型数组里除了两个数字之外,其他的数字都出现了两次
    输入一颗二叉树的根节点,求该树的深度
    输入两个单向链表,找出它们的第一个公共结点
    java归并排序
    这样设计 Java 异常更优雅,赶紧学!
    2019 最新 Java 核心技术教程,都在这了!
    程序员加班写的代码,千万不要相信!
    为什么有些大公司技术弱爆了?
    这才是微服务划分的正确姿势,值得学习!
    为什么 Kafka 速度那么快?
  • 原文地址:https://www.cnblogs.com/smallfa/p/1678955.html
Copyright © 2011-2022 走看看