ztree autoCheckTrigger=true时 子节点复选框选中 导致父节点onCheck触发多次问题处理

其他 2020-02-17 11:28:31 阅读次数: 0

  ztree实现复选框功能，并且子节点选中时，父节点自动选中，子节点取消选中（若所有子节点都没有选中）则父节点也会自动取消选中，check配置如下：

	check: {
		enable: true,
		chkStyle: "checkbox",
		chkboxType: { "Y": "p", "N": "p" },
		autoCheckTrigger: true
	},

  但是，该check配置有个问题，子节点每次选中时，都会触发父节点的onCheck事件，假设每次选中的时候都会往后台发送请求，则父节点onCheck会发送很多无用的请求，如下图所示：
在这里插入图片描述  显然，点击“应用管理”子菜单时，“权限管理”父菜单会触发onCheck事件，并向后台发送请求是合理的（设置角色、菜单关联关系）。但是，当点击角色管理时，父菜单再次触发onCheck事件，并向后台发送请求就不合理啦，因为父菜单与角色已经设置了关联关系，那么该如何解决呢？

2个方案：
1）修改兵器，改造ztree组件，子节点选中时（如果父节点已经选中），父节点不再触发onCheck事件；
2）修改onCheck事件的逻辑处理，增加节点是否已选中判断，如果是则不再向后台发送请求

因为是第三方组件，修改组件有技术风险，并影响后续版本升级，既然修改兵器可可行，就只能修改onCheck事件，减少请求发送次数。本案onCheck如下：

	var is_add = treeNode.checked == true ? 'Y' : 'N';
	if(treeNode.is_add == is_add) return;
	request({m:"setRoleMenu", is_add: is_add, role_id: role_id, mnu_id: treeNode.mnu_id},
	            function (data, textStatus){
					if (data.flag) {
						console.log(treeNode);
						treeNode.is_add = is_add;
						var zTree = $.fn.zTree.getZTreeObj("tree-menus");
						zTree.updateNode(treeNode);
					}
	            }
	);

父节点第一次选中时，treeNode.is_add会设置为Y；后续子节点选中时，父节点仍然会触发onCheck事件，在onCheck事件中判断treeNode.is_add == ‘Y’，若条件成立则不再发送请求到后台，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ztree父节点onCheck多次触发问题处理</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/zTree.v3/3.5.23/css/metroStyle/metroStyle.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
	<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.min.js"></script>
	<style>
		.pr{position: relative;}
		.pa{position: absolute;}
		#btn-reload{right: 10px; top: 5px}
	</style>
</head>
<body>
	<div class="page-content container" style="margin-top: 30px; overflow-x: hidden;">
		<div class="panel panel-default">
			<div class="panel-heading pr">
				<h3 class="panel-title">autoCheckTrigger=true,父节点会多次触发onCheck处理</h3>
				<button type="button" class="btn btn-sm btn-default pa" id="btn-reload" onclick="refreshTree()">重新加载数据</button>
			</div>
			<ul id="tree-menus" class="ztree oy-auto" data-height="auto"></ul>
		</div>
	</div>
</body>
<script type="text/javascript">
	var role_id = "12122122";
	var setting = {
			 view: {
				selectedMulti: false
			}, 
			check: {
				enable: true,
				chkStyle: "checkbox",
				chkboxType: { "Y": "p", "N": "p" },
				autoCheckTrigger: true
			},
			data: {
				simpleData: {
					enable: true,
					idKey:"mnu_id",
					pIdKey:"parent_id"
				}
			},
			callback: {
				beforeCheck: beforeCheck,
				onCheck: onCheck
			}
	};
	function onCheck(event, treeId, treeNode) {
		var is_add = treeNode.checked == true ? 'Y' : 'N';
		if(treeNode.is_add == is_add) return;
		request({m:"setRoleMenu", is_add: is_add, role_id: role_id, mnu_id: treeNode.mnu_id},
	            function (data, textStatus){
					if (data.flag) {
						console.log(treeNode);
						treeNode.is_add = is_add;
						var zTree = $.fn.zTree.getZTreeObj("tree-menus");
						zTree.updateNode(treeNode);
					}
	            }
	        );
	}
	function beforeCheck(treeId, treeNode){}
	
	function request(para, cb) {
		cb({flag: true});
	}
	
	function refreshTree() {
		var data = [
			{"parent_name":null,"mnu_id":"jreuvft7vvoi","is_add":"N","mnu_name":"菜单管理","role_id":null,"parent_id":"jreuu0bd6qva","name":"菜单管理","checked":"false","is_leaf":"N","sid":778},
			{"parent_name":null,"mnu_id":"jreuu0bd6qva","is_add":"N","mnu_name":"权限管理","role_id":null,"parent_id":"0","name":"权限管理","checked":"false","is_leaf":"Y","sid":776},
			{"parent_name":null,"mnu_id":"jrhg7ut6d2xl","is_add":"N","mnu_name":"应用管理","role_id":null,"parent_id":"jreuu0bd6qva","name":"应用管理","checked":"false","is_leaf":"Y","sid":777},
			{"parent_name":null,"mnu_id":"sa_role_manage","is_add":"N","mnu_name":"角色管理","role_id":null,"parent_id":"jreuu0bd6qva","name":"角色管理","checked":"false","is_leaf":"Y","sid":779},
			{"parent_name":null,"mnu_id":"js6vtxe2c0hi","is_add":"N","mnu_name":"租户管理","role_id":null,"parent_id":"0","name":"租户管理","checked":"false","is_leaf":"N","sid":1328},
			{"parent_name":null,"mnu_id":"js6vvc64inpo","is_add":"N","mnu_name":"租户管理","role_id":null,"parent_id":"js6vtxe2c0hi","name":"租户管理","checked":"false","is_leaf":"Y","sid":1329},
			{"parent_name":null,"mnu_id":"jw8w0q21vrrl","is_add":"N","mnu_name":"租户角色管理","role_id":null,"parent_id":"jw8vzsuxfme8","name":"租户角色管理","checked":"false","is_leaf":"Y","sid":1352},
			{"parent_name":null,"mnu_id":"jw8vzsuxfme8","is_add":"N","mnu_name":"租户私有权限","role_id":null,"parent_id":"js6vtxe2c0hi","name":"租户私有权限","checked":"false","is_leaf":"N","sid":1351},
			{"parent_name":null,"mnu_id":"jrerqdum0grz","is_add":"Y","mnu_name":"系统管理","role_id":"jrh5w478zfap","parent_id":"0","name":"系统管理","checked":"true","is_leaf":"N","sid":775},
			{"parent_name":null,"mnu_id":"js5tn7hnqwbi","is_add":"N","mnu_name":"字典表配置","role_id":null,"parent_id":"jrerqdum0grz","name":"字典表配置","checked":"false","is_leaf":"Y","sid":1327},
			{"parent_name":null,"mnu_id":"jwepaz466ndr","is_add":"N","mnu_name":"用户角色关联","role_id":null,"parent_id":"jweal92lb2j1","name":"用户角色关联","checked":"false","is_leaf":"Y","sid":1379},
			{"parent_name":null,"mnu_id":"jrhdg2cv8xxm","is_add":"N","mnu_name":"角色菜单绑定","role_id":null,"parent_id":"jreuu0bd6qva","name":"角色菜单绑定","checked":"false","is_leaf":"Y","sid":786},
			{"parent_name":null,"mnu_id":"jwacj4pfbwsf","is_add":"N","mnu_name":"租户菜单管理","role_id":null,"parent_id":"jw8vzsuxfme8","name":"租户菜单管理","checked":"false","is_leaf":"Y","sid":1353},
			{"parent_name":null,"mnu_id":"jsbetipzoyxg","is_add":"Y","mnu_name":"系统编码维护","role_id":"jrh5w478zfap","parent_id":"jrerqdum0grz","name":"系统编码维护","checked":"true","is_leaf":"Y","sid":1330},
			{"parent_name":null,"mnu_id":"jsmk4tu7djxj","is_add":"N","mnu_name":"系统TAG维护","role_id":null,"parent_id":"jrerqdum0grz","name":"系统TAG维护","checked":"false","is_leaf":"Y","sid":1334},
			{"parent_name":null,"mnu_id":"jsg65i8yiwzk","is_add":"N","mnu_name":"操作日志查看","role_id":null,"parent_id":"jrerqdum0grz","name":"操作日志查看","checked":"false","is_leaf":"Y","sid":1333},
			{"parent_name":null,"mnu_id":"jsfm8nma4npt","is_add":"N","mnu_name":"错误日志跟踪","role_id":null,"parent_id":"jrerqdum0grz","name":"错误日志跟踪","checked":"false","is_leaf":"Y","sid":1332},
			{"parent_name":null,"mnu_id":"jweal92lb2j1","is_add":"N","mnu_name":"用户管理","role_id":null,"parent_id":"jreuu0bd6qva","name":"用户管理","checked":"false","is_leaf":"N","sid":1378}];
		
		$.fn.zTree.destroy("tree-menus");
		$.fn.zTree.init($("#tree-menus"), setting, data);
	}
	
	$(function(){
		$("#tree-menus").height($(window).height() - 100);
		refreshTree()
	})
</script> 
</html>
老马历写记 博客专家
发布了294 篇原创文章 · 获赞 98 · 访问量 77万+
他的留言板 关注

猜你喜欢

转载自blog.csdn.net/chuangxin/article/details/90770476
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022