Layui 之TreeTable(树形数据表格)，适用于权限、部门等

TreeTable.js下载

链接：​​https://pan.baidu.com/s/1lLBge_4MSSViLztwTnPfkA ​​提取码：whj3

一、效果图

二、前端代码

{include file='common/header'}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card layui-form">
                <div class="layui-card-header">{:__('Query conditions')}</div>
                <div class="layui-card-body layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-btn-group demoTable">
                            {if $check->checkPrivilege('department/add')}<button class="layui-btn " data-type="add">
                            <i class="layui-icon layui-icon-addition"></i>{:__('Add')}
                        </button>{/if}
                            {if $check->checkPrivilege('department/delete_op')} <button class="layui-btn layui-btn-danger" data-type="delAll"><i
                                class="layui-icon layui-icon-delete"></i>{:__('Delete all')}
                        </button>{/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card layui-form">
                <div class="layui-card-body">
                    <table class="layui-hide" id="app" lay-filter="app"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="operate">
    {if $check->checkPrivilege('department/child')}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="child">{:__('Add child')}</a>{/if}
    {if $check->checkPrivilege('department/edit')}<a class="layui-btn layui-btn-xs" lay-event="edit">{:__('Edit')}</a>{/if}
    {if $check->checkPrivilege('department/delete_op')}<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">{:__('Delete')}</a>{/if}
</script>
{include file='common/footer'}
<script>
    layui.config({
        base : '/static/admin/layui/lay/modules/'
    }).extend({
        treeTable : 'treeTable'
    });
    var table = null;
    layui.use(['treeTable', 'form'], function () {
        table = layui.treeTable;
        table.render({
            id: "app",
            elem: '#app',
            url: "{:url('department/lst')}",
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'id',//父ID
                pidName: 'parent_id',//子ID
                openName: 'open',// 是否默认展开的字段名
                //public bool open { get; set; }open字段是bool类型
            },
            cols: [[
                {field: 'id', title: 'ID', width: 100}
                , {
                    field: 'name', title: "{:__('Department name')}"
                }
                , {field: 'update_entered', title: "{:__('Update time')}"}
                , {field: 'date_entered', title: "{:__('Create time')}"}
                , {fixed: 'right', title: "{:__('Operate')}", toolbar: '#operate', width: 180}
            ]],
            page: false,
            cellMinWidth: 80,
            // toolbar: '#toolbar',
            // defaultToolbar: ['filter', 'exports', 'print']
        });
        table.on('tool(app)', function (obj) {
            let data = obj.data, id = data.id;
            switch (obj.event) {
                case 'child':
                    layer.open({
                        type: 2,
                        title: "{:__('Add %s', __('App name'))}",
                        area: ["600px", "400px"],
                        content: "{:url('department/add')}?id="+id,
                        maxmin: true,
                    });
                    break;
                case 'edit':
                    layer.open({
                        type: 2,
                        title: "{:__('Edit %s', __('App name'))}",
                        area: ["600px", "400px"],
                        content: "{:url('department/edit')}?id="+id,
                        maxmin: true,
                    });
                    break;
                case 'delete':
                    delete_op(id, "{:__('Are you sure you want to delete this item?')}");
                    break;
            }
        });

        var active = {
            add: function () {
                layer.open({
                    type: 2,
                    title: "{:__('Add %s', __('App name'))}",
                    area: ["600px", "550px"],
                    content: "{:url('department/add')}",
                    maxmin: true,
                });
            },
            delAll: function () {
                var checkStatus = table.checkStatus('app'),
                    data = checkStatus.data, ids="";

                if (data.length == 0) {
                    layer.msg("{:__('Please select the item to delete')}", {
                        icon: 5,
                        shift: 6
                    });
                    return false;
                }
                for (let i = 0; i < data.length; i++) {
                    if (i == data.length - 1) {
                        ids += data[i].id;
                    }else {
                        ids += data[i].id + ",";
                    }
                }
                delete_op(ids, "{:__('Are you sure you want to delete this item?')}");
            }
        };

        $('.layui-btn').on('click', function() {
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });

        function delete_op(id, msg) {
            layer.confirm(msg, function (index) {
                $.ajax({
                    url: "{:url('department/delete_op')}",
                    data: {id: id},
                    type: "post",
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                icon: 1
                            });
                            location.reload(true);
                        } else {
                            layer.msg(data.msg, {
                                icon: 5,
                                shift: 6
                            });
                        }
                        layer.close(index);
                    }
                });
                layer.close(index);
            });
        }
    });
</script>

三、后台数据

{
    "code": 0,
    "msg": "获取成功",
    "time": 1659322274,
    "data": [{
        "id": 1,
        "name": "test",
        "parent_id": 0,
        "date_entered": null,
        "update_entered": null,
        "open": true
    }, {
        "id": 2,
        "name": "h",
        "parent_id": 1,
        "date_entered": null,
        "update_entered": null,
        "open": true
    }, {
        "id": 3,
        "name": "222",
        "parent_id": 1,
        "date_entered": null,
        "update_entered": null,
        "open": true
    }, {
        "id": 4,
        "name": "哈哈",
        "parent_id": 0,
        "date_entered": "2022-08-01 10:28:38",
        "update_entered": "2022-08-01 10:28:38",
        "open": true
    }, {
        "id": 5,
        "name": "好",
        "parent_id": 4,
        "date_entered": "2022-08-01 10:28:53",
        "update_entered": "2022-08-01 10:35:19",
        "open": true
    }],
    "count": 5
}