编程 Javascript

使用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的级联选中特效

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在JavaScript中实现命名空间

Nov 23 Javascript

javascript instanceof 内部机制探析

Oct 15 Javascript

浏览器常用高宽的jquery插件

Feb 24 Javascript

jQuery拖动图片删除示例

May 10 Javascript

60行js代码实现俄罗斯方块

Mar 31 Javascript

jquery+html仿翻页相册功能

Dec 20 Javascript

原生JS改变透明度实现轮播效果

Mar 24 Javascript

ES6中参数的默认值语法介绍

May 03 Javascript

react native实现往服务器上传网络图片的实例

Aug 07 Javascript

如何去除vue项目中的#及其ie9兼容性

Jan 11 Javascript

对vue里函数的调用顺序介绍

Mar 17 Javascript

深入理解redux之compose的具体应用

Jan 12 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