之前已经了解了html+js实现树形表格:https://segmentfault.com/a/1190000045104719,但是当我们的树形数据过多时,这时候就会出现数据加载过慢的问题,这里我们就来了解html+js实现树形表格异步加载
一:参考文档
官方文档:https://layui.dev/docs/2/index.html
github:https://github.com/layui/layui/
二:实例
1:前提
<link href="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.14/css/layui.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.14/layui.js"></script>
2:html
<table id="table" class="layui-table" lay-filter="table"></table>
3:css
/* 节点未展开的样式 */
.layui-icon-folder:before {
content: "";
}
/* 節點展開時的圖標 */
.layui-icon-folder-open:before {
content: "";
}
/* 子節點的圖標 */
.layui-icon-leaf:before {
content: "";
}
4:js
layui.use(function(){
var treeTable = layui.treeTable;
// 渲染
treeTable.render({
elem: '#table',
id: 'table', // 自定义 id 索引
url: 'XXX', // 数据请求地址
tree: {
// 异步加载子节点
async: {
enable: true,
url: 'XXX', // 数据请求地址,返回对应父级的子级数据,接口会对应传递parent_id参数
autoParam: ["parent_id=id"]
}
},
maxHeight: '501px',
toolbar: false,
cols: [
[
{field: 'name', width:"60%",align:'left' , title: '角色名称'}, //filed:json数据的key
{field: 'status', width:"15%", align:'center', title: '状态',templet: function(d){
return d.status; // 直接返回HTML字段,不进行转义
}},
{field: 'operation',align:'center', title: '操作',templet: function(d){
return d.operation; // 直接返回HTML字段,不进行转义
}}
]
],
page: false,
done: function(res,curr, count) {
//自动获取二级树形数据并自动展开
treeTable.expandNode('table', {
index: 0, // 第一行
expandFlag: true // 展开
});
}
});
});
5:表格数据结构
(1):顶级数据
[
{
"id": "1",
"parent_id": "0",
"name": "项目部",
"status": '启用',
'operation': '<a href="" >编辑</a>',
'isParent': true //是否为父级
},
]
(2):子级数据
[
{
"id": "2",
"parent_id": "1",
"name": "技术部",
"status": '启用',
'operation': '<a href="" >编辑</a>',
'isParent': true //是否为父级
},
{
"id": "3",
"parent_id": "1",
"name": "产品部",
"status": '启用',
'operation': '<a href="" >编辑</a>',
'isParent': true //是否为父级
}
]
如何就可以实现异步加载树形表格数据
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。