天天看點

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)

	}
});