table 數據表格文檔 - layui.table

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

模塊加載名稱(chēng)：table

快速使用

創(chuàng )建一個(gè)table實(shí)例最簡(jiǎn)單的方式是，在頁(yè)面放置一個(gè)元素 <table id="demo"></table>，然后通過(guò) table.render() 方法指定該容器，如下所示：

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

<!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;
  
  //第一個(gè)實(shí)例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/doc/layui/demo/table/user.json' //數據接口
    ,page: true //開(kāi)啟分頁(yè)
    ,cols: [[ //表頭
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用戶(hù)名', 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: '職業(yè)', width: 80}
      ,{field: 'wealth', title: '財富', width: 135, sort: true}
    ]]
  });
  
});
</script>
</body>
</html>

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

三種初始化渲染方式

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

	方式	機制	適用場(chǎng)景
01.	方法渲染	用JS方法的配置完成渲染	（推薦）無(wú)需寫(xiě)過(guò)多的 HTML，在 JS 中指定原始元素，再設定各項參數即可。
02.	自動(dòng)渲染	HTML配置，自動(dòng)渲染	無(wú)需寫(xiě)過(guò)多 JS，可專(zhuān)注于 HTML 表頭部分
03.	轉換靜態(tài)表格	轉化一段已有的表格元素	無(wú)需配置數據接口，在JS中指定表格元素，并簡(jiǎn)單地給表頭加上自定義屬性即可

方法渲染

其實(shí)這是“自動(dòng)化渲染”的手動(dòng)模式，本質(zhì)類(lèi)似，只是“方法級渲染”將基礎參數的設定放在了JS代碼中，且原始的 table 標簽只需要一個(gè) 選擇器：

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

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

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

備注：table.render()方法返回一個(gè)對象：var tableIns = table.render(options)，可用于對當前表格進(jìn)行“重載”等操作，詳見(jiàn)目錄：表格重載

自動(dòng)渲染

所謂的自動(dòng)渲染，即：在一段 table 容器中配置好相應的參數，由 table 模塊內部自動(dòng)對其完成渲染，而無(wú)需你寫(xiě)初始的渲染方法。其特點(diǎn)在上文也有闡述。你需要關(guān)注的是以下三點(diǎn)：

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

按照上述的規范寫(xiě)好table原始容器后，只要你加載了layui 的 table 模塊，就會(huì )自動(dòng)對其建立動(dòng)態(tài)的數據表格。下面是一個(gè)示例：

<table class="layui-table" lay-data="{height:315, url:'/doc/layui/demo/table/user.json', 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}">用戶(hù)名</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'}">職業(yè)</th>
      <th lay-data="{field:'wealth', sort: true}">財富</th>
    </tr>
  </thead>
</table>

轉換靜態(tài)表格

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

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

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

<table lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:100}">昵稱(chēng)</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>人生就像是一場(chǎng)修行a</td>
    </tr>
    <tr>
      <td>賢心2</td>
      <td>88</td>
      <td>人生就像是一場(chǎng)修行b</td>
    </tr>
    <tr>
      <td>賢心3</td>
      <td>33</td>
      <td>人生就像是一場(chǎng)修行c</td>
    </tr>
  </tbody>
</table>

然后執行用于轉換表格的JS方法，就可以達到目的了：

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

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

基礎參數一覽表

基礎參數并非所有都要出現，有必選也有可選，結合你的實(shí)際需求自由設定?；A參數一般出現在以下幾種場(chǎng)景中：

場(chǎng)景一：下述方法中的鍵值即為基礎參數項
table.render({
  height: 300
  ,url: '/api/data'
});
       
場(chǎng)景二：下述 lay-data 里面的內容即為基礎參數項，切記：值要用單引號
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
 
更多場(chǎng)景：下述 options 即為含有基礎參數項的對象
> table.init('filter', options); //轉化靜態(tài)表格
> var tableObj = table.render({});
  tableObj.reload(options); //重載表格

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

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

cols - 表頭參數一覽表

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

參數	類(lèi)型	說(shuō)明	示例值
field	String	設定字段名。非常重要，且是表格數據列的唯一標識	username
title	String	設定標題名稱(chēng)	用戶(hù)名
width	Number/String	設定列寬，若不填寫(xiě)，則自動(dòng)分配；若填寫(xiě)，則支持值為：數字、百分比。請結合實(shí)際情況，對不同列做不同設定。	200 30%
minWidth	Number	局部定義當前常規單元格的最小寬度（默認：60），一般用于列寬自動(dòng)分配的情況。其優(yōu)先級高于基礎參數中的 cellMinWidth	100
type	String	設定列類(lèi)型?？蛇x值有： normal（常規列，無(wú)需設定） checkbox（復選框列） radio（單選框列，layui 2.4.0 新增） numbers（序號列） space（空列）	任意一個(gè)可選值
LAY_CHECKED	Boolean	是否全選狀態(tài)（默認：false）。必須復選框列開(kāi)啟后才有效，如果設置 true，則表示復選框默認全部選中。	true
fixed	String	固定列?？蛇x值有：left（固定在左）、right（固定在右）。一旦設定，對應的列將會(huì )被固定在左或右，不隨滾動(dòng)條而滾動(dòng)。注意：如果是固定在左，該列必須放在表頭最前面；如果是固定在右，該列必須放在表頭最后面。	left（同 true） right
hide	Boolean	是否初始隱藏列，默認：false。layui 2.4.0 新增	true

totalRow	Boolean/String	是否開(kāi)啟該列的自動(dòng)合計功能，默認：false。當開(kāi)啟時(shí)，則默認由前端自動(dòng)合計當前行數據。從 layui 2.5.6 開(kāi)始：若接口直接返回了合計行數據，則優(yōu)先讀取接口合計行數據，格式如下： { "code": 0, "totalRow": { "score": "666" ,"experience": "999" }, "data": [{}, {}], "msg": "", "count": 1000 } 如上，在 totalRow 中返回所需統計的列字段名和值即可。另外，totalRow 字段同樣可以通過(guò) parseData 回調來(lái)解析成為 table 組件所規定的數據格式。從 layui 2.6.3 開(kāi)始，如果 totalRow 為一個(gè) string 類(lèi)型，則可解析為合計行的動(dòng)態(tài)模板，如： totalRow: '{{ d.TOTAL_NUMS }} 單位' //還比如只取整：'{{ parseInt(d.TOTAL_NUMS) }}'	true
totalRowText	String	用于顯示自定義的合計文本。layui 2.4.0 新增	"合計："

sort	Boolean	是否允許排序（默認：false）。如果設置 true，則在對應的表頭顯示排序icon，從而對列開(kāi)啟排序功能。注意：不推薦對值同時(shí)存在“數字和普通字符”的列開(kāi)啟排序，因為會(huì )進(jìn)入字典序比對。比如：'賢心' > '2' > '100'，這可能并不是你想要的結果，但字典序排列算法（ASCII碼比對）就是如此。	true
unresize	Boolean	是否禁用拖拽列寬（默認：false）。默認情況下會(huì )根據列類(lèi)型（type）來(lái)決定是否禁用，如復選框列，會(huì )自動(dòng)禁用。而其它普通列，默認允許拖拽列寬，當然你也可以設置 true 來(lái)禁用該功能。	false
edit	String	單元格編輯類(lèi)型（默認不開(kāi)啟）目前只支持：text（輸入框）	text
event	String	自定義單元格點(diǎn)擊事件名，以便在 tool 事件中完成對該單元格的業(yè)務(wù)處理	任意字符
style	String	自定義單元格樣式。即傳入 CSS 樣式	background-color: #5FB878; color: #fff;
align	String	單元格排列方式?？蛇x值有：left（默認）、center（居中）、right（居右）	center
colspan	Number	單元格所占列數（默認：1）。一般用于多級表頭	3
rowspan	Number	單元格所占行數（默認：1）。一般用于多級表頭	2
templet	String	自定義列模板，模板遵循 laytpl 語(yǔ)法。這是一個(gè)非常實(shí)用的功能，你可借助它實(shí)現邏輯處理，以及將原始數據轉化成其它格式，如時(shí)間戳轉化為日期字符等	詳見(jiàn)自定義模板
toolbar	String	綁定工具條模板?？稍诿啃袑牧兄谐霈F一些自定義的操作性按鈕	詳見(jiàn)行工具事件

下面是一些方法渲染和自動(dòng)渲染的配置方式：

//方法渲染：
table.render({
  cols:  [[ //標題欄
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用戶(hù)名', width: 120}
  ]]
});
 
它等價(jià)于自動(dòng)渲染：
<table class="layui-table" lay-data="{基礎參數}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}"></th>
      <th lay-data="{field:'id', width:80}">ID</th>
      <th lay-data="{field:'username', width:180}">用戶(hù)名</th>
    </tr>
  </thead>
</table>

以下是一個(gè)二級表頭的例子：

JS：
table.render({
  cols:  [[ //標題欄
    {field: 'username', title: '聯(lián)系人', width: 80, rowspan: 2} //rowspan即縱向跨越的單元格數
    ,{field: 'amount', title: '金額', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即橫跨的單元格數，這種情況下不用設置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '詳細', width: 300}
  ]]
});
 
它等價(jià)于：
<table class="layui-table" lay-data="{基礎參數}">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:80}" rowspan="2">聯(lián)系人</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>

需要說(shuō)明的是，table 組件支持無(wú)限極表頭，你可按照上述的方式繼續擴充。核心點(diǎn)在于 rowspan 和 colspan 兩個(gè)參數的使用。

templet - 自定義列模板

類(lèi)型：String，默認值：無(wú)

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

templet 提供了三種使用方式，請結合實(shí)際場(chǎng)景選擇最合適的一種：

如果自定義模版的字符量太大，我們推薦你采用【方式一】；

如果自定義模板的字符量適中，或者想更方便地調用外部方法，我們推薦你采用【方式二】；

如果自定義模板的字符量很小，我們推薦你采用【方式三】

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

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

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

<script type="text/html" id="titleTpl">
  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
 
注意：上述的 {{d.id}}、{{d.title}} 是動(dòng)態(tài)內容，它對應數據接口返回的字段名。除此之外，你還可以讀取到以下額外字段：
     序號：{{ d.LAY_INDEX }} 
     當前列的表頭信息：{{ d.LAY_COL }} （layui 2.6.8 新增）
 
由于模板遵循 laytpl 語(yǔ)法（建議細讀 laytpl文檔 ），因此在模板中你可以寫(xiě)任意腳本語(yǔ)句（如 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}}(普通用戶(hù))
  {{#  } }}
</script>

方式二：函數轉義。templet 若未函數，則返回一個(gè)參數 d（包含當前行數據及特定的額外字段）。如下所示：

table.render({
  cols: [[
    {field:'title', title: '文章標題', width: 200
      ,templet: function(d){
        console.log(d.LAY_INDEX); //得到序號。一般不常用
        console.log(d.LAY_COL); //得到當前列表頭配置信息（layui 2.6.8 新增）。一般不常用
        
        //得到當前行數據，并拼接成自定義模板
        return 'ID：'+ d.id +'，標題：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});

方式三：直接賦值模版字符。事實(shí)上，templet 也可以直接是一段 html 內容，如：

       
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
 
注意：這里一定要被一層 <div></div> 包裹，否則無(wú)法讀取到模板

toolbar - 綁定工具條模板

類(lèi)型：String，默認值：無(wú)

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

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

下述是 toolbar 對應的模板，它可以存放在頁(yè)面的任意位置：

<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 語(yǔ)法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">審核</a>
  {{#  } }}
</script>
 
注意：屬性 lay-event="" 是模板的關(guān)鍵所在，值可隨意定義。

接下來(lái)我們可以借助 table模塊的工具條事件，完成不同的操作功能：

//工具條事件
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 對象（如果有的話(huà)）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //刪除
    layer.confirm('真的刪除行么', function(index){
      obj.del(); //刪除對應行（tr）的DOM結構，并更新緩存
      layer.close(index);
      //向服務(wù)端發(fā)送刪除指令
    });
  } else if(layEvent === 'edit'){ //編輯
    //do something
    
    //同步更新緩存對應的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，頭部工具欄擴展的右側圖標。');
  }
});

異步數據參數

數據的異步請求由以下幾個(gè)參數組成：

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

parseData	數據格式解析的回調函數，用于將返回的任意數據格式解析成 table 組件規定的數據格式。 table 組件默認規定的數據格式為（參考：/doc/layui/demo/table/user.json）： { "code": 0, "msg": "", "count": 1000, "data": [{}, {}] } 很多時(shí)候，您接口返回的數據格式并不一定都符合 table 默認規定的格式，比如： { "status": 0, "message": "", "total": 180, "data": { "item": [{}, {}] } } 那么你需要借助 parseData 回調函數將其解析成 table 組件所規定的數據格式 table.render({ elem: '#demp' ,url: '' ,parseData: function(res){ //res 即為原始返回的數據 return { "code": res.status, //解析接口狀態(tài) "msg": res.message, //解析提示文本 "count": res.total, //解析數據長(cháng)度 "data": res.data.item //解析數據列表 }; } //,…… //其他參數 }); 該參數非常實(shí)用，系 layui 2.4.0 開(kāi)始新增
request	用于對分頁(yè)請求的參數：page、limit重新設定名稱(chēng)，如： table.render({ elem: '#demp' ,url: '' ,request: { pageName: 'curr' //頁(yè)碼的參數名稱(chēng)，默認：page ,limitName: 'nums' //每頁(yè)數據量的參數名，默認：limit } //,…… //其他參數 }); 那么請求數據時(shí)的參數將會(huì )變?yōu)椋? ?curr=1&nums=30
response	您還可以借助 response 參數來(lái)重新設定返回的數據格式，如： table.render({ elem: '#demp' ,url: '' ,response: { statusName: 'status' //規定數據狀態(tài)的字段名稱(chēng)，默認：code ,statusCode: 200 //規定成功的狀態(tài)碼，默認：0 ,msgName: 'hint' //規定狀態(tài)信息的字段名稱(chēng)，默認：msg ,countName: 'total' //規定數據總數的字段名稱(chēng)，默認：count ,dataName: 'rows' //規定數據列表的字段名稱(chēng)，默認：data } //,…… //其他參數 }); 那么上面所規定的格式為： { "status": 200, "hint": "", "total": 1000, "rows": [] }

注意：request 和 response 參數均為 layui 2.1.0 版本新增

調用示例：

//“方法級渲染”配置方式
table.render({ //其它參數在此省略
  url: '/api/data/'
  //where: {token: 'sasasas', id: 123} //如果無(wú)需傳遞額外參數，可不加該參數
  //method: 'post' //如果無(wú)需自定義HTTP類(lèi)型，可不加該參數
  //request: {} //如果無(wú)需自定義請求參數，可不加該參數
  //response: {} //如果無(wú)需自定義數據響應名稱(chēng)，可不加該參數
}); 
 
等價(jià)于（“自動(dòng)化渲染”配置方式）
<table class="layui-table" lay-data="{url:'/api/data/'}" lay-filter="test"> …… </table>

done - 數據渲染完的回調

類(lèi)型：Function，默認值：無(wú)

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

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

defaultToolbar - 頭部工具欄右側圖標

類(lèi)型：Array，默認值：["filter","exports","print"]

該參數可自由配置頭部工具欄右側的圖標按鈕，值為一個(gè)數組，支持以下可選值：

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

可根據值的順序顯示排版圖標，如：
defaultToolbar: ['filter', 'print', 'exports']

另外你還可以無(wú)限擴展圖標按鈕（layui 2.5.5 新增）：

table.render({ //其它參數在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '提示' //標題
    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
    ,icon: 'layui-icon-tips' //圖標類(lèi)名
  }]
});

擴展的圖標可通過(guò) toolbar 事件回調（詳見(jiàn)行工具事件），其中 layEvent 的值會(huì )在事件的回調參數中返回，以便區分不同的觸發(fā)動(dòng)作。

text - 自定義文本

類(lèi)型：Object

table 模塊會(huì )內置一些默認的文本信息，如果想修改，你可以設置以下參數達到目的。

table.render({ //其它參數在此省略
  text: {
    none: '暫無(wú)相關(guān)數據' //默認：無(wú)數據。
  }
});

initSort - 初始排序

類(lèi)型：Object，默認值：無(wú)

用于在數據表格渲染完畢時(shí)，默認按某個(gè)字段排序。注：該參數為 layui 2.1.1 新增

//“方法級渲染”配置方式
table.render({ //其它參數在此省略
  initSort: {
    field: 'id' //排序字段，對應 cols 設定的各字段名
    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默認排序
  }
});
 
等價(jià)于（“自動(dòng)化渲染”配置方式）
<table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>

height - 設定容器高度

類(lèi)型：Number/String，可選值如下：

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

示例：

//“方法級渲染”配置方式
table.render({ //其它參數在此省略
  height: 315 //固定值
}); 
table.render({ //其它參數在此省略
  height: 'full-20' //高度最大化減去差值
}); 
 
等價(jià)于（“自動(dòng)化渲染”配置方式）
<table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table>
<table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table>

設定表格外觀(guān)

控制表格外觀(guān)的主要由以下參數組成：

參數名	可選值	備注
skin	line （行邊框風(fēng)格） row （列邊框風(fēng)格） nob （無(wú)邊框風(fēng)格）	用于設定表格風(fēng)格，若使用默認風(fēng)格不設置該屬性即可
even	true/false	若不開(kāi)啟隔行背景，不設置該參數即可
size	sm （小尺寸） lg （大尺寸）	用于設定表格尺寸，若使用默認尺寸不設置該屬性即可

//“方法級渲染”配置方式
table.render({ //其它參數在此省略
  skin: 'line' //行邊框風(fēng)格
  ,even: true //開(kāi)啟隔行背景
  ,size: 'sm' //小尺寸的表格
}); 
 
等價(jià)于（“自動(dòng)化渲染”配置方式）
<table class="layui-table" lay-data="{skin:'line', even:true, size:'sm'}" lay-filter="test"> …… </table>

基礎方法

基礎用法是table模塊的關(guān)鍵組成部分，目前所開(kāi)放的所有方法如下：

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

獲取選中行

該方法可獲取到表格所有的選中行相關(guān)數據
語(yǔ)法：table.checkStatus('ID')，其中 ID 為基礎參數 id 對應的值（見(jiàn)：設定容器唯一ID），如：

【自動(dòng)化渲染】
<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 ) //表格是否全選

重置表格尺寸

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

語(yǔ)法：table.resize('ID')，其中 ID 為基礎參數 id 對應的值（見(jiàn)：設定容器唯一ID），如：

table.render({ //其它參數省略
  ,elem: '#demo'
  //,…… //其它參數
  ,id: 'idTest'
});
 
//執行表格“尺寸結構”的重置，一般寫(xiě)在對應的事件中
table.resize('idTest');

表格重載

很多時(shí)候，你需要對表格進(jìn)行重載。比如數據全局搜索。以下方法可以幫你輕松實(shí)現這類(lèi)需求（可任選一種）。

語(yǔ)法	說(shuō)明	適用場(chǎng)景
table.reload(ID, options, deep)	參數 ID 即為基礎參數id對應的值，見(jiàn)：設定容器唯一ID 參數 options 即為各項基礎參數參數 deep：是否采用深度重載（即參數深度克隆，也就是重載時(shí)始終攜帶初始時(shí)及上一次重載時(shí)的參數），默認 false 注意：deep 參數為 layui 2.6.0 開(kāi)始新增。	所有渲染方式
tableIns.reload(options, deep)	參數同上 tableIns 可通過(guò) var tableIns = table.render() 得到	僅限方法級渲染

請注意：如果你在 2.6.0 之前版本已經(jīng)習慣深度重載模式的，現在請在第三個(gè)參數中，加上 true，如：

table.reload(ID, options, true); //這樣就跟 v2.5.7 及之前版本處理機制完全一樣?；蛘吣部梢韵裣旅孢@樣做：

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

重載示例：

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

//所獲得的 tableIns 即為當前容器的實(shí)例
var tableIns = table.render({
  elem: '#id'
  ,cols: [] //設置表頭
  ,url: '/api/data' //設置異步接口
  ,id: 'idTest'
}); 
 
//這里以搜索為例
tableIns.reload({
  where: { //設定異步數據接口的額外參數，任意設
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新從第 1 頁(yè)開(kāi)始
  }
});
//上述方法等價(jià)于
table.reload('idTest', {
  where: { //設定異步數據接口的額外參數，任意設
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新從第 1 頁(yè)開(kāi)始
  }
}); //只重載數據

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

導出任意數據

盡管 table 的工具欄內置了數據導出按鈕，但有時(shí)你可能需要通過(guò)方法去導出任意數據，那么可以借助以下方法：
語(yǔ)法：table.exportFile(id, data, type)

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

事實(shí)上，該方法也可以不用依賴(lài) table 的實(shí)例，可直接導出任意數據：

table.exportFile(['名字','性別','年齡'], [
  ['張三','男','20'],
  ['李四','女','18'],
  ['王五','女','19']
], 'csv'); //默認導出 csv，也可以為：xls

事件

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

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

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

觸發(fā)頭部工具欄事件

點(diǎn)擊頭部工具欄區域設定了屬性為 lay-event="" 的元素時(shí)觸發(fā)（該事件為 layui 2.4.0 開(kāi)始新增）。如：

原始容器
<table id="demo" lay-filter="test"></table>
 
工具欄模板：
<script type="text/html" id="toolbarDemo">
  <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;>
//JS 調用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo'
  //,…… //其他參數
});
 
//觸發(fā)事件
table.on('toolbar(test)', 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;
  };
});
</script>

觸發(fā)復選框選擇

點(diǎn)擊復選框時(shí)觸發(fā)，回調函數返回一個(gè) object 參數：

table.on('checkbox(test)', function(obj){
  console.log(obj); //當前行的一些常用操作集合
  console.log(obj.checked); //當前是否選中狀態(tài)
  console.log(obj.data); //選中行的相關(guān)數據
  console.log(obj.type); //如果觸發(fā)的是全選，則為：all，如果觸發(fā)的是單選，則為：one
});

觸發(fā)單選框選擇

點(diǎn)擊表格單選框時(shí)觸發(fā)，回調函數返回一個(gè) object 參數，攜帶的成員如下：

table.on('radio(test)', function(obj){ //test 是 table 標簽對應的 lay-filter 屬性
  console.log(obj); //當前行的一些常用操作集合
  console.log(obj.checked); //當前是否選中狀態(tài)
  console.log(obj.data); //選中行的相關(guān)數據
});

觸發(fā)單元格編輯

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

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

觸發(fā)行單雙擊事件

點(diǎn)擊或雙擊行時(shí)觸發(fā)。該事件為 layui 2.4.0 開(kāi)始新增

//觸發(fā)行單擊事件
table.on('row(test)', function(obj){
  console.log(obj.tr) //得到當前行元素對象
  console.log(obj.data) //得到當前行數據
  //obj.del(); //刪除當前行
  //obj.update(fields) //修改當前行數據
});
 
//觸發(fā)行雙擊事件
table.on('rowDouble(test)', function(obj){
  //obj 同上
});

觸發(fā)行中工具條點(diǎn)擊事件

具體用法見(jiàn)：綁定工具條

觸發(fā)排序切換

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

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

結語(yǔ)

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

layui - 在每一個(gè)細節中，用心與你溝通

欧美AV无码一区二区,麻豆+无码+国产在线+观看,欧美狂躁少妇XXXX高潮无码,美女扒开屁股让男人桶免费观看,极品粉嫩国产18尤物在线播放

 table 數據表格文檔 - layui.table

table 數據表格文檔 - layui.table