搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

table 數(shù)據(jù)表格文檔 - layui.table

table 模塊是我們的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的組成之一。它用于對表格進行一些列功能和動態(tài)化數(shù)據(jù)操作,涵蓋了日常業(yè)務所涉及的幾乎全部需求。支持固定表頭、固定行、固定列左/列右,支持拖拽改變列寬度,支持排序,支持多級表頭,支持單元格的自定義模板,支持對表格重載(比如搜索、條件篩選等),支持復選框,支持分頁,支持單元格編輯等等一些列功能。盡管如此,我們?nèi)詫ζ溥M行完善,在控制代碼量和性能的前提下,不定期增加更多人性化功能。table 模塊也將是 layui 重點維護的項目之一。

模塊加載名稱:table

快速使用

創(chuàng)建一個table實例最簡單的方式是,在頁面放置一個元素 <table id="demo"></table>,然后通過 table.render() 方法指定該容器,如下所示:

ID
用戶名
性別
城市
簽名
積分
評分
職業(yè)
財富

上面你已經(jīng)看到了一個簡單數(shù)據(jù)表格的基本樣子,你一定迫不及待地想知道它的使用方式。下面就是它對應的代碼:

對應的代碼code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>table模塊快速使用</title>
  6. <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  7. </head>
  8. <body>
  9. <table id="demo" lay-filter="test"></table>
  10. <script src="/layui/layui.js"></script>
  11. <script>
  12. layui.use('table', function(){
  13. var table = layui.table;
  14. //第一個實例
  15. table.render({
  16. elem: '#demo'
  17. ,height: 312
  18. ,url: '/doc/layui/demo/table/user.json' //數(shù)據(jù)接口
  19. ,page: true //開啟分頁
  20. ,cols: [[ //表頭
  21. {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
  22. ,{field: 'username', title: '用戶名', width:80}
  23. ,{field: 'sex', title: '性別', width:80, sort: true}
  24. ,{field: 'city', title: '城市', width:80}
  25. ,{field: 'sign', title: '簽名', width: 177}
  26. ,{field: 'experience', title: '積分', width: 80, sort: true}
  27. ,{field: 'score', title: '評分', width: 80, sort: true}
  28. ,{field: 'classify', title: '職業(yè)', width: 80}
  29. ,{field: 'wealth', title: '財富', width: 135, sort: true}
  30. ]]
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>

一切都并不會陌生:綁定容器、設置數(shù)據(jù)接口、在表頭設定對應的字段,剩下的…就交給 layui 吧。你的牛刀是否早已饑渴難耐?那么不妨現(xiàn)在就去小試一波吧。數(shù)據(jù)接口可參考:返回的數(shù)據(jù),規(guī)則在下文也有講解。

三種初始化渲染方式

在上述“快速使用”的介紹中,你已經(jīng)初步見證了 table 模塊的信手拈來,但其使用方式并不止那一種。我們?yōu)榱藵M足各種情況下的需求,對 table 模塊做了三種初始化的支持,你可按照個人喜好和實際情況靈活使用。

方式 機制 適用場景
01. 方法渲染 用JS方法的配置完成渲染 (推薦)無需寫過多的 HTML,在 JS 中指定原始元素,再設定各項參數(shù)即可。
02. 自動渲染 HTML配置,自動渲染 無需寫過多 JS,可專注于 HTML 表頭部分
03. 轉換靜態(tài)表格 轉化一段已有的表格元素 無需配置數(shù)據(jù)接口,在JS中指定表格元素,并簡單地給表頭加上自定義屬性即可
方法渲染

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

HTMLcode

  1. <table id="demo" lay-filter="test"></table>

JavaScriptcode

  1. var table = layui.table;
  2. //執(zhí)行渲染
  3. table.render({
  4. elem: '#demo' //指定原始表格元素選擇器(推薦id選擇器)
  5. ,height: 315 //容器高度
  6. ,cols: [{}] //設置表頭
  7. //,…… //更多參數(shù)參考右側目錄:基本參數(shù)選項
  8. });

事實上我們更推薦采用“方法級渲染”的做法,其最大的優(yōu)勢在于你可以脫離HTML文件,而專注于JS本身。尤其對于項目的頻繁改動及發(fā)布,其便捷性會體現(xiàn)得更為明顯。而究竟它與“自動化渲染”的方式誰更簡單,也只能由各位猿猿們自行體味了。

備注:table.render()方法返回一個對象:var tableIns = table.render(options),可用于對當前表格進行“重載”等操作,詳見目錄:表格重載

自動渲染

所謂的自動渲染,即:在一段 table 容器中配置好相應的參數(shù),由 table 模塊內(nèi)部自動對其完成渲染,而無需你寫初始的渲染方法。其特點在上文也有闡述。你需要關注的是以下三點:

1) 帶有 class="layui-table"<table> 標簽。
2) 對標簽設置屬性 lay-data="" 用于配置一些基礎參數(shù)
3) 在 <th> 標簽中設置屬性lay-data=""用于配置表頭信息

按照上述的規(guī)范寫好table原始容器后,只要你加載了layui 的 table 模塊,就會自動對其建立動態(tài)的數(shù)據(jù)表格。下面是一個示例:

</>code

  1. <table class="layui-table" lay-data="{height:315, url:'/doc/layui/demo/table/user.json', page:true, id:'test'}" lay-filter="test">
  2. <thead>
  3. <tr>
  4. <th lay-data="{field:'id', width:80, sort: true}">ID</th>
  5. <th lay-data="{field:'username', width:80}">用戶名</th>
  6. <th lay-data="{field:'sex', width:80, sort: true}">性別</th>
  7. <th lay-data="{field:'city'}">城市</th>
  8. <th lay-data="{field:'sign'}">簽名</th>
  9. <th lay-data="{field:'experience', sort: true}">積分</th>
  10. <th lay-data="{field:'score', sort: true}">評分</th>
  11. <th lay-data="{field:'classify'}">職業(yè)</th>
  12. <th lay-data="{field:'wealth', sort: true}">財富</th>
  13. </tr>
  14. </thead>
  15. </table>
轉換靜態(tài)表格

假設你的頁面已經(jīng)存在了一段有內(nèi)容的表格,它由原始的table標簽組成,這時你需要賦予它一些動態(tài)元素,比如拖拽調整列寬?比如排序等等?那么你同樣可以很輕松地去實現(xiàn)。如下所示:

昵稱 積分 簽名
賢心1 66 人生就像是一場修行a
賢心2 88 人生就像是一場修行b
賢心3 33 人生就像是一場修行c

通過上面的小例子,你已經(jīng)初步見識了這一功能的實際意義。嘗試在你的靜態(tài)表格的 th 標簽中加上 lay-data="" 屬性,代碼如下:

HTMLcode

  1. <table lay-filter="demo">
  2. <thead>
  3. <tr>
  4. <th lay-data="{field:'username', width:100}">昵稱</th>
  5. <th lay-data="{field:'experience', width:80, sort:true}">積分</th>
  6. <th lay-data="{field:'sign'}">簽名</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>賢心1</td>
  12. <td>66</td>
  13. <td>人生就像是一場修行a</td>
  14. </tr>
  15. <tr>
  16. <td>賢心2</td>
  17. <td>88</td>
  18. <td>人生就像是一場修行b</td>
  19. </tr>
  20. <tr>
  21. <td>賢心3</td>
  22. <td>33</td>
  23. <td>人生就像是一場修行c</td>
  24. </tr>
  25. </tbody>
  26. </table>

然后執(zhí)行用于轉換表格的JS方法,就可以達到目的了:

JavaScriptcode

  1. var table = layui.table;
  2. //轉換靜態(tài)表格
  3. table.init('demo', {
  4. height: 315 //設置高度
  5. ,limit: 10 //注意:請務必確保 limit 參數(shù)(默認:10)是與你服務端限定的數(shù)據(jù)條數(shù)一致
  6. //支持所有基礎參數(shù)
  7. });

在前面的“方法渲染”和“自動渲染”兩種方式中,你的數(shù)據(jù)都來源于異步的接口,這可能并不利于所謂的seo(當然是針對于前臺頁面)。而在這里,你的數(shù)據(jù)已和頁面同步輸出,卻仍然可以轉換成動態(tài)表格,是否感受到一絲愜意呢?

基礎參數(shù)一覽表

基礎參數(shù)并非所有都要出現(xiàn),有必選也有可選,結合你的實際需求自由設定?;A參數(shù)一般出現(xiàn)在以下幾種場景中:

</>code

  1. 場景一:下述方法中的鍵值即為基礎參數(shù)項
  2. table.render({
  3. height: 300
  4. ,url: '/api/data'
  5. });
  6. 場景二:下述 lay-data 里面的內(nèi)容即為基礎參數(shù)項,切記:值要用單引號
  7. <table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
  8. 更多場景:下述 options 即為含有基礎參數(shù)項的對象
  9. > table.init('filter', options); //轉化靜態(tài)表格
  10. > var tableObj = table.render({});
  11. tableObj.reload(options); //重載表格

下面是目前 table 模塊所支持的全部參數(shù)一覽表,我們對重點參數(shù)進行了的詳細說明,你可以點擊下述表格最右側的“示例”去查看

參數(shù) 類型 說明 示例值
elem String/DOM 指定原始 table 容器的選擇器或 DOM,方法渲染方式必填 "#demo"
cols Array 設置表頭。值是一個二維數(shù)組。方法渲染方式必填 詳見表頭參數(shù)
url(等) - 異步數(shù)據(jù)接口相關參數(shù)。其中 url 參數(shù)為必填項 詳見異步參數(shù)
toolbar String/DOM/Boolean 開啟表格頭部工具欄區(qū)域,該參數(shù)支持四種類型值:
  • toolbar: '#toolbarDemo' //指向自定義工具欄模板選擇器
  • toolbar: '<div>xxx</div>' //直接傳入工具欄模板字符
  • toolbar: true //僅開啟工具欄,不顯示左側模板
  • toolbar: 'default' //讓工具欄左側顯示默認的內(nèi)置模板
注意:
1. 該參數(shù)為 layui 2.4.0 開始新增。
2. 若需要“列顯示隱藏”、“導出”、“打印”等功能,則必須開啟該參數(shù)
false
defaultToolbar Array 該參數(shù)可自由配置頭部工具欄右側的圖標按鈕 詳見頭工具欄圖標
width Number 設定容器寬度。table容器的默認寬度是跟隨它的父元素鋪滿,你也可以設定一個固定值,當容器中的內(nèi)容超出了該寬度時,會自動出現(xiàn)橫向滾動條。 1000
height Number/String 設定容器高度 詳見height
cellMinWidth Number (layui 2.2.1 新增)全局定義所有常規(guī)單元格的最小寬度(默認:60),一般用于列寬自動分配的情況。其優(yōu)先級低于表頭參數(shù)中的 minWidth 100
done Function 數(shù)據(jù)渲染完的回調。你可以借此做一些其它的操作 詳見 done 回調
error Function 數(shù)據(jù)請求失敗的回調,返回兩個參數(shù):錯誤對象、內(nèi)容
layui 2.6.0 新增
-
data Array 直接賦值數(shù)據(jù)。既適用于只展示一頁數(shù)據(jù),也非常適用于對一段已知數(shù)據(jù)進行多頁展示。 [{}, {}, {}, {}, …]
escape Boolean 是否開啟 xss 字符過濾(默認 false)layui 2.6.8 新增 true
totalRow Boolean/String 是否開啟合計行區(qū)域 false
page Boolean/Object 開啟分頁(默認:false)。支持傳入一個對象,里面可包含 laypage 組件所有支持的參數(shù)(jump、elem除外) {theme: '#c00'}
limit Number 每頁顯示的條數(shù)(默認 10)。值需對應 limits 參數(shù)的選項。
注意:優(yōu)先級低于 page 參數(shù)中的 limit 參數(shù)
30
limits Array 每頁條數(shù)的選擇項,默認:[10,20,30,40,50,60,70,80,90]。
注意:優(yōu)先級低于 page 參數(shù)中的 limits 參數(shù)
[30,60,90]
loading Boolean 是否顯示加載條(默認 true)。若為 false,則在切換分頁時,不會出現(xiàn)加載條。該參數(shù)只適用于 url 參數(shù)開啟的方式 false
title String 定義 table 的大標題(在文件導出等地方會用到) "用戶表"
text Object 自定義文本,如空數(shù)據(jù)時的異常提示等。 詳見自定義文本
autoSort Boolean 默認 true,即直接由 table 組件在前端自動處理排序。
若為 false,則需自主排序,即由服務端返回排序好的數(shù)據(jù)
詳見事件排序
initSort Object 初始排序狀態(tài)。
用于在數(shù)據(jù)表格渲染完畢時,默認按某個字段排序。
詳見初始排序
id String 設定容器唯一 id。id 是對表格的數(shù)據(jù)操作方法上是必要的傳遞條件,它是表格容器的索引,你在下文諸多地方都將會見識它的存在。

另外,若該參數(shù)未設置,則默認從 <table id="test"></table> 中的 id 屬性值中獲取。
test
skin(等) - 設定表格各種外觀、尺寸等 詳見表格風格
cols - 表頭參數(shù)一覽表

相信我,在你還尚無法駕馭 layui table 的時候,你的所有焦點都應放在這里,它帶引領你完成許多可見和不可見甚至你無法想象的工作。如果你采用的是方法渲染,cols 是一個二維數(shù)組,表頭參數(shù)設定在數(shù)組內(nèi);如果你采用的自動渲染,表頭參數(shù)的設定應放在 <th> 標簽上

參數(shù) 類型 說明 示例值
field String 設定字段名。非常重要,且是表格數(shù)據(jù)列的唯一標識 username
title String 設定標題名稱 用戶名
width Number/String 設定列寬,若不填寫,則自動分配;若填寫,則支持值為:數(shù)字、百分比。
請結合實際情況,對不同列做不同設定。
200
30%
minWidth Number 局部定義當前常規(guī)單元格的最小寬度(默認:60),一般用于列寬自動分配的情況。其優(yōu)先級高于基礎參數(shù)中的 cellMinWidth 100
type String 設定列類型。可選值有:
  • normal(常規(guī)列,無需設定)
  • checkbox(復選框列)
  • radio(單選框列,layui 2.4.0 新增
  • numbers(序號列)
  • space(空列)
任意一個可選值
LAY_CHECKED Boolean 是否全選狀態(tài)(默認:false)。必須復選框列開啟后才有效,如果設置 true,則表示復選框默認全部選中。 true
fixed String 固定列??蛇x值有:left(固定在左)、right(固定在右)。一旦設定,對應的列將會被固定在左或右,不隨滾動條而滾動。
注意: 如果是固定在左,該列必須放在表頭最前面;如果是固定在右,該列必須放在表頭最后面。
left(同 true)
right
hide Boolean 是否初始隱藏列,默認:false。layui 2.4.0 新增 true
totalRow Boolean/String
  • 是否開啟該列的自動合計功能,默認:false。
  • 當開啟時,則默認由前端自動合計當前行數(shù)據(jù)。從 layui 2.5.6 開始: 若接口直接返回了合計行數(shù)據(jù),則優(yōu)先讀取接口合計行數(shù)據(jù),格式如下:

</>code

  1. {
  2. "code": 0,
  3. "totalRow": {
  4. "score": "666"
  5. ,"experience": "999"
  6. },
  7. "data": [{}, {}],
  8. "msg": "",
  9. "count": 1000
  10. }

如上,在 totalRow 中返回所需統(tǒng)計的列字段名和值即可。
另外,totalRow 字段同樣可以通過 parseData 回調來解析成為 table 組件所規(guī)定的數(shù)據(jù)格式。

  • 從 layui 2.6.3 開始,如果 totalRow 為一個 string 類型,則可解析為合計行的動態(tài)模板,如:

</>code

  1. totalRow: '{{ d.TOTAL_NUMS }} 單位'
  2. //還比如只取整:'{{ parseInt(d.TOTAL_NUMS) }}'
true
totalRowText String 用于顯示自定義的合計文本。layui 2.4.0 新增 "合計:"
sort Boolean 是否允許排序(默認:false)。如果設置 true,則在對應的表頭顯示排序icon,從而對列開啟排序功能。

注意:不推薦對值同時存在“數(shù)字和普通字符”的列開啟排序,因為會進入字典序比對。比如:'賢心' > '2' > '100',這可能并不是你想要的結果,但字典序排列算法(ASCII碼比對)就是如此。

true
unresize Boolean 是否禁用拖拽列寬(默認:false)。默認情況下會根據(jù)列類型(type)來決定是否禁用,如復選框列,會自動禁用。而其它普通列,默認允許拖拽列寬,當然你也可以設置 true 來禁用該功能。 false
edit String 單元格編輯類型(默認不開啟)目前只支持:text(輸入框) text
event String 自定義單元格點擊事件名,以便在 tool 事件中完成對該單元格的業(yè)務處理 任意字符
style String 自定義單元格樣式。即傳入 CSS 樣式 background-color: #5FB878; color: #fff;
align String 單元格排列方式??蛇x值有:left(默認)、center(居中)、right(居右) center
colspan Number 單元格所占列數(shù)(默認:1)。一般用于多級表頭 3
rowspan Number 單元格所占行數(shù)(默認:1)。一般用于多級表頭 2
templet String 自定義列模板,模板遵循 laytpl 語法。這是一個非常實用的功能,你可借助它實現(xiàn)邏輯處理,以及將原始數(shù)據(jù)轉化成其它格式,如時間戳轉化為日期字符等 詳見自定義模板
toolbar String 綁定工具條模板??稍诿啃袑牧兄谐霈F(xiàn)一些自定義的操作性按鈕 詳見行工具事件

下面是一些方法渲染和自動渲染的配置方式:

</>code

  1. //方法渲染:
  2. table.render({
  3. cols: [[ //標題欄
  4. {checkbox: true}
  5. ,{field: 'id', title: 'ID', width: 80}
  6. ,{field: 'username', title: '用戶名', width: 120}
  7. ]]
  8. });
  9. 它等價于自動渲染:
  10. <table class="layui-table" lay-data="{基礎參數(shù)}" lay-filter="test">
  11. <thead>
  12. <tr>
  13. <th lay-data="{checkbox:true}"></th>
  14. <th lay-data="{field:'id', width:80}">ID</th>
  15. <th lay-data="{field:'username', width:180}">用戶名</th>
  16. </tr>
  17. </thead>
  18. </table>

以下是一個二級表頭的例子:

</>code

  1. JS:
  2. table.render({
  3. cols: [[ //標題欄
  4. {field: 'username', title: '聯(lián)系人', width: 80, rowspan: 2} //rowspan即縱向跨越的單元格數(shù)
  5. ,{field: 'amount', title: '金額', width: 80, rowspan: 2}
  6. ,{align: 'center', title: '地址', colspan: 3} //colspan即橫跨的單元格數(shù),這種情況下不用設置field和width
  7. ], [
  8. {field: 'province', title: '省', width: 80}
  9. ,{field: 'city', title: '市', width: 120}
  10. ,{field: 'county', title: '詳細', width: 300}
  11. ]]
  12. });
  13. 它等價于:
  14. <table class="layui-table" lay-data="{基礎參數(shù)}">
  15. <thead>
  16. <tr>
  17. <th lay-data="{field:'username', width:80}" rowspan="2">聯(lián)系人</th>
  18. <th lay-data="{field:'amount', width:120}" rowspan="2">金額</th>
  19. <th lay-data="{align:'center'}" colspan="3">地址</th>
  20. </tr>
  21. <tr>
  22. <th lay-data="{field:'province', width:80}">省</th>
  23. <th lay-data="{field:'city', width:120}">市</th>
  24. <th lay-data="{field:'county', width:300}">詳細</th>
  25. </tr>
  26. </thead>
  27. </table>

需要說明的是,table 組件支持無限極表頭,你可按照上述的方式繼續(xù)擴充。核心點在于 rowspancolspan 兩個參數(shù)的使用。

templet - 自定義列模板

類型:String,默認值:

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

templet 提供了三種使用方式,請結合實際場景選擇最合適的一種:
  • 如果自定義模版的字符量太大,我們推薦你采用【方式一】;
  • 如果自定義模板的字符量適中,或者想更方便地調用外部方法,我們推薦你采用【方式二】;
  • 如果自定義模板的字符量很小,我們推薦你采用【方式三】

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

</>code

  1. table.render({
  2. cols: [[
  3. {field:'title', title: '文章標題', width: 200, templet: '#titleTpl'} //這里的templet值是模板元素的選擇器
  4. ,{field:'id', title:'ID', width:100}
  5. ]]
  6. });
  7. 等價于:
  8. <th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章標題</th>
  9. <th lay-data="{field:'id', width:100}">ID</th>

下述是templet對應的模板,它可以存放在頁面的任意位置。模板遵循于 laytpl 語法,可讀取到返回的所有數(shù)據(jù)

HTMLcode

  1. <script type="text/html" id="titleTpl">
  2. <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
  3. </script>
  4. 注意:上述的 {{d.id}}、{{d.title}} 是動態(tài)內(nèi)容,它對應數(shù)據(jù)接口返回的字段名。除此之外,你還可以讀取到以下額外字段:
    序號:{{ d.LAY_INDEX }}
    當前列的表頭信息:{{ d.LAY_COL }} (layui 2.6.8 新增)
  5. 由于模板遵循 laytpl 語法(建議細讀 laytpl文檔 ),因此在模板中你可以寫任意腳本語句(如 if else/for等):
  6. <script type="text/html" id="titleTpl">
  7. {{# if(d.id < 100){ }}
  8. <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
  9. {{# } else { }}
  10. {{d.title}}(普通用戶)
  11. {{# } }}
  12. </script>

方式二:函數(shù)轉義。templet 若未函數(shù),則返回一個參數(shù) d(包含當前行數(shù)據(jù)及特定的額外字段)。如下所示:

</>code

  1. table.render({
  2. cols: [[
  3. {field:'title', title: '文章標題', width: 200
  4. ,templet: function(d){
  5. console.log(d.LAY_INDEX); //得到序號。一般不常用
  6. console.log(d.LAY_COL); //得到當前列表頭配置信息(layui 2.6.8 新增)。一般不常用
  7. //得到當前行數(shù)據(jù),并拼接成自定義模板
  8. return 'ID:'+ d.id +',標題:<span style="color: #c00;">'+ d.title +'</span>'
  9. }
  10. }
  11. ,{field:'id', title:'ID', width:100}
  12. ]]
  13. });

方式三:直接賦值模版字符。事實上,templet 也可以直接是一段 html 內(nèi)容,如:

</>code

  1. templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
  2. 注意:這里一定要被一層 <div></div> 包裹,否則無法讀取到模板
toolbar - 綁定工具條模板

類型:String,默認值:

通常你需要在表格的每一行加上 查看、編輯刪除 這樣類似的操作按鈕,而 tool 參數(shù)就是為此而生,你因此可以非常便捷地實現(xiàn)各種操作功能。tool 參數(shù)和 templet 參數(shù)的使用方式完全類似,通常接受的是一個選擇器,也可以是一段HTML字符。

</>code

  1. table.render({
  2. cols: [[
  3. {field:'id', title:'ID', width:100}
  4. ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //這里的toolbar值是模板元素的選擇器
  5. ]]
  6. });
  7. 等價于:
  8. <th lay-data="{field:'id', width:100}">ID</th>
  9. <th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>

下述是 toolbar 對應的模板,它可以存放在頁面的任意位置:

HTMLcode

  1. <script type="text/html" id="barDemo">
  2. <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  3. <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
  4. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
  5. <!-- 這里同樣支持 laytpl 語法,如: -->
  6. {{# if(d.auth > 2){ }}
  7. <a class="layui-btn layui-btn-xs" lay-event="check">審核</a>
  8. {{# } }}
  9. </script>
  10. 注意:屬性 lay-event="" 是模板的關鍵所在,值可隨意定義。

接下來我們可以借助 table模塊的工具條事件,完成不同的操作功能:

</>code

  1. //工具條事件
  2. table.on('tool(test)', function(obj){ //注:tool 是工具條事件名,test 是 table 原始容器的屬性 lay-filter="對應的值"
  3. var data = obj.data; //獲得當前行數(shù)據(jù)
  4. var layEvent = obj.event; //獲得 lay-event 對應的值(也可以是表頭的 event 參數(shù)對應的值
  5. var tr = obj.tr; //獲得當前行 tr 的 DOM 對象(如果有的話)
  6. if(layEvent === 'detail'){ //查看
  7. //do somehing
  8. } else if(layEvent === 'del'){ //刪除
  9. layer.confirm('真的刪除行么', function(index){
  10. obj.del(); //刪除對應行(tr)的DOM結構,并更新緩存
  11. layer.close(index);
  12. //向服務端發(fā)送刪除指令
  13. });
  14. } else if(layEvent === 'edit'){ //編輯
  15. //do something
  16. //同步更新緩存對應的值
  17. obj.update({
  18. username: '123'
  19. ,title: 'xxx'
  20. });
  21. } else if(layEvent === 'LAYTABLE_TIPS'){
  22. layer.alert('Hi,頭部工具欄擴展的右側圖標。');
  23. }
  24. });
異步數(shù)據(jù)參數(shù)

數(shù)據(jù)的異步請求由以下幾個參數(shù)組成:

參數(shù)名 功能
url 接口地址。默認會自動傳遞兩個參數(shù):?page=1&limit=30(該參數(shù)可通過 request 自定義)
page 代表當前頁碼、limit 代表每頁數(shù)據(jù)量
method 接口http請求類型,默認:get
where 接口的其它參數(shù)。如:where: {token: 'sasasas', id: 123}
contentType 發(fā)送到服務端的內(nèi)容編碼類型。如果你要發(fā)送 json 內(nèi)容,可以設置:contentType: 'application/json'
headers 接口的請求頭。如:headers: {token: 'sasasas'}
parseData

數(shù)據(jù)格式解析的回調函數(shù),用于將返回的任意數(shù)據(jù)格式解析成 table 組件規(guī)定的數(shù)據(jù)格式。

table 組件默認規(guī)定的數(shù)據(jù)格式為(參考:/doc/layui/demo/table/user.json):

默認規(guī)定的數(shù)據(jù)格式code

  1. {
  2. "code": 0,
  3. "msg": "",
  4. "count": 1000,
  5. "data": [{}, {}]
  6. }

很多時候,您接口返回的數(shù)據(jù)格式并不一定都符合 table 默認規(guī)定的格式,比如:

假設您返回的數(shù)據(jù)格式code

  1. {
  2. "status": 0,
  3. "message": "",
  4. "total": 180,
  5. "data": {
  6. "item": [{}, {}]
  7. }
  8. }

那么你需要借助 parseData 回調函數(shù)將其解析成 table 組件所規(guī)定的數(shù)據(jù)格式

</>code

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,parseData: function(res){ //res 即為原始返回的數(shù)據(jù)
  5. return {
  6. "code": res.status, //解析接口狀態(tài)
  7. "msg": res.message, //解析提示文本
  8. "count": res.total, //解析數(shù)據(jù)長度
  9. "data": res.data.item //解析數(shù)據(jù)列表
  10. };
  11. }
  12. //,…… //其他參數(shù)
  13. });

該參數(shù)非常實用,系 layui 2.4.0 開始新增

request 用于對分頁請求的參數(shù):page、limit重新設定名稱,如:

</>code

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,request: {
  5. pageName: 'curr' //頁碼的參數(shù)名稱,默認:page
  6. ,limitName: 'nums' //每頁數(shù)據(jù)量的參數(shù)名,默認:limit
  7. }
  8. //,…… //其他參數(shù)
  9. });
那么請求數(shù)據(jù)時的參數(shù)將會變?yōu)椋? ?curr=1&nums=30
response

您還可以借助 response 參數(shù)來重新設定返回的數(shù)據(jù)格式,如:

</>code

  1. table.render({
  2. elem: '#demp'
  3. ,url: ''
  4. ,response: {
  5. statusName: 'status' //規(guī)定數(shù)據(jù)狀態(tài)的字段名稱,默認:code
  6. ,statusCode: 200 //規(guī)定成功的狀態(tài)碼,默認:0
  7. ,msgName: 'hint' //規(guī)定狀態(tài)信息的字段名稱,默認:msg
  8. ,countName: 'total' //規(guī)定數(shù)據(jù)總數(shù)的字段名稱,默認:count
  9. ,dataName: 'rows' //規(guī)定數(shù)據(jù)列表的字段名稱,默認:data
  10. }
  11. //,…… //其他參數(shù)
  12. });
那么上面所規(guī)定的格式為:

重新規(guī)定的數(shù)據(jù)格式code

  1. {
  2. "status": 200,
  3. "hint": "",
  4. "total": 1000,
  5. "rows": []
  6. }

注意:request 和 response 參數(shù)均為 layui 2.1.0 版本新增

調用示例:

</>code

  1. //“方法級渲染”配置方式
  2. table.render({ //其它參數(shù)在此省略
  3. url: '/api/data/'
  4. //where: {token: 'sasasas', id: 123} //如果無需傳遞額外參數(shù),可不加該參數(shù)
  5. //method: 'post' //如果無需自定義HTTP類型,可不加該參數(shù)
  6. //request: {} //如果無需自定義請求參數(shù),可不加該參數(shù)
  7. //response: {} //如果無需自定義數(shù)據(jù)響應名稱,可不加該參數(shù)
  8. });
  9. 等價于(“自動化渲染”配置方式)
  10. <table class="layui-table" lay-data="{url:'/api/data/'}" lay-filter="test"> …… </table>
done - 數(shù)據(jù)渲染完的回調

類型:Function,默認值:

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

</>code

  1. table.render({ //其它參數(shù)在此省略
  2. done: function(res, curr, count){
  3. //如果是異步請求數(shù)據(jù)方式,res即為你接口返回的信息。
  4. //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當前頁數(shù)據(jù)、count為數(shù)據(jù)總長度
  5. console.log(res);
  6. //得到當前頁碼
  7. console.log(curr);
  8. //得到數(shù)據(jù)總量
  9. console.log(count);
  10. }
  11. });
defaultToolbar - 頭部工具欄右側圖標

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

該參數(shù)可自由配置頭部工具欄右側的圖標按鈕,值為一個數(shù)組,支持以下可選值:
  • filter: 顯示篩選圖標
  • exports: 顯示導出圖標
  • print: 顯示打印圖標

可根據(jù)值的順序顯示排版圖標,如:

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

另外你還可以無限擴展圖標按鈕(layui 2.5.5 新增):

</>code

  1. table.render({ //其它參數(shù)在此省略
  2. defaultToolbar: ['filter', 'print', 'exports', {
  3. title: '提示' //標題
  4. ,layEvent: 'LAYTABLE_TIPS' //事件名,用于 toolbar 事件中使用
  5. ,icon: 'layui-icon-tips' //圖標類名
  6. }]
  7. });

擴展的圖標可通過 toolbar 事件回調(詳見行工具事件),其中 layEvent 的值會在事件的回調參數(shù)中返回,以便區(qū)分不同的觸發(fā)動作。

text - 自定義文本

類型:Object

table 模塊會內(nèi)置一些默認的文本信息,如果想修改,你可以設置以下參數(shù)達到目的。

</>code

  1. table.render({ //其它參數(shù)在此省略
  2. text: {
  3. none: '暫無相關數(shù)據(jù)' //默認:無數(shù)據(jù)。
  4. }
  5. });
initSort - 初始排序

類型:Object,默認值:

用于在數(shù)據(jù)表格渲染完畢時,默認按某個字段排序。注:該參數(shù)為 layui 2.1.1 新增

</>code

  1. //“方法級渲染”配置方式
  2. table.render({ //其它參數(shù)在此省略
  3. initSort: {
  4. field: 'id' //排序字段,對應 cols 設定的各字段名
  5. ,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默認排序
  6. }
  7. });
  8. 等價于(“自動化渲染”配置方式)
  9. <table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>
height - 設定容器高度

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

可選值 說明 示例
不填寫 默認情況。高度隨數(shù)據(jù)列表而適應,表格容器不會出現(xiàn)縱向滾動條 -
固定值 設定一個數(shù)字,用于定義容器高度,當容器中的內(nèi)容超出了該高度時,會自動出現(xiàn)縱向滾動條 height: 315
full-差值 高度將始終鋪滿,無論瀏覽器尺寸如何。這是一個特定的語法格式,其中 full 是固定的,而 差值 則是一個數(shù)值,這需要你來預估,比如:表格容器距離瀏覽器頂部和底部的距離“和”
PS:該功能為 layui 2.1.0 版本中新增
height: 'full-20'

示例:

</>code

  1. //“方法級渲染”配置方式
  2. table.render({ //其它參數(shù)在此省略
  3. height: 315 //固定值
  4. });
  5. table.render({ //其它參數(shù)在此省略
  6. height: 'full-20' //高度最大化減去差值
  7. });
  8. 等價于(“自動化渲染”配置方式)
  9. <table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table>
  10. <table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table>
設定表格外觀

控制表格外觀的主要由以下參數(shù)組成:

參數(shù)名 可選值 備注
skin line (行邊框風格)
row (列邊框風格)
nob (無邊框風格)
用于設定表格風格,若使用默認風格不設置該屬性即可
even true/false 若不開啟隔行背景,不設置該參數(shù)即可
size sm (小尺寸)
lg (大尺寸)
用于設定表格尺寸,若使用默認尺寸不設置該屬性即可

</>code

  1. //“方法級渲染”配置方式
  2. table.render({ //其它參數(shù)在此省略
  3. skin: 'line' //行邊框風格
  4. ,even: true //開啟隔行背景
  5. ,size: 'sm' //小尺寸的表格
  6. });
  7. 等價于(“自動化渲染”配置方式)
  8. <table class="layui-table" lay-data="{skin:'line', even:true, size:'sm'}" lay-filter="test"> …… </table>
基礎方法

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

</>code

  1. > table.set(options); //設定全局默認參數(shù)。options即各項基礎參數(shù)
  2. > table.on('event(filter)', callback); //事件。event為內(nèi)置事件名(詳見下文),filter為容器lay-filter設定的值
  3. > table.init(filter, options); //filter為容器lay-filter設定的值,options即各項基礎參數(shù)。例子見:轉換靜態(tài)表格
  4. > table.checkStatus(id); //獲取表格選中行(下文會有詳細介紹)。id 即為 id 參數(shù)對應的值
  5. > table.render(options); //用于表格方法級渲染,核心方法。應該不用再過多解釋了,詳見:方法級渲染
  6. > table.reload(id, options, deep); //表格重載
  7. > table.resize(id); //重置表格尺寸
  8. > table.exportFile(id, data, type); //導出數(shù)據(jù)
  9. > table.getData(id); //用于獲取表格當前頁的所有行數(shù)據(jù)(layui 2.6.0 開始新增)
獲取選中行

該方法可獲取到表格所有的選中行相關數(shù)據(jù)
語法:table.checkStatus('ID'),其中 ID 為基礎參數(shù) id 對應的值(見:設定容器唯一ID),如:

渲染方式code

  1. 【自動化渲染】
  2. <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
  3. 【方法渲染】
  4. table.render({ //其它參數(shù)省略
  5. id: 'idTest'
  6. });

調用code

  1. var checkStatus = table.checkStatus('idTest'); //idTest 即為基礎參數(shù) id 對應的值
  2. console.log(checkStatus.data) //獲取選中行的數(shù)據(jù)
  3. console.log(checkStatus.data.length) //獲取選中行數(shù)量,可作為是否有選中行的條件
  4. console.log(checkStatus.isAll ) //表格是否全選
重置表格尺寸

該方法可重置表格尺寸和結構,其內(nèi)部完成了:固定列高度平鋪、動態(tài)分配列寬、容器滾動條寬高補丁 等操作。它一般用于特殊情況下(如“非窗口 resize”導致的表格父容器寬度變化而引發(fā)的列寬適配異常),以保證表格在此類特殊情況下依舊能友好展示。

語法:table.resize('ID'),其中 ID 為基礎參數(shù) id 對應的值(見:設定容器唯一ID),如:

</>code

  1. table.render({ //其它參數(shù)省略
  2. ,elem: '#demo'
  3. //,…… //其它參數(shù)
  4. ,id: 'idTest'
  5. });
  6. //執(zhí)行表格“尺寸結構”的重置,一般寫在對應的事件中
  7. table.resize('idTest');
表格重載

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

語法 說明 適用場景
table.reload(ID, options, deep) 參數(shù) ID 即為基礎參數(shù)id對應的值,見:設定容器唯一ID
參數(shù) options 即為各項基礎參數(shù)
參數(shù) deep:是否采用深度重載(即參數(shù)深度克隆,也就是重載時始終攜帶初始時及上一次重載時的參數(shù)),默認 false
注意:deep 參數(shù)為 layui 2.6.0 開始新增。
所有渲染方式
tableIns.reload(options, deep) 參數(shù)同上
tableIns 可通過 var tableIns = table.render() 得到
僅限方法級渲染
請注意:如果你在 2.6.0 之前版本已經(jīng)習慣深度重載模式的,現(xiàn)在請在第三個參數(shù)中,加上 true,如:
table.reload(ID, options, true); //這樣就跟 v2.5.7 及之前版本處理機制完全一樣?;蛘吣部梢韵裣旅孢@樣做:

</>code

  1. //由于 2.6.0 之前的版本是采用深重載,
  2. //所以如果您之前真實采用了深重載機制,那么建議將以下代碼放入您的全局位置,從而可對老項目起到兼容作用
  3. var tableReload = table.reload;
  4. table.reload = function(){
  5. var args = [];
  6. layui.each(arguments, function(index, item){
  7. args.push(item);
  8. });
  9. args[2] === undefined && (args[2] = true);
  10. return tableReload.apply(null, args);
  11. };
  12. //但如果你之前沒有采用深重載機制,也可以不放。不放甚至可以解決你之前因為多次 reload 而帶來的各種參數(shù)重疊問題

重載示例:

示例1:自動化渲染的重載code

  1. 【HTML】
  2. <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
  3. 【JS】
  4. table.reload('idTest', {
  5. url: '/api/table/search'
  6. ,where: {} //設定異步數(shù)據(jù)接口的額外參數(shù)
  7. //,height: 300
  8. });

示例2:方法級渲染的重載code

  1. //所獲得的 tableIns 即為當前容器的實例
  2. var tableIns = table.render({
  3. elem: '#id'
  4. ,cols: [] //設置表頭
  5. ,url: '/api/data' //設置異步接口
  6. ,id: 'idTest'
  7. });
  8. //這里以搜索為例
  9. tableIns.reload({
  10. where: { //設定異步數(shù)據(jù)接口的額外參數(shù),任意設
  11. aaaaaa: 'xxx'
  12. ,bbb: 'yyy'
  13. //…
  14. }
  15. ,page: {
  16. curr: 1 //重新從第 1 頁開始
  17. }
  18. });
  19. //上述方法等價于
  20. table.reload('idTest', {
  21. where: { //設定異步數(shù)據(jù)接口的額外參數(shù),任意設
  22. aaaaaa: 'xxx'
  23. ,bbb: 'yyy'
  24. //…
  25. }
  26. ,page: {
  27. curr: 1 //重新從第 1 頁開始
  28. }
  29. }); //只重載數(shù)據(jù)

注意:這里的表格重載是指對表格重新進行渲染,包括數(shù)據(jù)請求和基礎參數(shù)的讀取

導出任意數(shù)據(jù)

盡管 table 的工具欄內(nèi)置了數(shù)據(jù)導出按鈕,但有時你可能需要通過方法去導出任意數(shù)據(jù),那么可以借助以下方法:
語法:table.exportFile(id, data, type)

</>code

  1. var ins1 = table.render({
  2. elem: '#demo'
  3. ,id: 'test'
  4. //,…… //其它參數(shù)
  5. })
  6. //將上述表格示例導出為 csv 文件
  7. table.exportFile(ins1.config.id, data); //data 為該實例中的任意數(shù)量的數(shù)據(jù)

事實上,該方法也可以不用依賴 table 的實例,可直接導出任意數(shù)據(jù):

</>code

  1. table.exportFile(['名字','性別','年齡'], [
  2. ['張三','男','20'],
  3. ['李四','女','18'],
  4. ['王五','女','19']
  5. ], 'csv'); //默認導出 csv,也可以為:xls
事件

語法:table.on('event(filter)', callback);
注:event 為內(nèi)置事件名,filter 為容器 lay-filter 設定的值
目前所支持的所有事件見下文

默認情況下,事件所觸發(fā)的是全部的table模塊容器,但如果你只想觸發(fā)某一個容器,使用事件過濾器即可。
假設原始容器為:<table class="layui-table" lay-filter="test"></table> 那么你的事件寫法如下:

</>code

  1. //以復選框事件為例
  2. table.on('checkbox(test)', function(obj){
  3. console.log(obj)
  4. });
觸發(fā)頭部工具欄事件

點擊頭部工具欄區(qū)域設定了屬性為 lay-event="" 的元素時觸發(fā)(該事件為 layui 2.4.0 開始新增)。如:

</>code

  1. 原始容器
  2. <table id="demo" lay-filter="test"></table>
  3. 工具欄模板:
  4. <script type="text/html" id="toolbarDemo">
  5. <div class="layui-btn-container">
  6. <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  7. <button class="layui-btn layui-btn-sm" lay-event="delete">刪除</button>
  8. <button class="layui-btn layui-btn-sm" lay-event="update">編輯</button>
  9. </div>
  10. </script>
  11. <script;>
  12. //JS 調用:
  13. table.render({
  14. elem: '#demo'
  15. ,toolbar: '#toolbarDemo'
  16. //,…… //其他參數(shù)
  17. });
  18. //觸發(fā)事件
  19. table.on('toolbar(test)', function(obj){
  20. var checkStatus = table.checkStatus(obj.config.id);
  21. switch(obj.event){
  22. case 'add':
  23. layer.msg('添加');
  24. break;
  25. case 'delete':
  26. layer.msg('刪除');
  27. break;
  28. case 'update':
  29. layer.msg('編輯');
  30. break;
  31. };
  32. });
  33. </script>
觸發(fā)復選框選擇

點擊復選框時觸發(fā),回調函數(shù)返回一個 object 參數(shù):

</>code

  1. table.on('checkbox(test)', function(obj){
  2. console.log(obj); //當前行的一些常用操作集合
  3. console.log(obj.checked); //當前是否選中狀態(tài)
  4. console.log(obj.data); //選中行的相關數(shù)據(jù)
  5. console.log(obj.type); //如果觸發(fā)的是全選,則為:all,如果觸發(fā)的是單選,則為:one
  6. });
觸發(fā)單選框選擇

點擊表格單選框時觸發(fā),回調函數(shù)返回一個 object 參數(shù),攜帶的成員如下:

</>code

  1. table.on('radio(test)', function(obj){ //test 是 table 標簽對應的 lay-filter 屬性
  2. console.log(obj); //當前行的一些常用操作集合
  3. console.log(obj.checked); //當前是否選中狀態(tài)
  4. console.log(obj.data); //選中行的相關數(shù)據(jù)
  5. });
觸發(fā)單元格編輯

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

</>code

  1. table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的屬性 lay-filter="對應的值"
  2. console.log(obj.value); //得到修改后的值
  3. console.log(obj.field); //當前編輯的字段名
  4. console.log(obj.data); //所在行的所有相關數(shù)據(jù)
  5. });
觸發(fā)行單雙擊事件

點擊或雙擊行時觸發(fā)。該事件為 layui 2.4.0 開始新增

</>code

  1. //觸發(fā)行單擊事件
  2. table.on('row(test)', function(obj){
  3. console.log(obj.tr) //得到當前行元素對象
  4. console.log(obj.data) //得到當前行數(shù)據(jù)
  5. //obj.del(); //刪除當前行
  6. //obj.update(fields) //修改當前行數(shù)據(jù)
  7. });
  8. //觸發(fā)行雙擊事件
  9. table.on('rowDouble(test)', function(obj){
  10. //obj 同上
  11. });
觸發(fā)行中工具條點擊事件

具體用法見:綁定工具條

觸發(fā)排序切換

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

</>code

  1. //禁用前端自動排序,以便由服務端直接返回排序好的數(shù)據(jù)
  2. table.render({
  3. elem: '#id'
  4. ,autoSort: false //禁用前端自動排序。注意:該參數(shù)為 layui 2.4.4 新增
  5. //,… //其它參數(shù)省略
  6. });
  7. //觸發(fā)排序事件
  8. table.on('sort(test)', function(obj){ //注:sort 是工具條事件名,test 是 table 原始容器的屬性 lay-filter="對應的值"
  9. console.log(obj.field); //當前排序的字段名
  10. console.log(obj.type); //當前排序類型:desc(降序)、asc(升序)、null(空對象,默認排序)
  11. console.log(this); //當前排序的 th 對象
  12. //盡管我們的 table 自帶排序功能,但并沒有請求服務端。
  13. //有些時候,你可能需要根據(jù)當前排序的字段,重新向服務端發(fā)送請求,從而實現(xiàn)服務端排序,如:
  14. table.reload('idTest', {
  15. initSort: obj //記錄初始排序,如果不設的話,將無法標記表頭的排序狀態(tài)。
  16. ,where: { //請求參數(shù)(注意:這里面的參數(shù)可任意定義,并非下面固定的格式)
  17. field: obj.field //排序字段
  18. ,order: obj.type //排序方式
  19. }
  20. });
  21. layer.msg('服務端排序。order by '+ obj.field + ' ' + obj.type);
  22. });
結語

table 模塊自推出以來,因某些功能的缺失,一度飽受非議,也背負了各種莫須有的鍋,然而我始終未曾放棄對它的優(yōu)化。為了迎合 layui 開箱即用的理念,我的工作并不是那么輕松。無論是從代碼,還是文檔和示例的撰寫上,我都進行了多次調整,為的只是它能被更多人認可?!t心

layui - 在每一個細節(jié)中,用心與你溝通