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

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

模塊加載名稱：table

快速使用

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

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

<!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' //數(shù)據(jù)接口
    ,page: true //開(kāi)啟分頁(yè)
    ,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: '評(píng)分', width: 80, sort: true}
      ,{field: 'classify', title: '職業(yè)', width: 80}
      ,{field: 'wealth', title: '財(cái)富', width: 135, sort: true}
    ]]
  });
  
});
</script>
</body>
</html>

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

三種初始化渲染方式

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

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

方法渲染

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

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

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

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

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

自動(dòng)渲染

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

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

按照上述的規(guī)范寫(xiě)好table原始容器后，只要你加載了layui 的 table 模塊，就會(huì)自動(dòng)對(duì)其建立動(dòng)態(tài)的數(shù)據(jù)表格。下面是一個(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}">用戶名</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}">評(píng)分</th>
      <th lay-data="{field:'classify'}">職業(yè)</th>
      <th lay-data="{field:'wealth', sort: true}">財(cái)富</th>
    </tr>
  </thead>
</table>

轉(zhuǎn)換靜態(tài)表格

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

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

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

<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>人生就像是一場(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>

然后執(zhí)行用于轉(zhuǎn)換表格的JS方法，就可以達(dá)到目的了：

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

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

基礎(chǔ)參數(shù)一覽表

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

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

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

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

cols - 表頭參數(shù)一覽表

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

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

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

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

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

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

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

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

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

templet - 自定義列模板

類型：String，默認(rèn)值：無(wú)

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

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

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

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

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

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

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

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

<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)內(nèi)容，它對(duì)應(yīng)數(shù)據(jù)接口返回的字段名。除此之外，你還可以讀取到以下額外字段：
     序號(hào)：{{ d.LAY_INDEX }} 
     當(dāng)前列的表頭信息：{{ d.LAY_COL }} （layui 2.6.8 新增）
 
由于模板遵循 laytpl 語(yǔ)法（建議細(xì)讀 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}}(普通用戶)
  {{#  } }}
</script>

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

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

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

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

toolbar - 綁定工具條模板

類型：String，默認(rèn)值：無(wú)

通常你需要在表格的每一行加上查看、編輯、刪除這樣類似的操作按鈕，而 tool 參數(shù)就是為此而生，你因此可以非常便捷地實(shí)現(xiàn)各種操作功能。tool 參數(shù)和 templet 參數(shù)的使用方式完全類似，通常接受的是一個(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 對(duì)應(yīng)的模板，它可以存放在頁(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="對(duì)應(yīng)的值"
  var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)
  var layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值（也可以是表頭的 event 參數(shù)對(duì)應(yīng)的值）
  var tr = obj.tr; //獲得當(dāng)前行 tr 的 DOM 對(duì)象（如果有的話）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //刪除
    layer.confirm('真的刪除行么', function(index){
      obj.del(); //刪除對(duì)應(yīng)行（tr）的DOM結(jié)構(gòu)，并更新緩存
      layer.close(index);
      //向服務(wù)端發(fā)送刪除指令
    });
  } else if(layEvent === 'edit'){ //編輯
    //do something
    
    //同步更新緩存對(duì)應(yīng)的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，頭部工具欄擴(kuò)展的右側(cè)圖標(biāo)。');
  }
});

異步數(shù)據(jù)參數(shù)

數(shù)據(jù)的異步請(qǐng)求由以下幾個(gè)參數(shù)組成：

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

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

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

調(diào)用示例：

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

done - 數(shù)據(jù)渲染完的回調(diào)

類型：Function，默認(rèn)值：無(wú)

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

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

defaultToolbar - 頭部工具欄右側(cè)圖標(biāo)

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

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

filter: 顯示篩選圖標(biāo)
exports: 顯示導(dǎo)出圖標(biāo)
print: 顯示打印圖標(biāo)

可根據(jù)值的順序顯示排版圖標(biāo)，如：
defaultToolbar: ['filter', 'print', 'exports']

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

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

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

text - 自定義文本

類型：Object

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

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

initSort - 初始排序

類型：Object，默認(rèn)值：無(wú)

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

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

height - 設(shè)定容器高度

類型：Number/String，可選值如下：

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

示例：

//“方法級(jí)渲染”配置方式
table.render({ //其它參數(shù)在此省略
  height: 315 //固定值
}); 
table.render({ //其它參數(shù)在此省略
  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>

設(shè)定表格外觀

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

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

//“方法級(jí)渲染”配置方式
table.render({ //其它參數(shù)在此省略
  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>

基礎(chǔ)方法

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

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

獲取選中行

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

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

var checkStatus = table.checkStatus('idTest'); //idTest 即為基礎(chǔ)參數(shù) id 對(duì)應(yīng)的值
 
console.log(checkStatus.data) //獲取選中行的數(shù)據(jù)
console.log(checkStatus.data.length) //獲取選中行數(shù)量，可作為是否有選中行的條件
console.log(checkStatus.isAll ) //表格是否全選

重置表格尺寸

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

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

table.render({ //其它參數(shù)省略
  ,elem: '#demo'
  //,…… //其它參數(shù)
  ,id: 'idTest'
});
 
//執(zhí)行表格“尺寸結(jié)構(gòu)”的重置，一般寫(xiě)在對(duì)應(yīng)的事件中
table.resize('idTest');

表格重載

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

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

請(qǐng)注意：如果你在 2.6.0 之前版本已經(jīng)習(xí)慣深度重載模式的，現(xiàn)在請(qǐng)?jiān)诘谌齻€(gè)參數(shù)中，加上 true，如：
table.reload(ID, options, true); //這樣就跟 v2.5.7 及之前版本處理機(jī)制完全一樣?；蛘吣部梢韵裣旅孢@樣做：
//由于 2.6.0 之前的版本是采用深重載，
//所以如果您之前真實(shí)采用了深重載機(jī)制，那么建議將以下代碼放入您的全局位置，從而可對(duì)老項(xiàng)目起到兼容作用
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)有采用深重載機(jī)制，也可以不放。不放甚至可以解決你之前因?yàn)槎啻?reload 而帶來(lái)的各種參數(shù)重疊問(wèn)題       
        

重載示例：

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

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

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

導(dǎo)出任意數(shù)據(jù)

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

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

事實(shí)上，該方法也可以不用依賴 table 的實(shí)例，可直接導(dǎo)出任意數(shù)據(jù)：

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

事件

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

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

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

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

點(diǎn)擊頭部工具欄區(qū)域設(shè)定了屬性為 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 調(diào)用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo'
  //,…… //其他參數(shù)
});
 
//觸發(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ā)復(fù)選框選擇

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

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

觸發(fā)單選框選擇

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

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

觸發(fā)單元格編輯

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

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

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

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

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

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

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

觸發(fā)排序切換

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

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

結(jié)語(yǔ)

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

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

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

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