使用jQuery+EasyUI實現CheckBoxTree的級聯選中特效

2019-11-20 11:04:26

字體：大中小

來源：轉載

供稿：網友

需求：子結點選中，父節點隨之選中，父節點取消，子節點隨之取消

代碼：

<!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>

如圖：