原创 2021-04-17 17:19:10

 

描述
最近在写一个Java项目,因为用的是Layui框架,在做权限的时候用到了layui的tree组件,结果在回显的时候发现明明只选中了一个子集,但是却把所有的子集菜单都实例成了选中状态。效果如下图所示
勾选效果

回显效果


原因分析
在网上寻找很长时间,最终没有找到自己想要的解决办法。分析源码发现了问题所在,大体流程是选中了子树,代码中会勾选该子树的父级元素。而选择了父级元素程序中回将该树的全部子集元素置于选中状态。问题也就这样产生了。

解决思路
1.打破这种关联,让选中父级元素的时候可以控制是否关联子集元素。
在tree.js中全局搜索以下代码(压缩过的子集格式化下代码),加上如下判断

 

b.prototype.setCheckbox = function(e, i, a)

 

实例化tree的时候,多添加一个配置项checkChirld

 

 tree.render({
           elem: '#permissionTree'
           ,checkChirld:false //是否关联子集菜单
           ,data: [[${tree}]]
           ,showCheckbox: true  //是否显示复选框
           ,id: 'treeId'
           ,isJump: false //是否允许点击节点时弹出新窗口跳转
           ,showLine: false
       });

 


这样改动完数据回显的问题解决了。但是想要勾选子集菜单只能一个一个去点,不能通过勾选父级菜单来全选子集了(解决回显问题的延伸问题)
2.我发现只要在显示的时候不让他关联子集选中状态。执行完一次就让他可以关联子集选中状态。这就是我想要的了。
在tree.js中 在render方法的最后将checkChirld改为true。实例化的时候不关联子集。执行完实例化,关联子集菜单。

b.prototype.render = function() {
               var e = this,
                   a = e.config;
               e.checkids = [];
               var n = i('<div class="layui-tree' + (a.showCheckbox ? " layui-form": "") + (a.showLine ? " layui-tree-line": "") + '" lay-filter="LAY-tree-' + e.index + '"></div>');
               e.tree(n);
               var t = a.elem = i(a.elem);
               if (t[0]) {
                   if (e.key = a.id || e.index, e.elem = n, e.elemNone = i('<div class="layui-tree-emptyText">' + a.text.none + "</div>"), t.html(e.elem), 0 == e.elem.find(".layui-tree-set").length) return e.elem.append(e.elemNone);
                   a.showCheckbox && e.renderForm("checkbox"),
                       e.elem.find(".layui-tree-set").each(function() {
                           var e = i(this);
                           e.parent(".layui-tree-pack")[0] || e.addClass("layui-tree-setHide"),
                           !e.next()[0] && e.parents(".layui-tree-pack").eq(1).hasClass("layui-tree-lineExtend") && e.addClass(k),
                           e.next()[0] || e.parents(".layui-tree-set").eq(0).next()[0] || e.addClass(k)
                       }),
                       e.events()
               }
               this.config.checkChirld = true;
           },
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

延伸阅读
  1. position为fixed时设置z-index失效问题(从父原则)
发表评论
  • zhao
    可以昂