18910140161

layui的tree回显bug怎么解决

2022-12-09 06:20:11

231

layui的tree组件,大家在使用的时候总会碰到一个可以算是bug的小问题,今天在开发的时候我也遇到了,百度了几个小时,发现基本上从前端解决这个问题不太可能了,除非使用layui第三方组件,其实第三方组件我了基本上都试了,有些好复杂,都没有官方的漂亮,而且赋值的思路也很清奇,有点可笑,那么既然前端不好解决,怎么处理呢?

后来看到了几篇从后端处理的解决思路,觉得基本上可行,文章开头为啥说算是bug的小问题呢,这里我觉得贤心大佬也想到过这个问题所以在回显的时候父级和自己做了一个关联,这也是更优解了,不然你选完子项了,还需要在选择父级,这逻辑也很难受,好了 说说我的解决思路吧,

步:后端返回来的数据每一个数据后面加一个字段比如 hasChild:true/false 意思就是如果这个数据下面还有子类那么就是true反之就是false,

第二部,前端继续处理,前端通过js循环,当前数据的id如果在所选的数组里并且hasChild等于false才给它 checked=true 属性。

总结一下就是 后端给一个是不是最终子数据的标签 hasChild 然后前端 在通过 已选中数据和是不是最终数据两个维度 给数据 checked 属性, 这样处理完的数据, 只有最终层级的数据才会被加上checked 属性 而它的父级就不会有这个checked 属性, 这样渲染的时候 tree 组件就会默认渲染 父级和所选子集,这样就完美的解决了这个问题

最后在贴下前端处理checked的代码吧,后端就自己处理吧。


// data 是请求来的数据
// rules 是已经选择的id数组
function ergodic(data, rules) {
$.each(data, function (index, item) {
let isIn = isInArray(rules, item.id);
if (isIn >= 0 && item['hasChild'] == false) item['checked'] = 
true
if ($.isArray(item.children)) ergodic(item.children, rules);
});
return data;
}
// 这个方法是判断当前数据的id 在不在已选择的id数组里面
function isInArray(arr, value) {
return $.inArray(value.toString(), arr);
}

这样处理完的数据直接用tree.render 直接渲染就可以了


相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航