使用jQuery+EasyUI实现CheckBoxTree的级联选中特效


Posted in Javascript onDecember 06, 2015

需求:子结点选中,父节点随之选中,父节点取消,子节点随之取消

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="js/themes/default/easyui.css" rel="stylesheet" />
  <link href="js/themes/icon.css" rel="stylesheet" />
  <script src="js/jquery-1.8.0.min.js"></script>
  <script src="js/jquery.easyui.min.js"></script>
  <script src="js/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    var data = [{
      "id": 1,
      "text": "系统",
      "children": [{
        "id": 11,
        "text": "用户管理",
        "children": [{
          "id": 19,
          "text": "增加"
        }, {
          "id": 3,
          "text": "修改"
        }, {
          "id": 5,
          "text": "删除"
        }]
      }, {
        "id": 12,
        "text": "角色管理",
        "children": [{
          "id": 13,
          "text": "增加"
        }, {
          "id": 3,
          "text": "修改"
        }, {
          "id": 5,
          "text": "删除"
        }]
      }]
    }, {
      "id": 2,
      "text": "其他",
      "state": "closed"
    }];

    $(function () {
      $("#tt").tree({
        data: data,
        checkbox: true,
        cascadeCheck: false,
        onCheck: function (node, checked) {
          if (checked) {
            var parentNode = $("#tt").tree('getParent', node.target);
            if (parentNode != null) {
              $("#tt").tree('check', parentNode.target);
            }
          } else {
            var childNode = $("#tt").tree('getChildren', node.target);
            if (childNode.length > 0) {
              for (var i = 0; i < childNode.length; i++) {
                $("#tt").tree('uncheck', childNode[i].target);
              }
            }
          }
        }
      });
    });

    function getChecked()
    {
      var arr = [];
      var checkeds = $('#tt').tree('getChecked', 'checked');
      for (var i = 0; i < checkeds.length; i++) {
        arr.push(checkeds[i].id);
      }
      alert(arr.join(','));
    }

  </script>
</head>
<body>
  <ul id="tt"></ul>
  <input type="button" value="获取选中" onclick="getChecked()" />
</body>
</html>

如图:

使用jQuery+EasyUI实现CheckBoxTree的级联选中特效

Javascript 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
JS中常用的正则表达式
Sep 29 Javascript
详解a++和++a的区别
Aug 30 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
javascript字符串函数汇总
Dec 06 #Javascript
win7下安装配置node.js+express开发环境
Dec 06 #Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 #Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 #Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 #Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 #Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 #Javascript
You might like
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
农历与西历对照
2006/09/06 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JS中的多态实例详解
2017/10/15 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python实现把数字转换成中文
2015/06/29 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
分分钟入门python语言
2018/03/20 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python中count函数知识点浅析
2020/12/17 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
农贸市场管理制度
2014/01/31 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
政风行风评议心得体会
2014/10/21 职场文书