EasyUi Tree树 节点选中和取消

最近出差,在客户方开发时用到了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;//返回 所有同级节点
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值