7.1、樹形表格 · EasyAdmin用戶手冊集合

# 7.1.樹形表格 :id=treeTable treeTable樹形表格已進行了重寫，模塊名是treeTable，舊版模塊名是treetable，不要搞混了， [查看演示](https://whvse.gitee.io/treetable-lay/demo2x/index.html)。 ## 7.1.1.快速使用 :id=start 方法渲染： ```html <table id="demoTb1"></table> <script> layui.use(['treeTable'], function () { var $ = layui.jquery; var treeTable = layui.treeTable; var data = [{ id: '1', name: 'xxx', createTime: '2019/11/18 10:44:00', children: [ { id: '1_1', name: 'xxx', createTime: '2019/11/18 10:44:00' }] }, { id: '2', name: 'xxx', createTime: '2019/11/18 10:44:00', children: [{ id: '2_1', name: 'xxx', state: 0, createTime: '2019/11/18 10:44:00', children: [] }] }]; // 渲染表格 var insTb = treeTable.render({ elem: '#demoTb1', data: data, // 數據 tree: { iconIndex: 1 // 折疊圖標顯示在第幾列 }, cols: [ {type: 'numbers'}, {field: 'id', title: 'ID'}, {field: 'name', title: 'name', width: 160}, {field: 'createTime', title: '創建時間', width: 180} ] }); }); </script> ``` 使用pid形式的數據： ```javascript var data = [{ id: '1', name: 'xxx', createTime: '2019/11/18 10:44:00', }, { pid: '1', id: '1_1', name: 'xxx', createTime: '2019/11/18 10:44:00' },{ id: '2', name: 'xxx', createTime: '2019/11/18 10:44:00', },{ pid: '2', id: '2_1', name: 'xxx', state: 0, createTime: '2019/11/18 10:44:00', children: [] }]; // 渲染表格 var insTb = treeTable.render({ elem: '#demoTb1', data: data, // 數據 tree: { iconIndex: 1, // 折疊圖標顯示在第幾列 isPidData: true // 是否是pid形式數據 }, cols: [ {type: 'numbers'}, {field: 'id', title: 'ID'}, {field: 'name', title: 'name', width: 160}, {field: 'createTime', title: '創建時間', width: 180} ] }); ``` 請求網絡數據、懶加載： ```javascript var insTb = treeTable.render({ elem: '#demoTb1', tree: { iconIndex: 1, // 折疊圖標顯示在第幾列 idName: 'id', // 自定義id字段的名稱 pidName: 'pid', // 自定義標識是否還有子節點的字段名稱 haveChildName: 'haveChild', // 自定義標識是否還有子節點的字段名稱 isPidData: true // 是否是pid形式數據 }, cols: [ {type: 'numbers'}, {field: 'id', title: 'ID'}, {field: 'name', title: 'name', width: 160}, {field: 'createTime', title: '創建時間', width: 180} ], reqData: function(data, callback) { // 在這里寫ajax請求，通過callback方法回調數據 $.get('list.json', function (res) { callback(res.data); // 參數是數組類型 }); } }); ``` !> 用法大部分與數據表格table模塊一致，需要注意：cols是一維數組，不是二維數組。 ## 7.1.2.基礎參數一覽表 :id=options 參數 | 類型 | 說明 | 示例值 :--- | :--- | :--- | :--- elem | String/DOM | 指定原始 table 容器的選擇器或 DOM | '#demo' cols | Array | 設置表頭。值是一維數組 | 詳見表頭參數 data | Array | 直接賦值數據 | [{}, {}, {}, {}, …] width | Number | 設定容器寬度 | 350 height | Number/String | 設定容器高度 | 300 / 'full-150' cellMinWidth | Number | 定義所有單元格的最小寬度 | 100 text | Object | 自定義文本，如空數據提示等 | 詳見自定義文本 skin | String | 設定表格風格 | line行邊框、row列邊框、nob無邊框 even | Boolean | 開啟隔行背景| true/false size | String | 設定表格尺寸 | sm 小尺寸、lg 大尺寸 tree | Object | 設定樹相關參數 | 詳見樹相關參數 style | String | 設定容器的樣式 | 'margin-top: 0;' getThead | Function | 自定義表頭 | 詳見自定義表頭 reqData | Function | 懶加載數據 | 詳見懶加載數據 ## 7.1.3.表頭參數一覽表cols :id=cols 參數 | 類型 | 說明 | 示例值 :--- | :--- | :--- | :--- field | String | 設定字段名 | 'username' title | String | 設定標題名稱 | 用戶名 width | Number | 設定列寬，若不填寫，則自動分配 | 150 minWidth | Number | 單元格的最小寬度 | 100 type | String | 設定列類型 | checkbox復選框、radio單選框、numbers序號列、space空列 edit | String | 單元格編輯類型 | text（輸入框） style | String | 自定義單元格樣式| color: red; align | String | 單元格排列方式 | center居中、right居右 templet | String | 自定義列模板 | 詳見自定義列模板 toolbar | String | 綁定工具條模板 | 詳見行工具事件 > templet和toolbar用法與數據表格table模塊一致 ## 7.1.4.樹相關參數一覽表tree :id=tree 參數 | 類型 | 說明 | 示例值 :--- | :--- | :--- | :--- iconIndex | Number | 圖標列的索引 | 默認0 onlyIconControl | Boolean | 僅允許點擊圖標折疊 | 默認false arrowType | String | 箭頭類型 | 可選'arrow2' getIcon | Function | 自定義樹形圖標 | 詳見自定義樹形圖標 isPidData | Boolean | 是否是pid形式的數據，懶加載方式不需要 | 默認false idName | String | 設定id的字段名 | 默認'id' pidName | String | 設定pid的字段名，children形式數據不需要 | 默認'pid' childName | String | 設定children的字段名，pid形式數據不需要 | 默認'children' haveChildName | String | 設定是否有子集的字段名，用于懶加載 | 默認'haveChild' openName | String | 設定是否默認展開的字段名 | 默認'open' ## 7.1.5.自定義文本text :id=text 目前只支持自定義空數據提示： ```javascript treeTable.render({ text: { none: '<div style="padding: 15px 0;">哎呀，一條數據都沒有~</div>' } }); ``` ## 7.1.6.自定義表頭 :id=tb_head treeTable實現復雜表頭的做法與table模塊不同，方法如下： ```javascript treeTable.render({ getThead: function() { return '<tr><td colspan="6">我是表頭</td></tr>'; } }); ``` 就是這么簡單粗暴，直接返回表頭的html即可，不用在cols里面糾結半天，所以treeTable的cols是一維數組。 ## 7.1.7.自定義樹形圖標 :id=tree_icon 內置了兩種風格圖標，你也可以很靈活的自己擴展風格： ```javascript treeTable.render({ tree: { arrowType: 'arrow2', // 自定義箭頭風格 getIcon: function(d) { // 自定義圖標 // d是當前行的數據 if (d.haveChild) { // 判斷是否有子集 return '<i class="ew-tree-icon ew-tree-icon-folder"></i>'; } else { return '<i class="ew-tree-icon ew-tree-icon-file"></i>'; } } } }); ``` ew-tree-icon-folder(文件夾)和ew-tree-icon-file(文件)這兩個class是treeTable內置的，你可以換成其他clss自己加樣式，ew-tree-icon這個class是必須的。 !> 判斷是否有子集d.haveChild這個寫法根據你的實際情況寫，如果是children形式數據可以寫(d.children&&d.children.length>0) ## 7.1.8.懶加載數據 :id=req_data 實現reqData參數即可實現懶加載數據： ```javascript treeTable.render({ elem: '#demoTable', reqData: function(data, callback) { // data是當前行的數據，通過callback回調子集數據 callback([]); }, tree: { iconIndex: 2, // 折疊圖標顯示在第幾列 idName: 'id', // 自定義id字段的名稱 haveChildName: 'haveChild' // 自定義標識是否還有子節點的字段名稱 } }); ``` 你可以在reqData里面寫ajax請求： ```javascript treeTable.render({ reqData: function(data, callback) { var pid = data?data.id:''; $.get('list.json?pid='+pid, function (res) { callback(res.data); }); } }); ``` json數據參考格式： ```json {"code": 200, "data": [{"id": "1", "name": "xxx", "haveChild": true}]} ``` 通過haveChild標識是否還有子節點，id也是必須的字段，這兩個字段的名字可以在tree參數里面自定義。 !> reqData這個方法里面也可以一次性把所有數據都返回，也可以懶加載。 ## 7.1.9.默認展開 :id=open 通過在數據里面增加open字段來控制是否默認展開： ```javascript var data = [{ id: '1', name: 'xxx', open: true, // 默認展開 children: [ { id: '1_1', name: 'xxx', createTime: '2019/11/18 10:44:00' }] }, { id: '2', name: 'xxx', open: true, // 默認展開 children: [{ id: '2_1', name: 'xxx', state: 0, createTime: '2019/11/18 10:44:00', children: [] }] }]; ``` 字段名字也可以自定義： ```javascript treeTable.render({ tree: { openName: 'open', // 自定義默認展開的字段名 } }); ``` ## 7.1.10.事件監聽 :id=event 監聽工具條點擊事件： ```javascript treeTable.on('tool(test)', function(obj){ var data = obj.data; // 獲得當前行數據 var event = obj.event; // 獲得lay-event對應的值 obj.del(); // 刪除對應行，并更新緩存 // 同步更新緩存對應的值 obj.update({ username: '123', title: 'xxx' }); }); ``` 監聽復選框選擇： ```javascript treeTable.on('checkbox(test)', function(obj){ console.log(obj.checked); // 當前是否選中狀態 console.log(obj.data); // 選中行的相關數據 console.log(obj.type); // 如果觸發的是全選，則為：all，如果觸發的是單選，則為：one }); ``` 監聽單元格編輯： ```javascript treeTable.on('edit(test)', function(obj){ console.log(obj.value); //得到修改后的值 console.log(obj.field); //當前編輯的字段名 console.log(obj.data); //所在行的所有相關數據 }); ``` 監聽行單雙擊事件： ```javascript // 監聽行單擊事件 treeTable.on('row(test)', function(obj){ console.log(obj.tr) //得到當前行元素對象 console.log(obj.data) //得到當前行數據 // obj.del(); // 刪除當前行 // obj.update(fields) // 修改當前行數據 }); // 監聽行雙擊事件 treeTable.on('rowDouble(test)', function(obj){ // obj 同上 }); ``` 監聽單元格單雙擊事件： ```javascript // 監聽行單擊事件 treeTable.on('cell(test)', function(obj){ console.log(obj.field); //當前單元格的字段名 console.log(obj.data) // 得到當前行數據 }); // 監聽行雙擊事件 treeTable.on('cellDouble(test)', function(obj){ // obj 同上 }); ``` ## 7.1.11.其他方法 :id=other ```javascript // pid形式數據轉children形式數據 treeTable.pidToChildren(data, idName, pidName, childName); ``` ## 7.1.12.實例方法 :id=method ```javascript var insTb = treeTable.render({ }); // 刷新 insTb.reload(options); // 重載表格 insTb.refresh(); // 刷新(異步模式) insTb.refresh(id); // 刷新指定節點下的數據 insTb.refresh(id, data); // 刷新指定節點下的數據為data // 復選框 insTb.checkStatus(); // 獲取選中數據 insTb.setChecked(['1','2']); // 設置選中數據 insTb.removeAllChecked(); // 移除全部選中 // 折疊/展開 insTb.expand(id); // 展開指定節點 insTb.fold(id); // 折疊指定節點 insTb.expandAll(); // 展開全部 insTb.foldAll(); // 折疊全部 // 搜索 insTb.filterData('keywords'); // 根據關鍵字模糊搜索 insTb.filterData(['1','2']); // 根據id搜索 insTb.clearFilter(); // 清除搜索 // 更新數據(只更新數據，不更新界面) insTb.del(id); // 根據id刪除 insTb.update(id, fields); // 根據id更新 ```