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

  • 相关阅读:
    电脑性能提升三
    电脑实用小技巧
    自定义windows开机声音
    电脑性能提升一
    rpm和yum软件管理
    Linux网络技术管理及进程管理
    RAID磁盘阵列及CentOS7系统启动流程
    Linux磁盘管理及LVM讲解
    Linux计划任务及压缩归档
    Android Studio 常用快捷键及常用设置
  • 原文地址:https://www.cnblogs.com/smallfa/p/1678955.html
Copyright © 2011-2022 走看看