今天有需求,将树设为具有全选功能
选中父节点自动全选子节点
全选状态下,当用户取消某一个子节点,自动取消父节点的勾选
未全选状态下,用户勾选全部子节点,自动勾选对应的父节点
感觉挺简单,实际写的时候才发现oncheck方法好坑,百思不得其解,
搞了两个多小时,想出来一个笨方法,代码如下:
$("#zj_tree").tree({url : '/dangjian/gxhxm/rest/groupManage/queryGroupTree',method : 'post',animate : true,checkbox : true,cascadeCheck : false,onCheck : function(node, checked) {//获取子节点var children = $("#zj_tree").tree("getChildren",node.target);//判断是否为父节点if (children.length > 0) {//全选 if (checked) {for (i in children) {$("#zj_tree").tree("check",children[i].target);}} else {//count为计数器var count = -1;for (i in children) {if (children[i].checked == true) {count = count + 1;}}//只有子节点全部为选中状态时,才会执行取消全选if (count + 1 == children.length) {for (i in children) {$("#zj_tree").tree("uncheck",children[i].target);}}}} else {//获取父节点var parentNode = $("#zj_tree").tree("getParent",node.target);//获取子节点var children = $("#zj_tree").tree("getChildren",parentNode.target);if (checked) {//count为计数器var count = -1;for (i in children) {if (children[i].checked == true) {count = count + 1;}}//当子节点全部为选中状态时,勾选父节点if (count + 1 == children.length) {$("#zj_tree").tree("check",parentNode.target);}} else {//取消勾选父节点 $("#zj_tree").tree("uncheck", parentNode.target);}}},onLoadSuccess : function(node, data) {console.log('群组', data)}});
PS:两年多后才忽然发现:
这个cascadeCheck属性只要设置为true,就是上述的功能,
同志们要引以为戒啊,做功能的时候要好好研究API
当初居然把自带的功能禁用然后手写JS实现…擦…啥也不是\\
0224
EasyUI中tree选中父节点自动选中子节点 取消子节点自动取消父节点 子节点勾选完毕自动勾选父节点