作者:残城碎梦 围观群众:663 更新于 标签:layuitree组件layui tree 组件bug
最近在写一个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;
},
最后欢迎大家访问我的个人博客网站:zShare个人博客