LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中，目前最新版本为v2.5.5
官方树形组件目前还不支持懒加载方式，之前我修改一版是通过reload重载实例方法填充子节点数据方式，因为递归页面元素时存在效率问题，最终放弃升级。
本次重新star了官方最新tree.js源码，在其基础上扩展了子节点懒加载模式方法，data数据参数中增加了lazy: true，开启懒加载模式，需要配合spread事件使用。
使用方法
// 1.替换Layui中的tree.js
下载地址：tree.js
// 2.在需要开启开启懒加载的父节点添加上【lazy: true】属性
data = [{id:1, title: '江西',lazy: true},{id:2,title: '广西',lazy: true}// 3.在回调函数中添加上【spread】var zh = tree.render({elem: '#test',data: data,id: 'test',spread: function (obj) {
if(obj.state=='open'){
setTimeout(() => {
tree.lazytree(zh.config.id, obj.elem, getTreeJson(obj.data.id));
}, 2000);
}
});
参考如下博客：
正文到此结束
- 本文标签： JavaScript
- 版权声明： 本站原创文章，于2021年05月19日由赵恒发布，转载请注明出处
相关文章
该篇文章的评论功能已被站长关闭