8. 基礎參數一覽表

8.1. 下面是目前table模塊所支持的全部參數一覽表:

9. cols - 表頭參數一覽表

10. templet - 自定義列模板

10.1. 類型: String, 默認值: 無。

10.2. 在默認情況下, 單元格的內容是完全按照數據接口返回的content原樣輸出的, 如果你想對某列的單元格添加鏈接等其它元素, 你可以借助該參數來輕松實現。這是一個非常實用且強大的功能, 你的表格內容會因此而豐富多樣。

10.3. templet 提供了三種使用方式, 請結合實際場景選擇最合適的一種:

10.3.1. 如果自定義模版的字符量太大, 我們推薦你采用[方式一]。

10.3.2. 如果自定義模板的字符量適中, 或者想更方便地調用外部方法, 我們推薦你采用[方式二]。

10.3.3. 如果自定義模板的字符量很小, 我們推薦你采用[方式三]。

10.4. 方式一: 綁定模版選擇器。

<!-- 下面的{{d.id}}是動態內容, 它對應數據接口返回的字段名。 --> <script type="text/html" id="checkboxTpl"><input type="checkbox" name="lock" value="{{d.id}}" title="鎖定" {{ d.id == 10002 ? 'checked' : '' }} /> </script><script type="text/javascript">layui.use(['table'], function(){var table = layui.table;table.render({elem: '#test1' // 指定原始table容器的選擇器,url: 'UserPage.action' // 異步數據接口相關參數,cols: [[ // 設置表頭,{field: 'lock', title: '是否鎖定', templet: '#checkboxTpl' // 自定義列模板}]]});}); </script>

10.5. 方式二: 函數轉義。

<script type="text/javascript">layui.use(['table'], function(){var table = layui.table;table.render({elem: '#test1' // 指定原始table容器的選擇器,url: 'UserPage.action' // 異步數據接口相關參數,cols: [[ // 設置表頭{field: 'sex', title: '性別', templet: function(d){return '<input type="checkbox" name="sex" lay-text="女|男" lay-skin="switch" value="' + d.sex + '"' + (d.sex == '女' ? 'checked' : '') + ' />';}}]]});}); </script>

10.6. 方式三: 直接賦值模版字符。

templet: '<div><a href="{{d.id}}">{{d.title}}</a></div>'

11. toolbar - 綁定工具條模板

11.1. 默認情況下, 表格頭部工具欄區域左側模板, 是添加、編輯、刪除這樣類似的操作按鈕。如果你想添加或改變左側模板, toolbar參數可以配合模板一塊使用。

<!-- 工具欄模板: --> <script type="text/html" id="toolbarTpl"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加</button><button class="layui-btn layui-btn-sm" lay-event="delete">刪除</button><button class="layui-btn layui-btn-sm" lay-event="update">編輯</button></div> </script><script type="text/javascript">layui.use(['table'], function(){var table = layui.table;table.render({elem: '#test3' // 指定原始table容器的選擇器,toolbar: '#toolbarTpl' // 開啟表格頭部工具欄區域});}); </script>

12. 異步數據接口

12.1. 數據的異步請求由以下幾個參數組成:

13. done - 數據渲染完的回調

13.1. 類型: Function, 默認值: 無。

13.2. 無論是異步請求數據, 還是直接賦值數據, 都會觸發該回調。你可以利用該回調做一些表格以外元素的渲染。

table.render({done: function(res, curr, count){// 如果是異步請求數據方式, res即為你接口返回的信息。// 如果是直接賦值的方式, res即為: {data: [], count: 99}, data為當前頁數據、count為數據總長度console.log(res);// 得到當前頁碼console.log(curr); // 得到數據總量console.log(count);} });

14. defaultToolbar - 頭部工具欄右側圖標

14.1. 類型: Array, 默認值: ["filter","exports","print"]。

14.2. 該參數可自由配置頭部工具欄右側的圖標按鈕, 值為一個數組, 支持以下可選值:

• filter: 顯示篩選圖標。
• exports: 顯示導出圖標。
• print: 顯示打印圖標。

14.3. 可根據值的順序顯示排版圖標, 如:

defaultToolbar: ['filter', 'print', 'exports']

14.4. 另外你還可以無限擴展圖標按鈕:

table.render({defaultToolbar: ["filter", "exports", "print", { // 該參數可自由配置頭部工具欄右側的圖標按鈕title: '提示' // 標題,layEvent: 'tips' // 事件名, 用于toolbar事件中使用,icon: 'layui-icon-tips' // 圖標類名}] });

15. text - 自定義文本

15.1. 類型: Object。

15.2. table模塊會內置一些默認的文本信息, 如果想修改, 你可以設置以下參數達到目的。

table.render({ // 自定義文本, 如空數據時的異常提示等text: {none: '暫時還么有無數據' // 默認: 無數據。} });

16. initSort - 初始排序

16.1. 類型: Object, 默認值: 無。

16.2. 用于在數據表格渲染完畢時，默認按某個字段排序。排序方式, asc: 升序、desc: 降序、null: 默認排序。

table.render({ initSort: {field: 'id' // 排序字段, 對應cols設定的各字段名,type: 'desc' // 排序方式, asc: 升序、desc: 降序、null: 默認排序} });

17. height - 設定容器高度

17.1. 類型: Number/String, 可選值如下:

18. 設定表格外觀

18.1. 控制表格外觀的主要由以下參數組成:

18.2. 實例

table.render({ // 其它參數在此省略skin: 'line' // 行邊框風格,even: true // 開啟隔行背景,size: 'sm' // 小尺寸的表格 });

19. 基礎方法

19.1. 基礎用法是table模塊的關鍵組成部分, 目前所開放的所有方法如下:

> table.set(options); // 設定全局默認參數。options即各項基礎參數。 > table.on('event(filter)', callback); // 事件監聽。event為內置事件名, filter為容器lay-filter設定的值。 > table.init(filter, options); // filter為容器lay-filter設定的值, options即各項基礎參數。 > table.checkStatus(id); // 獲取表格選中行。id即為id參數對應的值。 > table.render(options); // 用于表格方法級渲染, 核心方法。應該不用再過多解釋了, 詳見: 方法級渲染。 > table.reload(id, options); // 表格重載。 > table.resize(id); // 重置表格尺寸。 > table.exportFile(id, data, type); // 導出數據。

20. 事件監聽

20.1. 語法: table.on('event(filter)', callback); 注: event為內置事件名, filter為容器lay-filter設定的值。

20.2. table模塊在Layui事件機制中注冊了專屬事件, 如果你使用layui.onevent()自定義模塊事件, 請勿占用table名。

20.3. 默認情況下, 事件所監聽的是全部的table模塊容器, 但如果你只想監聽某一個容器, 使用事件過濾器即可。

20.4. 假設原始容器為: <table class="layui-table" lay-filter="test"></table>那么你的事件監聽寫法如下:

// 以復選框事件為例 table.on('checkbox(test)', function(obj){console.log(obj) });

21. 監聽頭部工具欄事件

21.1. 點擊頭部工具欄區域設定了屬性為lay-event=""的元素時觸發。如:

<table id="test1" lay-filter="test1"></table>table.on('toolbar(test2)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'add':layer.msg('添加');break;case 'delete':layer.msg('刪除');break;case 'update':layer.msg('編輯');break;}; });

22. 監聽復選框選擇

22.1. 點擊復選框時觸發, 回調函數返回一個object參數, 攜帶的成員如下:

table.on('checkbox(test1)', function(obj){console.log(obj.checked); // 當前是否選中狀態console.log(obj.data); // 選中行的相關數據console.log(obj.type); // 如果觸發的是全選, 則為: all; 如果觸發的是單選, 則為: one });

23. 監聽單元格編輯

23.1. 單元格被編輯, 且值發生改變時觸發, 回調函數返回一個object參數, 攜帶的成員如下:

table.on('edit(test1)', function(obj){ // 注: edit是固定事件名, test是table原始容器的屬性lay-filter="對應的值"console.log(obj.value); // 得到修改后的值console.log(obj.field); // 當前編輯的字段名console.log(obj.data); // 所在行的所有相關數據 });

24. 監聽行單雙擊事件

24.1. 點擊或雙擊行時觸發。

// 監聽行單擊事件 table.on('row(test2)', function(obj){console.log(obj.tr) // 得到當前行元素對象console.log(obj.data) // 得到當前行數據// obj.del(); // 刪除當前行// obj.update(fields) // 修改當前行數據 });// 監聽行雙擊事件 table.on('rowDouble(test3)', function(obj){console.log(obj.tr) // 得到當前行元素對象console.log(obj.data) // 得到當前行數據// obj.del(); // 刪除當前行// obj.update(fields) // 修改當前行數據 });

25. 監聽排序切換

25.1. 點擊表頭排序時觸發, 它通用在基礎參數中設置autoSort: false時使用, 以完成服務端的排序, 而不是默認的前端排序。該事件的回調函數返回一個object參數, 攜帶的成員如下:

// 禁用前端自動排序, 以便由服務端直接返回排序好的數據 table.render({elem: '#id',autoSort: false // 禁用前端自動排序。 });// 監聽排序事件 table.on('sort(test)', function(obj){ // 注: sort是工具條事件名, test是table原始容器的屬性lay-filter="對應的值"// 盡管我們的table自帶排序功能, 但并沒有請求服務端。// 有些時候, 你可能需要根據當前排序的字段, 重新向服務端發送請求, 從而實現服務端排序, 如:table.reload('idTest', {initSort: obj // 記錄初始排序, 如果不設的話, 將無法標記表頭的排序狀態。,where: { // 請求參數field: obj.field // 排序字段,order: obj.type // 排序方式}});layer.msg('服務端排序。order by ' + obj.field + ' ' + obj.type); });

26. 表格重載

26.1. 很多時候, 你需要對表格進行重載。比如數據全局搜索。以下方法可以幫你輕松實現這類需求(可任選一種)。

27. 例子

27.1. 新建一個table_param.html

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>table參數 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><h2>僅開啟工具欄, 不顯示左側模板</h2><table id="test1" lay-filter="test1"></table><h2>讓工具欄左側顯示默認的內置模板</h2><table id="test2" lay-filter="test2"></table><h2>指向自定義工具欄模板選擇器</h2><table id="test3" lay-filter="test3"></table><h2>跨行跨列表格</h2><table class="layui-table" lay-data="{}"><thead><tr><th lay-data="{field:'username', width:80}" rowspan="2">聯系人</th><th lay-data="{field:'amount', width:120}" rowspan="2">金額</th><th lay-data="{align:'center'}" colspan="3">地址</th></tr><tr><th lay-data="{field:'province', width:80}">省</th><th lay-data="{field:'city', width:120}">市</th><th lay-data="{field:'county', width:300}">詳細</th></tr></thead></table><!-- 工具欄模板: --><script type="text/html" id="toolbarTpl"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加</button><button class="layui-btn layui-btn-sm" lay-event="delete">刪除</button><button class="layui-btn layui-btn-sm" lay-event="update">編輯</button></div></script><!-- 下面的{{d.id}}是動態內容, 它對應數據接口返回的字段名。 --><script type="text/html" id="checkboxTpl"><input type="checkbox" name="lock" value="{{d.id}}" title="鎖定" {{ d.id == 10002 ? 'checked' : '' }} /></script><script type="text/javascript">layui.use(['table', 'layer'], function(){var table = layui.table,layer = layui.layer;table.render({elem: '#test1' // 指定原始table容器的選擇器,url: 'UserPage.action' // 異步數據接口相關參數,method: 'post' // 接口http請求類型,where: {token: Math.random()} // 接口的其它參數,parseData: function(res){ //res 即為原始返回的數據return {"code": res.code, // 解析接口狀態"msg": res.msg, // 解析提示文本"count": res.count, // 解析數據長度"data": res.data // 解析數據列表};},request: { // 用于對分頁請求的參數: page、limit重新設定名稱pageName: 'page' // 頁碼的參數名稱, 默認: page,limitName: 'limit' // 每頁數據量的參數名, 默認: limit},response: {statusName: 'code' // 規定數據狀態的字段名稱, 默認: code,statusCode: 1 // 規定成功的狀態碼, 默認: 0,msgName: 'msg' // 規定狀態信息的字段名稱, 默認: msg,countName: 'count' // 規定數據總數的字段名稱, 默認: count,dataName: 'data' // 規定數據列表的字段名稱, 默認: data} ,toolbar: true // 開啟表格頭部工具欄區域,width: 1250 // 設定容器寬度,cellMinWidth: 100 // 全局定義所有常規單元格的最小寬度,page: true // 開啟分頁,limit: 3 // 每頁顯示的條數,limits: [3,6,9] // 每頁條數的選擇項,title: '用戶表1' // 定義table的大標題,totalRow: true // 是否開啟合計行區域,text: { // 自定義文本, 如空數據時的異常提示等none: '暫時還么有無數據' // 默認: 無數據。},loading: true // 是否顯示加載條,initSort: {field: 'id' // 排序字段, 對應 cols設定的各字段名,type: 'desc' // 排序方式 , asc: 升序、desc: 降序、null: 默認排序}// ,autoSort: false // 禁用前端自動排序,defaultToolbar: ["filter", "exports", "print", { // 該參數可自由配置頭部工具欄右側的圖標按鈕title: '提示' // 標題,layEvent: 'tips' // 事件名, 用于toolbar事件中使用,icon: 'layui-icon-tips' // 圖標類名}] ,cols: [[ // 設置表頭{type: 'checkbox', fixed: 'left', LAY_CHECKED: true},{field: 'id', // 設定字段名title: 'ID', // 設定標題名稱width: 150, // 設定列寬minWidth: 120, // 局部定義當前常規單元格的最小寬度hide: false, // 是否初始隱藏列totalRowText: '合計', // 用于顯示自定義的合計文本unresize: true, // 是否禁用拖拽列寬edit: 'text', // 單元格編輯類型event: 'threeClick', // 自定義單元格點擊事件名style: 'color: #ff0000;', // 自定義單元格樣式align: 'center' // 單元格排列方式},{field: 'username', title: '用戶名'},{field: 'sex', title: '性別', templet: function(d){return '<input type="checkbox" name="sex" lay-text="女|男" lay-skin="switch" value="' + d.sex + '"' + (d.sex == '女' ? 'checked' : '') + ' />';}},{field: 'city', title: '城市'} ,{field: 'sign', title: '簽名'},{field: 'experience', title: '積分', totalRow: true},{field: 'score', title: '評分', totalRow: true},{field: 'classify', title: '職業'},{field: 'wealth', title: '財富', totalRow: true, width: 200},{field: 'lock', title: '是否鎖定', templet: '#checkboxTpl' // 自定義列模板}]],done: function(res, curr, count){// 如果是異步請求數據方式, res即為你接口返回的信息。// 如果是直接賦值的方式, res即為: {data: [], count: 99}, data為當前頁數據、count為數據總長度console.log(res);// 得到當前頁碼console.log(curr); // 得到數據總量console.log(count);}});table.render({elem: '#test2' // 指定原始table容器的選擇器,height: 200 // 設定容器高度,url: 'user.json' // 異步數據接口相關參數,toolbar: 'default' // 開啟表格頭部工具欄區域,skin: 'line' // 行邊框風格,even: true // 開啟隔行背景,size: 'sm' // 小尺寸的表格// 默認 true, 即直接由 table組件在前端自動處理排序。若為 false, 則需自主排序, 通常由服務端直接返回排序好的數據。,autoSort: true,cols: [[ // 設置表頭{type: 'radio', fixed: 'left'},{field: 'id', title: 'ID', sort: true},{field: 'username', title: '用戶名'},{field: 'sex', title: '性別'},{field: 'city', title: '城市'} ,{field: 'sign', title: '簽名'},{field: 'experience', title: '積分'},{field: 'score', title: '評分'},{field: 'classify', title: '職業'},{field: 'wealth', title: '財富'}]]});table.render({elem: '#test3' // 指定原始table容器的選擇器,toolbar: '#toolbarTpl' // 開啟表格頭部工具欄區域,cols: [[ // 設置表頭{type: 'numbers', fixed: 'left'},{field: 'id', title: 'ID'},{field: 'username', title: '用戶名'},{field: 'sex', title: '性別'},{field: 'city', title: '城市'} ,{field: 'sign', title: '簽名'},{field: 'experience', title: '積分'},{field: 'score', title: '評分'},{field: 'classify', title: '職業'},{field: 'wealth', title: '財富'}]],data: [{"id": 10000,"username": "user-0","sex": "女","city": "城市-0","sign": "簽名-0","experience": 255,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10001,"username": "user-1","sex": "男","city": "城市-1","sign": "簽名-1","experience": 884,"logins": 58,"wealth": 64928690,"classify": "詞人","score": 27},{"id": 10002,"username": "user-2","sex": "女","city": "城市-2","sign": "簽名-2","experience": 650,"logins": 77,"wealth": 6298078,"classify": "醬油","score": 31}]});// 監聽事件table.on('toolbar(test1)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'tips':layer.msg('提示');break;};});table.on('tool(test1)', function(obj){switch(obj.event){case 'threeClick':layer.msg('單元格點擊事件: ' + obj.data.id);break;};});table.on('toolbar(test2)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'add':layer.msg('添加');break;case 'delete':layer.msg('刪除');break;case 'update':layer.msg('編輯');break;};});table.on('toolbar(test3)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'add':layer.msg('添加');break;case 'delete':layer.msg('刪除');break;case 'update':layer.msg('編輯');break;};});table.on('checkbox(test1)', function(obj){console.log(obj.checked); // 當前是否選中狀態console.log(obj.data); // 選中行的相關數據console.log(obj.type); // 如果觸發的是全選, 則為: all; 如果觸發的是單選, 則為: one});table.on('edit(test1)', function(obj){console.log(obj.value); // 得到修改后的值console.log(obj.field); // 當前編輯的字段名console.log(obj.data); // 所在行的所有相關數據 });table.on('row(test2)', function(obj){console.log(obj.tr) // 得到當前行元素對象console.log(obj.data) // 得到當前行數據// obj.del(); // 刪除當前行// obj.update(fields) // 修改當前行數據});// 監聽行雙擊事件table.on('rowDouble(test3)', function(obj){console.log(obj.tr) // 得到當前行元素對象console.log(obj.data) // 得到當前行數據// obj.del(); // 刪除當前行// obj.update(fields) // 修改當前行數據});});</script></body> </html>

27.2. 新建一Data.java

package layuiTable;import java.io.Serializable;public class Data implements Serializable {private static final long serialVersionUID = 1L;private Integer id;private String username;private String sex;private String city;private String sign;private Integer experience;private Integer logins;private Long wealth;private String classify;private Integer score;public Data(Integer id, String username, String sex, String city, String sign, Integer experience, Integer logins, Long wealth, String classify, Integer score) {this.id = id;this.username = username;this.sex = sex;this.city = city;this.sign = sign;this.experience = experience;this.logins = logins;this.wealth = wealth;this.classify = classify;this.score = score;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public String getCity() {return city;}public void setCity(String city) {this.city = city;}public String getSign() {return sign;}public void setSign(String sign) {this.sign = sign;}public Integer getExperience() {return experience;}public void setExperience(Integer experience) {this.experience = experience;}public Integer getLogins() {return logins;}public void setLogins(Integer logins) {this.logins = logins;}public Long getWealth() {return wealth;}public void setWealth(Long wealth) {this.wealth = wealth;}public String getClassify() {return classify;}public void setClassify(String classify) {this.classify = classify;}public Integer getScore() {return score;}public void setScore(Integer score) {this.score = score;} }

27.3. 新建User.java

package layuiTable;import java.io.Serializable; import java.util.List;public class User implements Serializable {private static final long serialVersionUID = 1L;private Integer code;private String msg;private Integer count;private List<Data> data;public User(Integer code, String msg, Integer count, List<Data> data) {this.code = code;this.msg = msg;this.count = count;this.data = data;}public Integer getCode() {return code;}public void setCode(Integer code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public Integer getCount() {return count;}public void setCount(Integer count) {this.count = count;}public List<Data> getData() {return data;}public void setData(List<Data> data) {this.data = data;} }

27.4. 添加gson.jar

27.5. 新建UserPage.java

package layuiTable;import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io.IOException; import java.util.Arrays; import java.util.Enumeration; import java.util.List; import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson;public class UserPage extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Enumeration<String> names = req.getParameterNames();while(names.hasMoreElements()) {String name = names.nextElement();System.out.println(name + " = " + req.getParameter(name));}Enumeration<String> headerNames = req.getHeaderNames();while(headerNames.hasMoreElements()) {String headerName = headerNames.nextElement();System.out.println(headerName + " = " + req.getHeader(headerName));}int page = Integer.parseInt(req.getParameter("page"));int limit = Integer.parseInt(req.getParameter("limit"));ServletContext servletContext = getServletContext();File file = new File(servletContext.getRealPath("/user.json"));BufferedReader br = new BufferedReader(new FileReader(file));StringBuffer sb = new StringBuffer();String read = null;while((read = br.readLine()) != null) {sb.append(read);}br.close();Gson gson = new Gson();User user = gson.fromJson(sb.toString(), User.class);int size = user.getData().size();Data[] dataArr = Arrays.copyOfRange(user.getData().toArray(new Data[size]), (page - 1) * limit, page * limit > size ? size : page * limit);List<Data> dataList = Arrays.asList(dataArr);user.setData(dataList);resp.setHeader("Content-Type", "text/html; charset=UTF-8");resp.getWriter().write(gson.toJson(user));}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

27.6. 運行效果圖

總結

以上是生活随笔為你收集整理的030-数据表格二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。