EasyUI中tree选中父节点自动选中子节点,取消子节点自动取消父节点,子节点勾选完毕自动勾选父节点

今天有需求,将树设为具有全选功能
选中父节点自动全选子节点
全选状态下,当用户取消某一个子节点,自动取消父节点的勾选
未全选状态下,用户勾选全部子节点,自动勾选对应的父节点
感觉挺简单,实际写的时候才发现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实现…擦…啥也不是\\
20220224

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

banweili008

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值