TreeView checkbox 全选

时间:2021-11-19 18:34:52

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

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

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

以下是在使用的例子:

<asp:TreeView ID="  ShowCheckBoxes="All"/>

TreeView 控件

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {            TVPermission.Attributes.Add("OnClick","OnTreeNodeChecked()");
        }
    }

页面加载

 <script type ="text/javascript" >
     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;
                     }
                 }
             }
             CheckOn(ele);
         }
     }
     function CheckOn(obj) {
         var div1 = WebForm_GetParentByTagName(obj, 'DIV');
         if (div1 != null) {
             var checkBoxs = div1.getElementsByTagName('INPUT');
             var parentCheckBoxID = div1.id.replace('Nodes', 'CheckBox');
             var parentCheckBox = document.getElementById(parentCheckBoxID);

             if (parentCheckBox != null) {
                 parentCheckBox.checked = true;
                 CheckOn(parentCheckBox);
                 CheckOn(parentCheckBox);
             }
         }
     }
 </script>

前端脚本