zoukankan      html  css  js  c++  java
  • TreeView checkbox 全选

    在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选。

    勾选父节点,子节点全部选中。取消父节点,子节点不选中。

    勾选子节点,父节点也选中。

    以下是在使用的例子:

    <asp:TreeView ID="TVPermission"  runat="server" NodeIndent="20" Target="mainFrame" ExpandDepth="2"  ShowCheckBoxes="All"/>
    TreeView 控件
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {            TVPermission.Attributes.Add("OnClick","OnTreeNodeChecked()");
            }
        }
    页面加载
     1 <script type ="text/javascript" >
     2     function OnTreeNodeChecked() {
     3         var ele = event.srcElement;
     4         if (ele.type=='checkbox') {
     5             var childrenDivID = ele.id.replace('CheckBox', 'Nodes');
     6             var div = document.getElementById(childrenDivID);
     7 
     8             if (div != null) {
     9                 var checkBoxs = div.getElementsByTagName("INPUT");
    10                 for (var i = 0; i < checkBoxs.length; i++) {
    11                     if (checkBoxs[i].type == 'checkbox') {
    12                         checkBoxs[i].checked = ele.checked;
    13                     }
    14                 }
    15             }
    16             CheckOn(ele);
    17         }
    18     }
    19     function CheckOn(obj) {
    20         var div1 = WebForm_GetParentByTagName(obj, 'DIV');
    21         if (div1 != null) {
    22             var checkBoxs = div1.getElementsByTagName('INPUT');
    23             var parentCheckBoxID = div1.id.replace('Nodes', 'CheckBox');
    24             var parentCheckBox = document.getElementById(parentCheckBoxID);
    25 
    26             if (parentCheckBox != null) {
    27                 parentCheckBox.checked = true;
    28                 CheckOn(parentCheckBox);
    29                 CheckOn(parentCheckBox);
    30             }
    31         }
    32     }
    33 </script>
    前端脚本
    感谢您的认真阅读,更多内容请查看:
    出处:http://www.cnblogs.com/weiqinl
    个人主页http://weiqinl.com
    github: weiqinl
    简书:weiqinl
    您的留言讨论是对博主最大的支持!
    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    ReactNative--Flexbox布局
    ReactNative--资源,文章,等等
    ReactNative--坑--no bundle URL present
    ReactNative--StyleSheet样式表
    ReactNative--项目创建及结构分析
    ReactNative--ReactNative简介
    10-4路径文字排版 这一节完全不明白
    10-3区域文字排版
    10-2使用字符调板
    10-1使用文字工具
  • 原文地址:https://www.cnblogs.com/weiqinl/p/4710217.html
Copyright © 2011-2022 走看看