在使用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>

前端脚本

TreeView checkbox 全选的更多相关文章

  1. C# winform treeView checkbox全选反选

    private void treeView2_AfterCheck(object sender, TreeViewEventArgs e)        {            if (e.Acti ...

  2. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  3. checkbox全选,反选,取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  4. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  5. checkbox全选与反选

    用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...

  6. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

  7. GridView CheckBox 全选

    GridView CheckBox 全选 <script type="text/javascript"> $(function () { $("#allChe ...

  8. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  9. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

随机推荐

  1. eclipse配置maven

  2. SpringBoot源码分析:spring的基本架构

    在深入了解springboot之前,我们需要了解spring,springboot本身就是基于spring而构建:是微服务架构中一个比较流行的框架:类似spring提供了一套完整的微服务方案如spri ...

  3. MongoDB高可用复制集分片集群搭建

    1     逻辑架构 1.1     逻辑架构图 1.2     组件说明 一.mongos(query routers):查询路由,负责client的连接,并把任务分给shards,然后收集结果.一 ...

  4. spring 事务传播特性 和隔离级别

    事务的几种传播特性1. PROPAGATION_REQUIRED: 如果存在一个事务,则支持当前事务.如果没有事务则开启2. PROPAGATION_SUPPORTS: 如果存在一个事务,支持当前事务 ...

  5. Linux 内核数据结构:双向链表

    Linux 内核提供一套双向链表的实现,你可以在 include/linux/list.h 中找到.我们以双向链表着手开始介绍 Linux 内核中的数据结构 ,因为这个是在 Linux 内核中使用最为 ...

  6. jQuery中 pageX,clientX,offsetX,layerX的区别

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...

  7. 点评前端开发工具cortex安装使用方法

    cortex安装方法: 安装最新版 sudo npm install -g cortex cortex config set registry http://registry.cortexjs.org ...

  8. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  9. Google 地图 API V3 针对移动设备进行开发

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  10. Java数据结构——字典树TRIE

    又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计. 它的优点是:利用字符串的公共 ...