[分享]html+js实现异步加载树形表格

当我们的树形数据过多时，这时候就会出现数据加载过慢的问题，这里我们就来了解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 //是否为父级
    }
]

如何就可以实现异步加载树形表格数据