1. table模塊是layui最核心的組成之一。它用于對表格進行一系列功能和動態化數據操作, 涵蓋了日常業務所涉及的幾乎全部需求。支持固定表頭、固定行、固定列左/列右, 支持拖拽改變列寬度, 支持排序, 支持多級表頭, 支持單元格的自定義模板, 支持對表格搜索、條件篩選等, 支持復選框, 支持分頁, 支持單元格編輯等等一系列功能。

2. 模塊加載名稱: table。

3. 三種初始化渲染方式

3.1. 為了滿足各種情況下的需求, layui對table模塊做了三種初始化的支持, 你可按照個人喜好和實際情況靈活使用:

4. 自動渲染

4.1. 所謂的自動渲染, 即在一段table容器中配置好相應的參數, 由table模塊內部自動對其完成渲染, 而無需你寫初始的渲染方法。

4.2. 你需要關注的是以下三點:

4.2.1. 帶有class="layui-table"的<table>標簽。

4.2.2. 對<table>標簽設置屬性lay-data=""用于配置一些基礎參數。

4.2.3. 在<th>標簽中設置屬性lay-data=""用于配置表頭信息。

4.3. 按照上述的規范寫好table原始容器后, 只要你加載了layui的table模塊, 就會自動對其建立動態的數據表格。下面是一個示例:

<table class="layui-table" lay-data="{height: 250, url:'user.json', id: 'test1'}"><thead><tr><th lay-data="{field: 'id'}">ID</th><th lay-data="{field: 'username'}">用戶名</th><th lay-data="{field: 'sex'}">性別</th><th lay-data="{field: 'city'}">城市</th><th lay-data="{field: 'sign'}">簽名</th><th lay-data="{field: 'experience'}">積分</th><th lay-data="{field: 'score'}">評分</th><th lay-data="{field: 'classify'}">職業</th><th lay-data="{field: 'wealth'}">財富</th></tr></thead> </table>

5. 方法渲染

5.1. 其實這是"自動化渲染"的手動模式, 本質類似, 只是"方法級渲染"將基礎參數的設定放在了JS代碼中, 且原始的table標簽只需要一個選擇器:

<table id="test2"></table><script type="text/javascript">layui.use('table', function(){var table = layui.table;table.render({elem: '#test2' // 指定原始table容器的選擇器,height: 300 // 設定容器高度,url: 'user.json' // 異步數據接口相關參數,cols: [[ // 設置表頭{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: '財富'}]]});}); </script>

6. 轉換靜態表格

6.1. 假設你的頁面已經存在了一段有內容的表格, 它由原始的table標簽組成, 這時你需要賦予它一些動態元素, 比如: 拖拽調整列寬? 比如: 排序等等?那么你同樣可以很輕松地去實現。嘗試在你的靜態表格的th標簽中加上lay-data=""屬性, 代碼如下:

<table lay-filter="test3"><thead><tr><th lay-data="{field: 'id'}">ID</th><th lay-data="{field: 'username'}">用戶名</th><th lay-data="{field: 'sex'}">性別</th><th lay-data="{field: 'city'}">城市</th><th lay-data="{field: 'sign'}">簽名</th><th lay-data="{field: 'experience'}">積分</th><th lay-data="{field: 'score'}">評分</th><th lay-data="{field: 'classify'}">職業</th><th lay-data="{field: 'wealth'}">財富</th></tr></thead><tbody><tr><td>10000</td><td>user-0</td><td>女</td><td>城市-0</td><td>簽名-0</td><td>255</td><td>57</td><td>作家</td><td>82830700</td></tr><tr><td>10001</td><td>user-1</td><td>男</td><td>城市-1</td><td>簽名-1</td><td>884</td><td>27</td><td>詞人</td><td>64928690</td></tr><tr><td>10002</td><td>user-2</td><td>女</td><td>城市-2</td><td>簽名-2</td><td>650</td><td>31</td><td>醬油</td><td>6298078</td></tr><tr><td>10003</td><td>user-3</td><td>女</td><td>城市-3</td><td>簽名-3</td><td>362</td><td>68</td><td>作家</td><td>37117017</td></tr><tr><td>10004</td><td>user-4</td><td>男</td><td>城市-4</td><td>簽名-4</td><td>807</td><td>6</td><td>作家</td><td>76263262</td></tr><tr><td>10005</td><td>user-5</td><td>女</td><td>城市-5</td><td>簽名-5</td><td>173</td><td>87</td><td>作家</td><td>60344147</td></tr><tr><td>10006</td><td>user-6</td><td>女</td><td>城市-6</td><td>簽名-6</td><td>982</td><td>34</td><td>作家</td><td>57768166</td></tr><tr><td>10007</td><td>user-7</td><td>男</td><td>城市-7</td><td>簽名-7</td><td>727</td><td>28</td><td>作家</td><td>82030578</td></tr><tr><td>10008</td><td>user-8</td><td>男</td><td>城市-8</td><td>簽名-8</td><td>951</td><td>14</td><td>詞人</td><td>16503371</td></tr><tr><td>10009</td><td>user-9</td><td>女</td><td>城市-9</td><td>簽名-9</td><td>484</td><td>75</td><td>詞人</td><td>86801934</td></tr></tbody> </table>

6.2. 然后執行用于轉換表格的JS方法, 就可以達到目的了:

<script type="text/javascript">layui.use('table', function(){var table = layui.table;// 轉換靜態表格table.init('test3', {height: 250 // 設定容器高度});}); </script>

7. 三種初始化渲染方式例子

7.1. 新建一個名為layuiTable的動態WEB工程

7.2. 新建一個user.json文件

{"code": 0,"msg": "數據表格總數是根據下面count這個字段來計數的","count": 70, "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},{"id": 10003,"username": "user-3","sex": "女","city": "城市-3","sign": "簽名-3","experience": 362,"logins": 157,"wealth": 37117017,"classify": "詩人","score": 68},{"id": 10004,"username": "user-4","sex": "男","city": "城市-4","sign": "簽名-4","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10005,"username": "user-5","sex": "女","city": "城市-5","sign": "簽名-5","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10006,"username": "user-6","sex": "女","city": "城市-6","sign": "簽名-6","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10007,"username": "user-7","sex": "男","city": "城市-7","sign": "簽名-7","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10008,"username": "user-8","sex": "男","city": "城市-8","sign": "簽名-8","experience": 951,"logins": 133,"wealth": 16503371,"classify": "詞人","score": 14},{"id": 10009,"username": "user-9","sex": "女","city": "城市-9","sign": "簽名-9","experience": 484,"logins": 25,"wealth": 86801934,"classify": "詞人","score": 75},{"id": 10010,"username": "user-10","sex": "女","city": "城市-10","sign": "簽名-10","experience": 255,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10011,"username": "user-11","sex": "男","city": "城市-11","sign": "簽名-11","experience": 884,"logins": 58,"wealth": 64928690,"classify": "詞人","score": 27},{"id": 10012,"username": "user-12","sex": "女","city": "城市-12","sign": "簽名-12","experience": 650,"logins": 77,"wealth": 6298078,"classify": "醬油","score": 31},{"id": 10013,"username": "user-13","sex": "女","city": "城市-13","sign": "簽名-13","experience": 362,"logins": 157,"wealth": 37117017,"classify": "詩人","score": 68},{"id": 10014,"username": "user-14","sex": "男","city": "城市-14","sign": "簽名-14","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10015,"username": "user-15","sex": "女","city": "城市-15","sign": "簽名-15","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10016,"username": "user-16","sex": "女","city": "城市-16","sign": "簽名-16","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10017,"username": "user-17","sex": "男","city": "城市-17","sign": "簽名-17","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10018,"username": "user-18","sex": "男","city": "城市-18","sign": "簽名-18","experience": 951,"logins": 133,"wealth": 16503371,"classify": "詞人","score": 14},{"id": 10019,"username": "user-19","sex": "女","city": "城市-19","sign": "簽名-19","experience": 484,"logins": 25,"wealth": 86801934,"classify": "詞人","score": 75},{"id": 10020,"username": "user-20","sex": "女","city": "城市-20","sign": "簽名-20","experience": 255,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10021,"username": "user-21","sex": "男","city": "城市-21","sign": "簽名-21","experience": 884,"logins": 58,"wealth": 64928690,"classify": "詞人","score": 27},{"id": 10022,"username": "user-22","sex": "女","city": "城市-22","sign": "簽名-22","experience": 650,"logins": 77,"wealth": 6298078,"classify": "醬油","score": 31},{"id": 10023,"username": "user-23","sex": "女","city": "城市-23","sign": "簽名-23","experience": 362,"logins": 157,"wealth": 37117017,"classify": "詩人","score": 68},{"id": 10024,"username": "user-24","sex": "男","city": "城市-24","sign": "簽名-24","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10025,"username": "user-25","sex": "女","city": "城市-25","sign": "簽名-25","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10026,"username": "user-26","sex": "女","city": "城市-26","sign": "簽名-26","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10027,"username": "user-27","sex": "男","city": "城市-27","sign": "簽名-27","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10028,"username": "user-28","sex": "男","city": "城市-28","sign": "簽名-28","experience": 951,"logins": 133,"wealth": 16503371,"classify": "詞人","score": 14},{"id": 10029,"username": "user-29","sex": "女","city": "城市-29","sign": "簽名-29","experience": 484,"logins": 25,"wealth": 86801934,"classify": "詞人","score": 75},{"id": 10030,"username": "user-30","sex": "女","city": "城市-30","sign": "簽名-30","experience": 255,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10031,"username": "user-31","sex": "男","city": "城市-31","sign": "簽名-31","experience": 884,"logins": 58,"wealth": 64928690,"classify": "詞人","score": 27},{"id": 10032,"username": "user-32","sex": "女","city": "城市-32","sign": "簽名-32","experience": 650,"logins": 77,"wealth": 6298078,"classify": "醬油","score": 31},{"id": 10033,"username": "user-33","sex": "女","city": "城市-33","sign": "簽名-33","experience": 362,"logins": 157,"wealth": 37117017,"classify": "詩人","score": 68},{"id": 10034,"username": "user-34","sex": "男","city": "城市-34","sign": "簽名-34","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10035,"username": "user-35","sex": "女","city": "城市-35","sign": "簽名-35","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10036,"username": "user-36","sex": "女","city": "城市-36","sign": "簽名-36","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10037,"username": "user-37","sex": "男","city": "城市-37","sign": "簽名-37","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10038,"username": "user-38","sex": "男","city": "城市-38","sign": "簽名-38","experience": 951,"logins": 133,"wealth": 16503371,"classify": "詞人","score": 14},{"id": 10039,"username": "user-39","sex": "女","city": "城市-39","sign": "簽名-39","experience": 484,"logins": 25,"wealth": 86801934,"classify": "詞人","score": 75},{"id": 10040,"username": "user-40","sex": "女","city": "城市-40","sign": "簽名-40","experience": 255,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10041,"username": "user-41","sex": "男","city": "城市-41","sign": "簽名-41","experience": 884,"logins": 58,"wealth": 64928690,"classify": "詞人","score": 27},{"id": 10042,"username": "user-42","sex": "女","city": "城市-42","sign": "簽名-42","experience": 650,"logins": 77,"wealth": 6298078,"classify": "醬油","score": 31},{"id": 10043,"username": "user-43","sex": "女","city": "城市-43","sign": "簽名-43","experience": 362,"logins": 157,"wealth": 37117017,"classify": "詩人","score": 68},{"id": 10044,"username": "user-44","sex": "男","city": "城市-44","sign": "簽名-44","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10045,"username": "user-45","sex": "女","city": "城市-45","sign": "簽名-45","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10046,"username": "user-46","sex": "女","city": "城市-46","sign": "簽名-46","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10047,"username": "user-47","sex": "男","city": "城市-47","sign": "簽名-47","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10048,"username": "user-48","sex": "男","city": "城市-48","sign": "簽名-48","experience": 951,"logins": 133,"wealth": 16503371,"classify": "詞人","score": 14},{"id": 10049,"username": "user-49","sex": "女","city": "城市-49","sign": "簽名-49","experience": 484,"logins": 25,"wealth": 86801934,"classify": "詞人","score": 75},{"id": 10050,"username": "user-50","sex": "女","city": "城市-50","sign": "簽名-50","experience": 255,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10051,"username": "user-51","sex": "男","city": "城市-51","sign": "簽名-51","experience": 884,"logins": 58,"wealth": 64928690,"classify": "詞人","score": 27},{"id": 10052,"username": "user-52","sex": "女","city": "城市-52","sign": "簽名-52","experience": 650,"logins": 77,"wealth": 6298078,"classify": "醬油","score": 31},{"id": 10053,"username": "user-53","sex": "女","city": "城市-53","sign": "簽名-53","experience": 362,"logins": 157,"wealth": 37117017,"classify": "詩人","score": 68},{"id": 10054,"username": "user-54","sex": "男","city": "城市-54","sign": "簽名-54","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10055,"username": "user-55","sex": "女","city": "城市-55","sign": "簽名-55","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10056,"username": "user-56","sex": "女","city": "城市-56","sign": "簽名-56","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10057,"username": "user-57","sex": "男","city": "城市-57","sign": "簽名-57","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10058,"username": "user-58","sex": "男","city": "城市-58","sign": "簽名-58","experience": 951,"logins": 133,"wealth": 16503371,"classify": "詞人","score": 14},{"id": 10059,"username": "user-59","sex": "女","city": "城市-59","sign": "簽名-59","experience": 484,"logins": 25,"wealth": 86801934,"classify": "詞人","score": 75},{"id": 10060,"username": "user-60","sex": "女","city": "城市-60","sign": "簽名-60","experience": 255,"logins": 24,"wealth": 82830700,"classify": "作家","score": 57},{"id": 10061,"username": "user-61","sex": "男","city": "城市-61","sign": "簽名-61","experience": 884,"logins": 58,"wealth": 64928690,"classify": "詞人","score": 27},{"id": 10062,"username": "user-62","sex": "女","city": "城市-62","sign": "簽名-62","experience": 650,"logins": 77,"wealth": 6298078,"classify": "醬油","score": 31},{"id": 10063,"username": "user-63","sex": "女","city": "城市-63","sign": "簽名-63","experience": 362,"logins": 157,"wealth": 37117017,"classify": "詩人","score": 68},{"id": 10064,"username": "user-64","sex": "男","city": "城市-64","sign": "簽名-64","experience": 807,"logins": 51,"wealth": 76263262,"classify": "作家","score": 6},{"id": 10065,"username": "user-65","sex": "女","city": "城市-65","sign": "簽名-65","experience": 173,"logins": 68,"wealth": 60344147,"classify": "作家","score": 87},{"id": 10066,"username": "user-66","sex": "女","city": "城市-66","sign": "簽名-66","experience": 982,"logins": 37,"wealth": 57768166,"classify": "作家","score": 34},{"id": 10067,"username": "user-67","sex": "男","city": "城市-67","sign": "簽名-67","experience": 727,"logins": 150,"wealth": 82030578,"classify": "作家","score": 28},{"id": 10068,"username": "user-68","sex": "男","city": "城市-68","sign": "簽名-68","experience": 951,"logins": 133,"wealth": 16503371,"classify": "詞人","score": 14},{"id": 10069,"username": "user-69","sex": "女","city": "城市-69","sign": "簽名-69","experience": 484,"logins": 25,"wealth": 86801934,"classify": "詞人","score": 75}] }

7.3. 新建一個table.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 class="layui-table" lay-data="{height: 250, url:'user.json', id: 'test1'}"><thead><tr><th lay-data="{field: 'id'}">ID</th><th lay-data="{field: 'username'}">用戶名</th><th lay-data="{field: 'sex'}">性別</th><th lay-data="{field: 'city'}">城市</th><th lay-data="{field: 'sign'}">簽名</th><th lay-data="{field: 'experience'}">積分</th><th lay-data="{field: 'score'}">評分</th><th lay-data="{field: 'classify'}">職業</th><th lay-data="{field: 'wealth'}">財富</th></tr></thead></table><h2>方法渲染</h2><table id="test2"></table><h2>轉換靜態表格</h2><table lay-filter="test3"><thead><tr><th lay-data="{field: 'id'}">ID</th><th lay-data="{field: 'username'}">用戶名</th><th lay-data="{field: 'sex'}">性別</th><th lay-data="{field: 'city'}">城市</th><th lay-data="{field: 'sign'}">簽名</th><th lay-data="{field: 'experience'}">積分</th><th lay-data="{field: 'score'}">評分</th><th lay-data="{field: 'classify'}">職業</th><th lay-data="{field: 'wealth'}">財富</th></tr></thead><tbody><tr><td>10000</td><td>user-0</td><td>女</td><td>城市-0</td><td>簽名-0</td><td>255</td><td>57</td><td>作家</td><td>82830700</td></tr><tr><td>10001</td><td>user-1</td><td>男</td><td>城市-1</td><td>簽名-1</td><td>884</td><td>27</td><td>詞人</td><td>64928690</td></tr><tr><td>10002</td><td>user-2</td><td>女</td><td>城市-2</td><td>簽名-2</td><td>650</td><td>31</td><td>醬油</td><td>6298078</td></tr><tr><td>10003</td><td>user-3</td><td>女</td><td>城市-3</td><td>簽名-3</td><td>362</td><td>68</td><td>作家</td><td>37117017</td></tr><tr><td>10004</td><td>user-4</td><td>男</td><td>城市-4</td><td>簽名-4</td><td>807</td><td>6</td><td>作家</td><td>76263262</td></tr><tr><td>10005</td><td>user-5</td><td>女</td><td>城市-5</td><td>簽名-5</td><td>173</td><td>87</td><td>作家</td><td>60344147</td></tr><tr><td>10006</td><td>user-6</td><td>女</td><td>城市-6</td><td>簽名-6</td><td>982</td><td>34</td><td>作家</td><td>57768166</td></tr><tr><td>10007</td><td>user-7</td><td>男</td><td>城市-7</td><td>簽名-7</td><td>727</td><td>28</td><td>作家</td><td>82030578</td></tr><tr><td>10008</td><td>user-8</td><td>男</td><td>城市-8</td><td>簽名-8</td><td>951</td><td>14</td><td>詞人</td><td>16503371</td></tr><tr><td>10009</td><td>user-9</td><td>女</td><td>城市-9</td><td>簽名-9</td><td>484</td><td>75</td><td>詞人</td><td>86801934</td></tr></tbody></table><script type="text/javascript">layui.use('table', function(){var table = layui.table;table.render({elem: '#test2' // 指定原始table容器的選擇器,height: 300 // 設定容器高度,url: 'user.json' // 異步數據接口相關參數,cols: [[ // 設置表頭{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: '財富'}]]});// 轉換靜態表格table.init('test3', {height: 250 // 設定容器高度});});</script></body> </html>

7.4. 拷貝layui到WebContent目錄下

7.5. 運行項目, 效果圖

總結

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

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