700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > ztree autoCheckTrigger=true时 子节点复选框选中 导致父节点onCheck触发多次问题处理

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

时间:2022-11-21 18:20:00

相关推荐

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="/zTree.v3/3.5.23/css/metroStyle/metroStyle.min.css"><link rel="stylesheet" href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /><link rel="stylesheet" href="/font-awesome/4.5.0/css/font-awesome.min.css" /><script src="/jquery/1.11.1/jquery.min.js"></script><script src="/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。