Layui实现TreeTable(树形数据表格)

参考
Layui实现TreeTable(树形数据表格)
LayUI树形表格treetable使用详解
gitee：ele-admin / treetable-lay

文中涉及的treetable.js、页面代码都可以在这下载gitee代码下载，直接zip下载即可

开发背景

在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。

优化结果：
原页面

treetable实现的页面

实现

下载引入treetable.js

我用的版本是没有css，只有一个treetable.js，引入可以参考 LayUI树形表格treetable使用详解开篇讲的方式。

使用

HTML页面主要代码

 <!-- 数据表格 -->
<table class="layui-table" id="menus-table" lay-filter="menus-table"></table>
 <!-- 表格操作列 -->
 <script type="text/html" id="menusState">
     <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
 </script>

js

// 渲染表格
    var treemenu = {
    
    
        reload: function () {
    
    
            treetable.render({
    
    
                elem: '#menus-table',
                url: serviceBase + '/service/menuWork/list',
                // toolbar: 'default',
                height: 'full-200',
                method:'get',
                where: {
    
    
                    name: $("#name").val()
                },
                tree: {
    
    
                    iconIndex: 2,
                    isPidData: true,
                    idName: 'code',//父ID
                    pidName: 'parentCode',//子ID
                    openName: 'open',// 是否默认展开的字段名
                    //public bool open { get; set; }open字段是bool类型
                },
                // defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    {
    
    type: 'numbers'},
                    {
    
    field: 'code', title: '菜单代码', width: 100},
                    {
    
    field: 'name', title: '名称', width: 250},
                    {
    
    field: 'description', title: '描述', width: 200},
                    {
    
    field: 'url', title: '菜单路由'},
                    {
    
    field: 'perCode', title: '权限代码'},
                    {
    
    field: 'icon', title: '图标', align: 'center', width: 100,
                        templet:'<div><i class="layui-icon {
    
    {d.icon}}"></i></div>'
                    },
                    {
    
    field: 'seqNo', title: '顺序号', align: 'center', width: 110},
                    {
    
    field: 'createTime', title: '创建时间', align: 'center', width: 200},
                    {
    
    toolbar: '#menusState', width: 120, align: 'center', title: '操作'}
                ]],
                style: 'margin-top:0;'

            });
            treetable.on('tool(menus-table)', function (obj) {
    
    
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'detail') {
    
    
                    layer.open({
    
    
                        type: 2, //type2表示打开iframe层
                        title: ['详情'],  //false表示不显示标题
                        area: ['800px', '600px'],
                        shade: 0.1, //是否显示遮罩层
                        // shadeClose: true, //是否点击遮罩关闭
                        id: "detail",  //设置id防止重复弹出
                        moveType: 0, //拖拽模式0或者1
                        content: kiteBase + "page/configure/menu_detail.html?" + $.param({
    
    
                            code: data.code,
                            icon: data.icon,
                        })
                    });
                } else if (layEvent === 'edit') {
    
    
                    layer.open({
    
    
                        type: 2, //type2表示打开iframe层
                        title: ['新增配置'],  //false表示不显示标题
                        area: ['800px', '700px'],
                        shade: 0.1, //是否显示遮罩层
                        // shadeClose: true, //是否点击遮罩关闭
                        id: "edit1",  //设置id防止重复弹出
                        moveType: 0, //拖拽模式0或者1
                        content: kiteBase + "page/configure/menu_edit.html?" + $.param({
    
    
                            code: data.code,
                            icon: data.icon,
                        })
                    });
                }
            });
            form.render();
        }

    }
    
layui.use(['layer', 'form', 'table', 'element', 'treeTable'], function () {
    
    
        var $ = layui.$;
        form = layui.form;
        layer = layui.layer;
        element = layui.element;
        menuPerTable = layui.table;
        treetable = layui.treeTable;

        treemenu.reload();
        menuPer.reload();

    })

接口请求的数据为：

注意点： treetable.js中需要修改相应的代码，下面是修改后跟我上面接口返回的type一致，原代码用的code去判断请求是否成功，数据用的是data，所以如果你数据用的是其它字段，这边的data也要改成你相应的字段

上面js部分代码主要改的就下面两个，改成和你自己的数据一致

idName: 'code',//父ID
pidName: 'parentCode',//子ID