使用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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
js onclick事件传参讲解
Nov 06 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP基本语法总结
2014/09/06 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
node内置调试方法总结
2018/02/22 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
技能竞赛活动方案
2014/02/21 职场文书
会议主持词
2014/03/17 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
社会调查研究计划书
2014/05/01 职场文书
踏青活动策划方案
2014/08/19 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
python数据处理之Pandas类型转换
2022/04/28 Python