LAYUI 树形表格（tree table）

属性表格，主要是引入了下面的JS，文档里面也很详细
下载地址：https://gitee.com/whvse/treetable-lay
案例地址：https://whvse.gitee.io/treetable-lay/demo/
文档地址：https://gitee.com/whvse/treetable-lay/wikis/pages

先上一张效果图吧

下面贴一下代码：

// 记得引入LAYUI
layui.config({
    // treeTable.js 的根目录
    base: '__ADMIN__/js/'
}).use(['layer', 'util', 'form', 'treeTable'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var util = layui.util;
    var form = layui.form;
    var treeTable = layui.treeTable;
    $('body').removeClass('layui-hide');
    // 渲染表格
    treeTable.render({
        // table的ID
        elem: '#layui_table',
        // 是否显示工具栏
        toolbar: false,
        // 容器高度
        height: 'full-200',
        tree: {
            // 展开和合并的图标在哪一列
            iconIndex: 0,
            // 是否是pid形式的数据，懒加载方式不需要
            isPidData: true,
            idName: 'id',
            pidName: 'parentId',
            // 图标设置
            getIcon: ''
        },
        // 表头设置
        cols: [[
            { field: 'list_name', title: '列表名称', minWidth: 165 },
            { field: 'list_level', title: '列表等级' },
            { field: 'sort', title: '排序', width: 110, align: 'center' },
            { align: 'center', toolbar: '#displayBar', title: '显示', width: 110 },
            { align: 'center', toolbar: '#tbBar', title: '操作', width: 230 }
        ]
        ],
        reqData: function (data, callback) {  // 懒加载也可以用url方式，这里用reqData方式演示
            var url = '请求的地址';
            $.get(url, function (res) {
                callback(res.data);
            });
        },
        style: 'margin-top:15px;'
    });
})