7.3、表格擴展tableX · EasyAdmin用戶手冊集合

## 7.3.1.全部方法 :id=method 方法 | 參數 | 描述 :--- | :--- | :--- merges(tableId, indexs, fields) | 見單獨說明 | 合并單元格 bindCtxMenu(tableId, items) | 見單獨說明 | 給表格行綁定鼠標右鍵 render(object) | 同layui表格 | 渲染表格，帶后端排序功能 renderFront(object) | 同layui表格 | 渲染表格，前端分頁、排序、搜索 exportData(object) | 見單獨說明 | 導出任意數據為excel | loadUrl(object, callback) | 見單獨說明 | 請求表格數據 parseTbData(cols, dataList, overwrite) | 見單獨說明 | 獲取解析templet后數據 filterData(dataList, searchName, searchValue) | 見單獨說明 | 前端搜索數據查看[在線演示](https://demo.easyweb.vip/iframe/page/plugin/advance/tableX.html) ## 7.3.2.合并單元格 :id=merge ```javascript layui.use(['tableX'], function () { var tableX = layui.tableX; table.render({ elem: '#xTable2', url: '../../json/tablex1.json', cols: [[ {type: 'numbers'}, {field: 'parentName', title: '模塊名稱', sort: true}, {field: 'authorityName', title: '菜單名稱', sort: true} ]], done: function () { tableX.merges('xTable2', [1]); // 在done回調里面調用 } }); }); ``` 參數說明： ```javascript tableX.merges('xTable2', [1]); // 合并第2列相同的單元格 tableX.merges('xTable2', [1], ['parentName']); // 合并第2列相同的單元格 tableX.merges('xTable2', [1, 2]); // 合并第2、3列相同的單元格 tableX.merges('xTable2', [1, 2], ['parentName', 'authorityName']); // 合并第2、3列相同的單元格 tableX.merges('xTable2', [1, 2], false); // 在后面加一個false可解決排序沖突的問題 ``` - 參數一 &emsp; 必填 &emsp;&emsp; 表格的lay-filter - 參數二 &emsp; 必填 &emsp;&emsp; 要合并列的索引，數組類型 - 參數三 &emsp; 非必填 &emsp; 根據數據字段判斷是否相同，為空時根據單元格的html內容判斷 ## 7.3.3.行綁定鼠標右鍵 :id=ctx ```javascript table.render({ elem: '#xTable3', url: '../../json/user.json', cols: [[ {field: 'nickName', title: '用戶名', sort: true}, {field: 'sex', title: '性別', sort: true} ]], done: function () { // 在done回調里面綁定 tableX.bindCtxMenu('xTable3', [{ icon: 'layui-icon layui-icon-edit', name: '修改此用戶', click: function (d) { layer.msg('點擊了修改，userId：' + d.userId); } }, { icon: 'layui-icon layui-icon-close text-danger', name: '<span class="text-danger">刪除此用戶</span>', click: function (d) { layer.msg('點擊了刪除，userId：' + d.userId); } }]); } }); ``` - 參數一 &emsp; 表格的lay-filter - 參數二 &emsp; 右鍵菜單 - icon &emsp;   圖標 - name &emsp; 標題 - click &emsp;   點擊事件，d是當前行的數據 ## 7.3.4.后端排序 :id=render ```javascript tableX.render({ elem: '#xTable3', url: '../../json/user.json', cols: [[ {type: 'numbers'}, {field: 'nickName', title: '用戶名', sort: true}, {field: 'sex', title: '性別', sort: true} ]] }); ``` &emsp;僅僅是把`table.render`換成`tableX.render`就會在點擊排序時自動傳遞`sort`和`order`參數，例如：user?page=1&limit=10&sort=sex&order=asc。 - sort &emsp;   排序字段，值是點擊排序列的field - order &emsp; 排序方式，升序是asc，降序是desc > 注意：如果寫了sort: true開啟排序，一定要寫field: 'xxx'。 ## 7.3.5.前端分頁排序 :id=render_f ```javascript tableX.renderFront({ elem: '#xTable1', url: '../../json/userAll.json', page: { groups: 6 }, cols: [[ {type: 'checkbox'}, {field: 'nickName', title: '用戶名', sort: true}, {field: 'sex', title: '性別', sort: true} ]] }); ``` &emsp;僅僅是把`table.render`換成`tableX.renderFront`就可以有前端分頁和排序功能了，參數跟layui表格的參數一摸一樣，url方式你的接口可以返回全部數據，前端來分頁，也支持data方式。 **前端模糊搜索：** ```html <input tb-search="xTable1" class="layui-input icon-search" type="text"/> ``` &emsp;頁面中加入上面的輸入框，通過`tb-search`關聯表格，就實現了對表格的模糊搜索功能，你可以對該input加任意樣式，放在任意位置。 &emsp;還可以增加name屬性來設置搜索時只搜索某些字段，多個字段通過逗號分隔： ```html <input tb-search="xTable1" name="sex,phone" class="layui-input icon-search" type="text"/> ``` **刷新功能：** ```html  <button tb-refresh="xTable1" class="layui-btn">刷新</button> ``` &emsp;也可以通過js刷新： ```javascript var insTb = tableX.renderFront('.....省略'); insTb.reloadUrl(); // url方式刷新 insTb.reloadData({data: dataList, page: {curr: 1}}); // data方式的刷新 ``` > 注意：url方式的前端分頁使用reloadUrl()方法，reloadUrl()方法暫時不支持加參數，reloadData方法跟table.reload()方法參數一致。 **前端排序：** &emsp;前端排序如果有field字段，會根據field字段的值來排序，如果沒有field有templet會根據templet轉換后的值排序， templet可能會返回表單元素，比如switch開關等，這些元素根本無法用來排序，那么可以通過`export-show`和`export-hide`這兩個東西來控制。 ```html  <script type="text/html" id="tableState"> <input type="checkbox" lay-skin="switch" lay-text="正常|鎖定" lay-filter="ckState" value="{{d.userId}}" {{d.state==0?'checked':''}}/> <div class="export-show">{{d.state==0?'正常':'鎖定'}}</div> </script>  <script type="text/html" id="tableState"> <div class="export-hide">{{d.state==0?'<i class="layui-icon layui-icon-ok"></i>':'<i class="layui-icon layui-icon-close"></i>'}}</div> <div class="export-show">{{d.state==0?'正常':'鎖定'}}</div> </script>  ``` - `export-hide`用于表格展示，但是對排序和導出時屏蔽 - `export-show`用于排序和導出功能獲取單元格數據，但是對表格展示時屏蔽 > 排序建議最好是通過field來根據數據的字段排序，field不支持d.xxx.xxx這種嵌套的對象，就需要用上面的方法 ## 7.3.6.導出數據 :id=export ```javascript tableX.exportData({ cols: insTb.config.cols, // 表頭配置 data: table.cache.xTable3, // 數據，支持url方式 fileName: '用戶表' // 文件名稱 }); ``` 參數 | 必填 | 說明 | 默認 :--- | :--- | :--- | :--- cols | 是 | 表頭配置 | data | 是 | 導出的數據，支持數組和string的url | fileName | 否 | 導出的文件名稱 | table expType | 否 | 導出的文件類型 | xls option | 否 | url方式的配置 | &emsp;如果data是string類型會把data當url請求數據，option是請求的配置，跟表格的配置一樣，配置method、where、headers等，接口返回的格式也要跟表格一樣包含code、count、data等信息。 &emsp;cols的配置也跟表格一樣，是一個多維數組，可以通過`insTb3.config.cols`來獲取表格的cols，也可以重寫。 **導出的數據會包含templet轉換：** ```javascript tableX.renderFront({ elem: '#xTable1', url: '../../json/userAll.json', page: { groups: 6 }, cols: [[ {type: 'checkbox'}, {field: 'nickName', title: '用戶名', sort: true}, {field: 'sex', title: '性別', sort: true}, { title: '狀態', templet: function (d) { var stateStr = ['正常', '凍結', '欠費']; return stateStr[d.state]; } } ]] }); ``` &emsp;像上面這種state數據存的是0和1，但是顯示是文字，導出數據會自動轉成文字(layui2.5后自帶的帶出也包含此功能)。 &emsp;如果列是表單元素，比如switch開關，導出的方法： ```html  <script type="text/html" id="tableState"> <input type="checkbox" lay-skin="switch" lay-text="正常|鎖定" lay-filter="ckState" value="{{d.userId}}" {{d.state==0?'checked':''}}/> <div class="export-show">{{d.state==0?'正常':'鎖定'}}</div> </script> <script> layui.use(['tableX'], function () { var tableX = layui.tableX; tableX.render({ elem: '#xTable3', url: '../../json/user.json', cols: [[ {field: 'nickName', title: '用戶名', sort: true}, {field: 'phone', title: '手機號', sort: true}, {field: 'state', templet: '#tableState', title: '狀態', sort: true} ]] }); }); </script> ``` &emsp;通過加一個`export-show`類可以保證里面的內容只作為導出的時候用，不作為表格展示，還可以加`export-hide`來設置導出的時候屏蔽的內容。 ```html  <script type="text/html" id="tableState"> <div class="export-hide">{{d.state==0?'<i class="layui-icon"></i>':'<i class="layui-icon">ဆ</i>'}}</div> <div class="export-show">{{d.state==0?'正常':'鎖定'}}</div> </script>  ``` - `export-hide`用于表格展示，但是對排序和導出時屏蔽 - `export-show`用于排序和導出功能獲取單元格數據，但是對表格展示時屏蔽 ## 7.3.7.導出全部、搜索 :id=export_adv **導出當前頁數據：** ```javascript tableX.exportData({ cols: insTb.config.cols, data: table.cache.xTable3, fileName: '用戶表' }); ``` insTb是表格渲染后的實例，table.cache獲取表格當前頁的數據。 **導出全部數據：** ```javascript tableX.exportData({ cols: insTb.config.cols, data: 'listAll.json', fileName: '用戶表' }); ``` 導出全部數據后端再寫一個查詢全部的接口，導出時只需要把data寫接口地址即可。 **導出搜索后的全部數據：** ```javascript tableX.exportData({ cols: insTb.config.cols, data: 'listAll.json', option: { where: lastWhere }, fileName: '用戶表' }); ``` 在options里面加一個where把搜索條件傳給后端，搜索條件可以這樣獲取： ```javascript var lastWhere; // 搜索 form.on('submit(formSubSearchUser)', function (data) { lastWhere = data.field; insTb.reload({where: data.field}, 'data'); }); ``` 在表格的搜索里面把搜索條件傳給lastWhere。 **cols也可以重寫：** ```javascript tableX.exportData({ cols: [[ {field: 'username', title: '賬號'}, {field: 'nickName', title: '用戶名'} ]], data: table.cache.xTable3, fileName: '用戶表' }); ``` ## 7.3.8.后端導出 :id=export_back 后端導出一般是只用window.open(url)即可，如果要傳遞參數，并且要post提交，那就麻煩了，tableX進行了完美的封裝： ```javascript tableX.exportDataBack('user/export', {sex: '男'}); tableX.exportDataBack('user/export', {sex: '男'}, 'post'); ``` - 參數一： &emsp; 導出的url - 參數二： &emsp; 參數 - 參數三： &emsp; 請求方式如果是get方式，會使用?和&拼接參數，如果是post方式，會創建一個隱藏的表單來提交，如果你的參數有復雜的類型，比如json格式，建議用post的形式