easyUI树改造(实现点击父节点,选中子节点,并可以只选择父节点)
程序员文章站
2022-06-14 10:26:38
...
1.取消节点层叠选择属性,默认是开启的
cascadeCheck:false
2.点击父节点时触发onCheck事件(注意:$('#'+currentValue.domId)有可能不一样,改成自己的id名)
onCheck:function(node, checked){
var childList = $(this).tree('getChildren',node.target);
if(childList.length>0){
// 节点被勾选
var checkedTrue = function(){
childList.map(function(currentValue){
$('#'+currentValue.domId).find(".tree-checkbox").removeClass("tree-checkbox0").addClass("tree-checkbox1");
})
};
// 节点取消勾选
var checkedFalse = function(){
$.each(childList,function(index,currentValue){
$('#'+currentValue.domId).find(".tree-checkbox").removeClass("tree-checkbox1").addClass("tree-checkbox0");
})
};
// 判断是否为checked
var checkChangeProperties = checked==true ? checkedTrue() : checkedFalse();
}
}
总结:
tree-checkbox2 有子节点被选中
tree-checkbox1 节点被选中
tree-checkbox0 节点未选中
主要根据父节点是否被选中,来通过点击事件,改变tree的样式,将该父节点下的子节点选中。
扩展:
由于tree被改造,$('#orgTree').tree('getChecked', ['checked','indeterminate']);的方式不能获取到所有选中的节点,
所以重新写个方法,来获取tree所以被选中的节点。
// 获取tree所有打上勾的节点
function getAllChecked() {
var keyValues = new Array();
// 由于easyuitree被改造,所以采用以下方式获取已选中的节点
$(".tree-checkbox1").parent('.tree-node').each(function(){
keyValues.push($('#orgTree').tree('getNode',this));
});
return keyValues;
}
上一篇: Spring源码分析(二)Spring怎么扩展解析xml接口的
下一篇: 安装和使用kafka