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

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>

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

php ajax复选框是否选中的值,jquery-ajax - php+ajax分页时，checkbox复选框选中的问题...
目的:所有的数据实现分页显示,不是查询所有的数据,而是每次取固定的条数.而且在每页选中的数据ID都可以保存,一起提交选中的数据,做相应的操作.比如第一页选中2条,第二页选中3条,提交时是5条,如果返回 ...
设置复选框选中及其使用
设置复选框选中及其使用开发工具与关键技术:VS .MVC 撰写时间:2019/7/26 有一些需要就在你触发某个按钮的时候,单选框或者复选框就是一个选中的状态,并且要记录这个状态的时候:页面的复选框 ...
EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例效果展示未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
GridView既强大又好用.为了让它更强大.更好用,我们来写一个继承自GridView的控件. [索引页] [×××] 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式作者:w ...
jQuery复选框选中状态更改事件
本文翻译自:jQuery checkbox checked state changed event I want an event to fire client side when a checkbo ...
java复选框只会选中一个_java复选框选中
java swing中在jTable中添加多个复选框的方式如下: import java.awt.Component; import java.awt.event.ActionEvent; impor ...
支付宝小程序获取复选框选中值id，使其显示且可编辑
问题概述在做支付宝小程序编辑表单时,需要将用户之前填.选的信息显示出来后再编辑.这里针对复选框选中值的获取显示,通过服务端发送请求后拿到的选中id,显示选中值并且可编辑. axml代码片段 < ...
html清空复选框的值,html，删除复选框选中的内容
首先是选中复选框,可以自己单击一个个的选,这个就不用多说了吧!也可以批量操作,如用全选按钮,主要是设置复选框的.checked值.可以通过调用javascript函数来实现. 方法如下: 复选框的定义 ...
js怎么获取复选框选中的值
本篇文章主要给大家介绍js获取复选框选中的值的实现方法. js获取复选框选中的值的方法实现,对于新手小白来说可能有一定的难度. 下面我们就结合具体的代码示例为大家详细介绍js实现获取复选框中选中的值的 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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