需求:
有一棵这样的树,点击父节点时,子节点要全勾,取消父节点时,子节点又要全部取消勾选,但是,还有子节点全部取消勾选的同时,还得让父节点的勾选保留。
想法:
第一想法就是取消级联检查自己实现oncheck事件啊。。。但是,要初始化勾选的时候,发现进入了死循环或者总是达不到满意的效果。。。。
解决办法:
oncheck事件正常实现,在初始化勾选的时候避开树的oncheck事件就好。
那么问题来了,怎么避免,想到急用checkbox的选中事件,可恶的是,easyui的tree里面的checkbox居然是span!!!操作样式实现勾选效果的。既然你操作css那我我也操作。下面上代码:
onCheck:function(node,checked) {
if (node.attributes == 1 && !checked) { // 父节点勾选子节点全选
var child = $('#departTree').tree('getChildren', node.target);
for(var i =0;i<child.length;i++){
$('#departTree').tree('uncheck',child[i].target);
}
}
if (node.attributes == 1 && checked) { // 父节点取消勾选子节点也全部取消
var child = $('#departTree').tree('getChildren', node.target);
for(var i =0;i<child.length;i++){
$('#departTree').tree('check',child[i].target);
}
}
}
注:attributes这里我用来做父节点根节点的标志,0表示根节点,1表示父节点,2表示子节点
然后再初始化勾选的时候
var node = $('#departTree').tree('find', deptIdArr[i]);
var v = node.target;
var $v =$(v);
$v.children('.tree-checkbox').removeClass('tree-checkbox0').addClass('tree-checkbox1');
注:deptIdArr[i]这边表示节点的id
操作CSS来模仿勾选效果,不触发oncheck事件。这样就能达到想要的初始得效果了。