ztree实现叶子节点半勾选状态

ztree叶子节点半勾选

这只是效果图,demo点击链接查看

ztree是一个前端的基于jQuery的树形结构插件,最近项目要用到,所以就学习了下,功能还是很强大的,但是一些小细节还是无法满足的,于是研究了一天,自己写了几个方法把小细节实现了。

具体业务是这样的:
1,节点可以勾选
2,叶子节点可以半勾选/取消,
3,勾选状态和父节点关联
4,点击叶子节点可以执行方法
5,点击父节点只能展开或收缩

但是研究后发现,ztree不能提供叶子节点自动半勾选和半勾选的自动计算(即自动取消,比如取消父节点,所有叶子节点的半勾选都要取消),也就是说只能手动设置,而后面发现这个还是比较坑:
1,手动设置的半勾选状态必须手动去清除
2,父节点自动计算的半勾选的halfCheck居然是false…

所以需要注意这点,先看看改造后的实例

下面来说说实现叶子节点半勾选的js代码:

前提:需要在zNodes中每个父节点的json中添加上isParent: true的属性

// 对叶子节点添加/删除半勾选状态
function halfCheckOper(node, flag) {
	if (node.isParent && flag) return;
	node.halfCheck = flag;
	treeObj.checkNode(node, flag, true, false);
}

△对叶子节点进行半勾选,其实相当于重写勾选方法,我定义了一个halfCheckOper方法,传入当前的node和勾选状态flag,然后将node的halfCheck属性改为flag,再执行node的勾选操作checkNode方法,这样就可以实现半勾选了。

// 删除当前叶子节点的半勾选状态
function beforeCheck(id, node, clickFlag) {
	if (!node.isParent && node.halfCheck) {
		halfCheckOper(node, !node.halfCheck);
		return false;
	}
}

△api明确说了,强制半勾选状态(非自动计算)只能手动设置,并且设置后不会自动清除,也就是说必须再次手动清除,而当叶子节点取消勾选后,父节点是可以自动计算的(因为不是强制设置的半勾选),所以只用更改当前叶子节点的状态即可。

// 删除父节点下的所有叶子节点半勾选状态
function onCheck(event, id, node, clickFlag) {
	if (node.isParent && !node.checked) {
		var nodes = node.children;
		for (var i = 0; i < nodes.length; i ++) {
			var nodeChild = nodes[i];
			if (!nodeChild.isParent && nodeChild.halfCheck) {
				halfCheckOper(nodeChild, false);
			}
		}
	}
}

△因为叶子节点的半勾选是强制设置的,所以取消父节点勾选状态是不能清除叶子节点半勾选状态的,所以,原demo下,取消父节点的勾选,半勾选的叶子节点还会剩下一个黑色背景的框框(勾勾已经自动清除),这样并没有达到取消勾选的效果,因此,需要遍历所有叶子节点,依次取消半勾选状态,而父节点的children属性只能获取下一级的子节点,所以要在setting的check里使用autoCheckTrigger: true,执行冒泡机制,这样在执行onCheck时,每一级的父节点都会执行一次取消子节点的半勾选方法了。

需要注意的是,ztree比较坑的就是强制半勾选状态只能手动取消,不会进行自动计算,另外一个就是自动计算的半勾选的alfCheck是false!!!

因为时间有限,写的有些仓促,很多地方无法细说,如果有不懂的地方可以留言。

本文《ztree实现叶子节点半勾选状态》来自 www.juwends.com ,欢迎转载或CV操作,但请注明出处,谢谢!