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

  • 相关阅读:
    Maganto错误Cannot initialize the indexer process的解决方法
    保护单元格内容
    欧几里得算法
    SVN服务端命令行的使用心得
    C++常用数值类型的值范围的宏定义
    代码之谜(三) 运算符
    《越狱》观后感
    R 报错的问题
    代码之谜(二) 语句与表达式
    你为什么薪水那么低(二)之 生产力
  • 原文地址:https://www.cnblogs.com/smallfa/p/1678955.html
Copyright © 2011-2022 走看看