Layui 版本
v2.5.6
还原被压缩的JS地址 .
问题描述
在做权限管理时用了layui tree 组件,编辑功能回显出现问题:只要父级被选中那么子级同样也会被选中
如下图所示,本来保存数据的时候只勾中了父级下的某个子级,但是在编辑的时候回显数据就会被全选
新增时选中的节点
编辑时选中的节点
解决方案1
参考解决方案地址1 .
参考解决方案地址2 .
1.HTML代码
<div class="treebox">
<div id="tree" class="demo-tree demo-tree-box"></div>
</div>
2.渲染树形JS代码,checkChild:false代表当父级被选中子级不会被全选中
function funInitMenuTree(result) {
tree.render({
elem: '#tree' ,
data: result,
showLine : true,
showCheckbox: true,
id: 'id',
checkChild:false
});
}
3.找到b.prototype.config这行代码,加上参数checkChild
//默认配置
b.prototype.config = {
data: [],//数据
showCheckbox: !1,//是否显示复选框
showLine: !0,//是否开启连接线
accordion: !1,//是否开启手风琴模式
onlyIconControl: !1,//是否仅允许节点左侧图标控制展开收缩
isJump: !1,//是否允许点击节点时弹出新窗口跳转
edit: !1,//是否开启节点的操作图标
checkChild:1,
text: {
defaultNodeName: "未命名",//节点默认名称
none: "无数据"//数据为空时的文本提示
}
}
4.找到b.prototype.setCheckbox = function(e, i, a)这行代码 ,修改成下面这样
if ("object" == typeof i.children || e.find("." + v)[0]) {
var r = e.find("." + v).find('input[same="layuiTreeCheck"]');
if(this.config.checkChild){//同步子节点选中状态
r.each(function() {
this.disabled || (this.checked = t)
});
}else{
if(!t){
r.each(function() {
this.disabled || (this.checked = t)
});
}
}
}
5,修改完了之后重新运行代码查看效果,编辑时选中的节点都是正常的
备注:修改后没有全选功能
在这里插入图片描述
解决方案2
解决方案1还是存在缺陷,全选功能没有了,一般来说全选功能还是要存在的
1.HTML代码
<div class="treebox">
<div id="tree" class="demo-tree demo-tree-box"></div>
</div>
2.渲染树形JS代码,默认初始化页面时去掉全选功能,初始化页面完成后恢复全选功能
function funInitMenuTree(result) {
localStorage.setItem('checkChild',"false");//初始化去掉全选功能
tree.render({
elem: '#tree' ,
data: result,
showLine : true,
showCheckbox: true,
id: 'id'
});
localStorage.setItem('checkChild',"true");//初始化页面完成后恢复全选功能
}
3.找到b.prototype.checkClick = function(e, a)这行代码 ,修改成下面这样
b.prototype.checkClick = function(e, a) {
var n = this,
t = n.config,
r = e.children("." + p),
l = r.children("." + f);
l.on("click", 'input[same="layuiTreeCheck"]+', function(r) {
layui.stope(r);
var l = i(this).prev();
var c = l.prop("checked");
if(localStorage.getItem('checkChild')=="false"){//初始化页面
l.prop("disabled") || (t.oncheck && t.oncheck({
elem: e,
checked: c,
data: a
}));
}else{//点击复选框
l.prop("disabled") || (n.setCheckbox(e, a, l), t.oncheck && t.oncheck({
elem: e,
checked: c,
data: a
}));
}
});
}
4,修改完了之后重新运行代码查看效果