1.實例
創建一個table實例最簡單的方式是，在頁面放置一個元素 <table id="demo"></table>，然后通過 table.render() 方法指定該容器，如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模塊快速使用</title> <link rel="stylesheet" href="/layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="/layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一個實例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //數據接口 ,page: true //開啟分頁 ,cols: [[ //表頭 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用戶名', width:80} ,{field: 'sex', title: '性別', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '簽名', width: 177} ,{field: 'experience', title: '積分', width: 80, sort: true} ,{field: 'score', title: '評分', width: 80, sort: true} ,{field: 'classify', title: '職業', width: 80} ,{field: 'wealth', title: '財富', width: 135, sort: true} ]] }); }); </script> </body> </html>
2.方法渲染
將基礎參數的設定放在了JS代碼中，且原始的 table 標簽只需要一個 選擇器：
<table id="demo" lay-filter="test"></table>
var table = layui.table; //執行渲染 table.render({ elem: '#demo' //指定原始表格元素選擇器（推薦id選擇器） ,height: 315 //容器高度 ,cols: [{}] //設置表頭 //,…… //更多參數參考右側目錄：基本參數選項 });
3.自動渲染
在一段 table 容器中配置好相應的參數，由 table 模塊內部自動對其完成渲染，而無需你寫初始的渲染方法。其特點在上文也有闡述。你需要關注的是以下三點：
1) 帶有 class="layui-table" 的 <table> 標簽。
2) 對標簽設置屬性 lay-data="" 用於配置一些基礎參數
3) 在 <th> 標簽中設置屬性lay-data=""用於配置表頭信息
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'id', width:80, sort: true}">ID</th> <th lay-data="{field:'username', width:80}">用戶名</th> <th lay-data="{field:'sex', width:80, sort: true}">性別</th> <th lay-data="{field:'city'}">城市</th> <th lay-data="{field:'sign'}">簽名</th> <th lay-data="{field:'experience', sort: true}">積分</th> <th lay-data="{field:'score', sort: true}">評分</th> <th lay-data="{field:'classify'}">職業</th> <th lay-data="{field:'wealth', sort: true}">財富</th> </tr> </thead> </table>
4.轉換靜態表格
可通過init方法轉換
<table lay-filter="demo"> <thead> <tr> <th lay-data="{field:'username', width:100}">昵稱</th> <th lay-data="{field:'experience', width:80, sort:true}">積分</th> <th lay-data="{field:'sign'}">簽名</th> </tr> </thead> <tbody> <tr> <td>賢心1</td> <td>66</td> <td>人生就像是一場修行a</td> </tr> <tr> <td>賢心2</td> <td>88</td> <td>人生就像是一場修行b</td> </tr> <tr> <td>賢心3</td> <td>33</td> <td>人生就像是一場修行c</td> </tr> </tbody> </table>
執行js方法就可以了
var table = layui.table; //轉換靜態表格 table.init('demo', { height: 315 //設置高度 ,limit: 10 //注意：請務必確保 limit 參數（默認：10）是與你服務端限定的數據條數一致 //支持所有基礎參數 });
5.基礎參數
1.elem：指定原始 table 容器的選擇器或 DOM，方法渲染方式必填
2.cols：設置表頭。值是一個二維數組。方法渲染方式必填
3.url：異步數據接口相關參數。其中 url 參數為必填項
4.toolbar：開啟表格頭部工具欄區域，該參數支持四種類型值：
- toolbar: '#toolbarDemo' //指向自定義工具欄模板選擇器
- toolbar: '<div>xxx</div>' //直接傳入工具欄模板字符
- toolbar: true //僅開啟工具欄，不顯示左側模板
- toolbar: 'default' //讓工具欄左側顯示默認的內置模板
5.defaultToolbar：該參數可自由配置頭部工具欄右側的圖標按鈕
6.width:設定容器寬度。table容器的默認寬度是跟隨它的父元素鋪滿，你也可以設定一個固定值，當容器中的內容超出了該寬度時，會自動出現橫向滾動條。
7.height：設定容器高度，string/number
8.cellMinWidth：全局定義所有常規單元格的最小寬度（默認：60），一般用於列寬自動分配的情況。其優先級低於表頭參數中的 minWidth
9.done：數據渲染完的回調。你可以借此做一些其它的操作
10.data：直接賦值數據。既適用於只展示一頁數據，也非常適用於對一段已知數據進行多頁展示。
11.totalRow：是否開啟合計行區域。
12.page：開啟分頁（默認：false）
13.limit：每頁顯示的條數（默認：10）
14.limits：每頁條數的選擇項，默認：[10,20,30,40,50,60,70,80,90]。
注意：優先級低於 page 參數中的 limits 參數
15.loading：是否顯示加載條（默認：true）。如果設置 false，則在切換分頁時，不會出現加載條。該參數只適用於 url 參數開啟的方式
16.title：定義 table 的大標題（在文件導出等地方會用到）
17.text：自定義文本，如空數據時的異常提示等。
18.autoSort：默認 true，即直接由 table 組件在前端自動處理排序。
若為 false，則需自主排序，通常由服務端直接返回排序好的數據。
19.initSort：初始排序狀態。用於在數據表格渲染完畢時，默認按某個字段排序。
20.id：設定容器唯一 id。id 是對表格的數據操作方法上是必要的傳遞條件，它是表格容器的索引，你在下文諸多地方都將會見識它的存在。
21.skin：設定表格各種外觀、尺寸等
6.表頭參數
如果你采用的是方法渲染，cols 是一個二維數組，表頭參數設定在數組內；如果你采用的自動渲染，表頭參數的設定應放在 <th> 標簽上
1.field：設定字段名。字段名的設定非常重要，且是表格數據列的唯一標識
2.title：設定標題名稱
3.width：設定列寬，若不填寫，則自動分配；若填寫，則支持值為：數字、百分比
請結合實際情況，對不同列做不同設定。
4.minWidth：局部定義當前常規單元格的最小寬度（默認：60），一般用於列寬自動分配的情況。其優先級高於基礎參數中的 cellMinWidth
5.type：設定列類型。可選值有：
- normal（常規列，無需設定）
- checkbox（復選框列）
- radio（單選框列，layui 2.4.0 新增）
- numbers（序號列）
- space（空列）
6.LAY_CHECKED：是否全選狀態（默認：false）。必須復選框列開啟后才有效，如果設置 true，則表示復選框默認全部選中。
7.fixed：固定列。可選值有：left（固定在左）、right（固定在右）。一旦設定，對應的列將會被固定在左或右，不隨滾動條而滾動。
8.hide：是否初始隱藏列，默認：false。
9.totalRow：是否開啟該列的自動合計功能，默認：false。
10.totalRowText：用於顯示自定義的合計文本。
11.sort：是否允許排序（默認：false）。如果設置 true，則在對應的表頭顯示排序icon，從而對列開啟排序功能。
12.unresize：是否禁用拖拽列寬（默認：false）。默認情況下會根據列類型（type）來決定是否禁用，如復選框列，會自動禁用。而其它普通列，默認允許拖拽列寬，當然你也可以設置 true 來禁用該功能。
13.edit：單元格編輯類型（默認不開啟）目前只支持：text（輸入框）
14.event：自定義單元格點擊事件名，以便在 tool 事件中完成對該單元格的業務處理
15.style：自定義單元格樣式。即傳入 CSS 樣式
16.align：單元格排列方式。可選值有：left（默認）、center（居中）、right（居右）
17.colspan：單元格所占列數（默認：1）。一般用於多級表頭
18.rowspan：單元格所占行數（默認：1）。一般用於多級表頭
19.templet：自定義列模板，模板遵循 laytpl 語法。這是一個非常實用的功能，你可借助它實現邏輯處理，以及將原始數據轉化成其它格式，如時間戳轉化為日期字符等
20.toolbar：綁定工具條模板。可在每行對應的列中出現一些自定義的操作性按鈕
7.自定義列模板
在默認情況下，單元格的內容是完全按照數據接口返回的content原樣輸出的，如果你想對某列的單元格添加鏈接等其它元素，你可以借助該參數來輕松實現。這是一個非常實用且強大的功能，你的表格內容會因此而豐富多樣。
方式一：綁定模版選擇器。
table.render({ cols: [[ {field:'title', title: '文章標題', width: 200, templet: '#titleTpl'} //這里的templet值是模板元素的選擇器 ,{field:'id', title:'ID', width:100} ]] }); 等價於： <th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章標題</th> <th lay-data="{field:'id', width:100}">ID</th>
下述是templet對應的模板，它可以存放在頁面的任意位置。模板遵循於 laytpl 語法，可讀取到返回的所有數據
<script type="text/html" id="titleTpl"> <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a> </script> 注意：上述的 {{d.id}}、{{d.title}} 是動態內容，它對應數據接口返回的字段名。除此之外，你還可以讀取到以下額外字段： 序號：{{ d.LAY_INDEX }} 由於模板遵循 laytpl 語法（建議細讀 laytpl文檔 ），因此在模板中你可以寫任意腳本語句（如 if else/for等）： <script type="text/html" id="titleTpl"> {{# if(d.id < 100){ }} <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a> {{# } else { }} {{d.title}}(普通用戶) {{# } }} </script>
方式二：函數轉義。templet 支持函數形式，函數返回一個參數 d，包含接口返回的所有字段和數據。如下所示：
table.render({ cols: [[ {field:'title', title: '文章標題', width: 200 ,templet: function(d){ return 'ID：'+ d.id +'，標題：<span style="color: #c00;">'+ d.title +'</span>' } } ,{field:'id', title:'ID', width:100} ]] });
方式三：直接賦值模版字符。事實上，templet 也可以直接是一段 html 內容，如：
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>' 注意：這里一定要被一層 <div></div> 包裹，否則無法讀取到模板
8.綁定工具條模板toolbar
類型：String，默認值：無，通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕，而 tool 參數就是為此而生，你因此可以非常便捷地實現各種操作功能。tool 參數和 templet 參數的使用方式完全類似，通常接受的是一個選擇器，也可以是一段HTML字符。
下述是 toolbar 對應的模板，它可以存放在頁面的任意位置：
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> <!-- 這里同樣支持 laytpl 語法，如： --> {{# if(d.auth > 2){ }} <a class="layui-btn layui-btn-xs" lay-event="check">審核</a> {{# } }} </script> 注意：屬性 lay-event="" 是模板的關鍵所在，值可隨意定義。
//監聽工具條 table.on('tool(test)', function(obj){ //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值" var data = obj.data; //獲得當前行數據 var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值） var tr = obj.tr; //獲得當前行 tr 的 DOM 對象（如果有的話） if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //刪除 layer.confirm('真的刪除行么', function(index){ obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存 layer.close(index); //向服務端發送刪除指令 }); } else if(layEvent === 'edit'){ //編輯 //do something //同步更新緩存對應的值 obj.update({ username: '123' ,title: 'xxx' }); } else if(layEvent === 'LAYTABLE_TIPS'){ layer.alert('Hi，頭部工具欄擴展的右側圖標。'); } });
9.異步數據接口
數據的異步請求由以下幾個參數組成
url：接口地址。默認會自動傳遞兩個參數：?page=1&limit=30（該參數可通過 request 自定義）
page 代表當前頁碼、limit 代表每頁數據量
method：接口http請求類型，默認：get
where：接口的其它參數。如：where: {token: 'sasasas', id: 123}
contentType：發送到服務端的內容編碼類型。如果你要發送 json 內容，可以設置：contentType: 'application/json'
headers：接口的請求頭。如：headers: {token: 'sasasas'}
parseData：數據格式解析的回調函數，用於將返回的任意數據格式解析成 table 組件規定的數據格式假設你接口返回的數據為以下格式
{ "status": 0, "message": "", "total": 180, "data": { "item": [{}, {}] } }
table.render({ elem: '#demp' ,url: '' ,parseData: function(res){ //res 即為原始返回的數據 return { "code": res.status, //解析接口狀態 "msg": res.message, //解析提示文本 "count": res.total, //解析數據長度 "data": res.data.item //解析數據列表 }; } //,…… //其他參數 });
request：用於對分頁請求的參數：page、limit重新設定名稱，如：
table.render({ elem: '#demp' ,url: '' ,request: { pageName: 'curr' //頁碼的參數名稱，默認：page ,limitName: 'nums' //每頁數據量的參數名，默認：limit } //,…… //其他參數 });
那么請求數據時的參數將會變為：?curr=1&nums=30
response：如果你想重新規定返回的數據格式，那么可以借助 response 參數，如：
table.render({ elem: '#demp' ,url: '' ,response: { statusName: 'status' //規定數據狀態的字段名稱，默認：code ,statusCode: 200 //規定成功的狀態碼，默認：0 ,msgName: 'hint' //規定狀態信息的字段名稱，默認：msg ,countName: 'total' //規定數據總數的字段名稱，默認：count ,dataName: 'rows' //規定數據列表的字段名稱，默認：data } //,…… //其他參數 });
10.數據渲染完的回調
無論是異步請求數據，還是直接賦值數據，都會觸發該回調。可以利用該回調做一些表格以外元素的渲染。
table.render({ //其它參數在此省略
done: function(res, curr, count){
//如果是異步請求數據方式，res即為你接口返回的信息。
//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當前頁數據、count為數據總長度
console.log(res);
//得到當前頁碼
console.log(curr);
//得到數據總量
console.log(count);
}
});
11.頭部工具欄右側圖標defaultToolbar
類型：Array，默認值：["filter","exports","print"]
- filter: 顯示篩選圖標
- exports: 顯示導出圖標
- print: 顯示打印圖標
table.render({ //其它參數在此省略
defaultToolbar: ['filter', 'print', 'exports', {
title: '提示' //標題
,layEvent: 'LAYTABLE_TIPS' //事件名，用於 toolbar 事件中使用
,icon: 'layui-icon-tips' //圖標類名
}]
});
12.自定義文本text
table 模塊會內置一些默認的文本信息，如果想修改，你可以設置以下參數達到目的。
table.render({ //其它參數在此省略
text: {
none: '暫無相關數據' //默認：無數據。注：該屬性為 layui 2.2.5 開始新增
}
});
13.初始排序initSort
用於在數據表格渲染完畢時，默認按某個字段排序。
//“方法級渲染”配置方式 table.render({ //其它參數在此省略 initSort: { field: 'id' //排序字段，對應 cols 設定的各字段名 ,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默認排序 } }); 等價於（“自動化渲染”配置方式） <table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>
14.表格外觀
skin：line （行邊框風格）row （列邊框風格）nob （無邊框風格） 用於設定表格風格，若使用默認風格不設置該屬性即可
even：true/false 若不開啟隔行背景，不設置該參數即可
size：lg/sm 用於設定表格尺寸，若使用默認尺寸不設置該屬性即可
15.獲取選中行
語法：table.checkStatus('ID')，其中 ID 為基礎參數 id 對應的值
【自動化渲染】 <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table> 【方法渲染】 table.render({ //其它參數省略 id: 'idTest' });
var checkStatus = table.checkStatus('idTest'); //idTest 即為基礎參數 id 對應的值 console.log(checkStatus.data) //獲取選中行的數據 console.log(checkStatus.data.length) //獲取選中行數量，可作為是否有選中行的條件 console.log(checkStatus.isAll ) //表格是否全選
16.監聽復選框選中
table.on('checkbox(test)', function(obj){
console.log(obj.checked); //當前是否選中狀態
console.log(obj.data); //選中行的相關數據
console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one
});