在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:'操作',width:180}
               ]
           ]
       });
   };
</script>