今天有需求,将樹設為具有全選功能
選中父節點自動全選子節點
全選狀态下,當使用者取消某一個子節點,自動取消父節點的勾選
未全選狀态下,使用者勾選全部子節點,自動勾選對應的父節點
感覺挺簡單,實際寫的時候才發現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)
}
});