最近出差,在客户方开发时用到了easyUI 等插件,他们自己提了个很有意思的bug,关于用户权限分配的tree树选中问题;
如上图当tree加载的时候就会调用oncheck事件,这个时候想要在oncheck事件中定义父节点选中则选中所有字节点时,加载tree时会出现 Uncaught RangeError: Maximum call stack size exceeded -- 超过了最大调用堆栈大小 错误,简单点就是栈溢出了,因为加载递归调用 进入了死循环 导致,自己也试了很多,最后在网上找到了一种可行方案给大家分享一下
var check_switch=false;//定义 boolean 变量 作为初始化onCheck的开关
$("#roleModuleTree").tree({
parentField : 'pid',
lines : true,
rootProperty : 'modules',
checkbox:true,//是否带复选框
cascadeCheck:false,//定义是否层叠选中状态。
animate:true,//当节点展开或折叠是否显示动画效果。
checkcheck:true,//待查询是什么
url:'***********************',
onBeforeLoad : function(node, param) {
check_switch=false;//初始化时 置为否 关闭onCheck事件开关
},
onLoadSuccess : function(node, data) {
check_switch=true;//数据 加载成功 置为 true 打开onCheck事件开关
},
onCheck: function(node, checked){
if(check_switch){// 数据加载成功 且是用户点击方才触发事件
check_switch = false;//为了防止递归调用死循环 造成栈溢出 先关闭
//当选中节点的时候,把对应的父节点选中
if(checked){
var parent = $("#roleModuleTree").tree('getParent', node.target);
//var children = $("#roleModuleTree").tree('getChildren');
if(parent){
//alert(1);
$('#roleModuleTree').tree('check', parent.target);
}
check_switch = true;//打开 父节点选中后
//节点选中,则check所有子节点
var children = $("#roleModuleTree").tree('getChildren', node.target);
if(children){
for(var i=0; i<children.length;i++){
if(children[i]){
$('#roleModuleTree').tree('check', children[i].target);
}
}
}
}else{
cancelSubNode(node);//判断是否可以取消父节点
check_switch = true;
//父节点取消选中,则uncheck所有子节点
var children = $("#roleModuleTree").tree('getChildren', node.target);
if(children){
for(var i=0; i<children.length;i++){
if(children[i]){
$('#roleModuleTree').tree('uncheck', children[i].target);
}
}
}
}
}
}
});
//判断父级节点是否可以 取消勾选
function cancelSubNode(node){
var parent = $("#roleModuleTree").tree('getParent', node.target);//当前节点的父节点
if(parent){
var subNodes = [];
$(parent.target).next().children().children("div.tree-node").each(function(){
subNodes.push($("#roleModuleTree").tree('getNode',this));
});
//判断是否可以取消 父级节点 的选中
if(subNodes){
var falg=true;
$.each(subNodes,function(){
if(this.checked){//同级中有一个选中的 上级父节点 就不能取消选中
falg=false;
}
})
if(falg){
$('#roleModuleTree').tree('uncheck', parent.target);
}
}
return subNodes;//返回 所有同级节点
}
}
另外 再 给扩充一个获取当前节点 的同级 的节点
function getSubNode(node){
var parent = $("#roleModuleTree").tree('getParent', node.target);//当前节点的父节点
if(parent){
var subNodes = [];
$(parent.target).next().children().children("div.tree-node").each(function(){
subNodes.push($("#roleModuleTree").tree('getNode',this));
});
return subNodes;//返回 所有同级节点
}
}