在layui中使用treetable.js插件

问题描述：

有时候我们需要在表格中显示一些层级关系，treetable.js是 jQuery的一款动态树形表格插件，可以很好的解决不能在表格中显示层级关系的问题。

 

解决方法：

1、下载treetable.js插件。

https://gitee.com/whvse/treetable-lay.git

2、由于我们只用得到treetable.js和treetable.css这两个文件，所以我们要从下载的文件中找到这两个文件，然后新建 treetable-lay文件夹 用于存放这两个文件。如果是springboot项目，需将treetable-lay文件夹放在static文件夹下。

resource
　　　　|
　　　　|__static    
　　　　　　　    |
    　　　　　　　|__treetable-lay
　　　　　　　　　　　　　　        |
　　　　　　　　　　　　　　        |__treetable.js
 　　　　　　　　　　　　　　       |
    　　　　　　　　　　　　　　    |__treetable.css

3、在layui中使用treetable.js

<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>

<div class="menu-table">
    <table class="layui-table" id="menuTable" lay-filter="menuTable"></table>
</div>

<script>

    // 存放拓展模块的根目录
    layui.config({base: '/resource/static'})
    // 继承treetable.js插件
    .extend({treetable: 'treetable-lay/treetable'})
    .use([ 'treetable','jquery'], function (){
　　 var $ =layui.jquery;
    var treetable = layui.treetable;
    /*从后端获取数据，注意：获取到的数据字段需要和treetable中的cols字段相同*/
    $.ajax({
           url: page,
           data:{"name":value},
           success: function(res){
              renderTable(res.data);
           }
    });

    /*初始化表格：treeIdName对应的是后端的id字段，treePidName对应的是后端的pid字段*/
    var renderTable = function(data) {
            // 渲染表格
            treetable.render({            
            data: data,  // 后台数据
            treeColIndex: 1, // 树形图标显示在第几列
            treeSpid: 0, // 最上级的父级id
            treeIdName: 'id', // id字段的名称
            treePidName: 'pid', // pid字段的名称
            treeDefaultClose: false, // 是否默认折叠
            treeLinkage: false, // 父级展开时是否自动展开所有子级
            elem: '#menuTable', // 表格id
            page: false, // 树形表格一般是没有分页的
            cols: [
               [
                   {type: 'numbers'},
                   {field: 'name', title: '菜单名称'},
                   {field: 'url', title: 'url'},
                   {field: 'method', title: '请求方式'},
                   {field: 'pidName', title: '父级名称'},
                   {field: 'orderNum', title: '排序'},
                   {field: 'perms', title: '资源标识'},
                   {field: 'code', title: '前后端分离按钮控制标识'},
                   {title:'操作',180}
               ]
           ]
       });
   };
</script>