zoukankan      html  css  js  c++  java
  • JS实现对TreeView的全选

    //页面TreeView控件如:<asp:TreeView ID="tvSelectUser" runat="server" ShowCheckBoxes="All" ></asp:TreeView>

    //方法一:最简单的全选,取消全选,没有进行递归,没有对子节点进行选择
        function OnTreeNodeChecked1()
        {
            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;
                    }
                }
            }
        }

    //调用方法在Page_Load事件中添加 tvSelectUser.Attributes.Add("onclick", "OnTreeNodeChecked()"); 或者 OnClick="OnTreeNodeChecked1();"

    //也可以如:asp:TreeView ID="tvSelectUser" runat="server" ShowCheckBoxes="All"  onclick=OnTreeNodeChecked1()"></asp:TreeView>

     

     //方法二:
        //JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点
        //仅支持TreeView
        //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()"); 或者 OnClick="OnTreeNodeChecked();"
        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;
                    }
                }
                OnTreeNodeChildChecked(ele);
                        
            }
        }
       
        function OnTreeNodeChildChecked(ele)
        {
            //递归处理
            if (ele == null)
            {
                ele = event.srcElement;
            }
            var parentDiv = ele.parentElement;//.parentElement.parentElement.parentElement.parentElement;
          
            var parentChkBox=document.getElementById(parentDiv.id.replace('Nodes','CheckBox'));
            if(parentChkBox!=null)
            {
                var ChildsChkAll=true;
                var Boxs = parentDiv.getElementsByTagName('INPUT');
                for(var i=0;i<Boxs.length;i++)
                {
                    if(Boxs[i].type=='checkbox'&&Boxs[i].checked==false)
                    {
                        ChildsChkAll=false;
                    }
                }
                parentChkBox.checked=ChildsChkAll;
                OnTreeNodeChildChecked(parentChkBox);
            }
        }

    //调用方法在Page_Load事件中添加 tvSelectUser.Attributes.Add("onclick", "OnTreeNodeChecked()"); 或者 OnClick="OnTreeNodeChecked();"

    //也可以如:asp:TreeView ID="tvSelectUser" runat="server" ShowCheckBoxes="All"  onclick=OnTreeNodeChecked()"></asp:TreeView>

     

     

    方法三:实现全部选中,当子节点没有选中时,根节点也不选中

    function SelectTreeViewNodes()
    {
        var o = event.srcElement;
        if (o.tagName == "INPUT" && o.type == "checkbox") //点击treeview的checkbox是触发
        {
            var d = o.id; //获得当前checkbox的id;
            var e = d.replace("CheckBox", "Nodes"); //通过查看脚本信息,获得包含所有子节点div的id
            var div = window.document.getElementById(e); //获得div对象
            if (div != null)  //如果不为空则表示,存在自节点
            {
                var check = div.getElementsByTagName("INPUT"); //获得div中所有的已input开始的标记
                for (i = 0; i < check.length; i++)
                {
                    if (check[i].type == "checkbox") //如果是checkbox
                    {
                        check[i].checked = o.checked; //字节点的状态和父节点的状态相同,即达到全选
                    }

                }

            }
            else  //点子节点的时候,使父节点的状态改变,即不为全选
            {
                var divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子节点所在的div

                var id = divid.id.replace("Nodes", "CheckBox"); //获得根节点的id

                var checkbox = divid.getElementsByTagName("INPUT"); //获取所有子节点数
                var s = 0;
                for (i = 0; i < checkbox.length; i++)
                {
                    if (checkbox[i].checked)  //判断有多少子节点被选中
                    {
                        s++;
                    }
                }

                if (s == checkbox.length)  //如果全部选中 或者 选择的是另外一个根节点的子节点 ,
                {                          //    则开始的根节点的状态仍然为选中状态
                    window.document.getElementById(id).checked = true;
                }
                else
                {                               //否则为没选中状态
                    window.document.getElementById(id).checked = false;
                }

            }

        }

    }

  • 相关阅读:
    合并多行查询数据到一行:使用自连接、FOR XML PATH('')、STUFF或REPLACE函数
    行转列和列转行
    递归删除指定目录下所有文件及子目录
    有两个字符串数组a和b,寻找相同元素 (a和b都比较大)
    在Sql Server 数据库中找到含某个词的所有字段
    一段JavaScript程序
    事实表计数比事实表数据量大
    Reporting Service报表设计常见技巧及问题解法
    使用WebService的方式调用部署在服务器的Wcf服务
    LINQ To Entities如何实现查询 select * from tableA where id in (1,2,3,4) ?
  • 原文地址:https://www.cnblogs.com/vihone/p/1765719.html
Copyright © 2011-2022 走看看