layui表格——table.render(options)（轉）
一、使用方法
1、在頁面代碼裏寫一個table標簽和id屬性
<table id="demo" lay-filter="test"></table>
1
2、layui導入table模塊
layui.use(‘table‘,function(){
var table = layui.table;
table.render({
elem: ‘#demo‘, //指定原始表格元素選擇器，也可以使用id選擇器
id: ‘test‘, //表格的索引
cols: [{
//設置表頭
...
}],
//...跟多參數
});
});
1
2
3
4
5
6
7
8
9
10
11
12
以上是方法渲染表格，也可以使用自動渲染
帶有class="layui-table"的<table>標簽>
<table>標簽裏設置lay-data屬性，用於加載表的基礎屬性
在<th>標簽裏設置lay-data屬性，用於配置表頭
<table class="layui-table" lay-data="{height:315, url:‘/demo/table/user/‘, page:true, id:‘test‘}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:‘id‘, width:80, sort: true}">ID</th>
</thead>
</table>
1
2
3
4
5
6
7
2、基礎參數
基礎參數並非所有都要出現，有必選也有可選，結合你的實際需求自由設定。基礎參數一般出現在以下幾種場景中：
場景一：下述方法中的鍵值即為基礎參數項
table.render({
height: 300
,url: ‘/api/data‘
});
場景二：下述 lay-data 裏面的內容即為基礎參數項，切記：值要用單引號
<table lay-data="{height:300, url:‘/api/data‘}" lay-filter="demo"> …… </table>
更多場景：下述 options 即為含有基礎參數項的對象
> table.init(‘filter‘, options); //轉化靜態表格
> var tableObj = table.render({});
tableObj.reload(options); //重載表格
1
2
3
4
5
6
7
8
9
10
11
12
13
基礎參數表
表頭參數表
3、自定義列模板templet
類型：String，默認值：無
在默認情況下，單元格的內容是完全按照數據接口返回的content原樣輸出的，如果你想對某列的單元格添加鏈接等其它元素，你可以借助該參數來輕松實現。這是一個非常實用且強大的功能，templet提供了三種方式
綁定模板選擇器
table.render({
cols: [[
{field:‘title‘, title: ‘文章標題‘, width: 200, templet: ‘#titleTpl‘} //這裏的templet值是模板元素的選擇器
,{field:‘id‘, title:‘ID‘, width:100}
]]
});
等價於：
<th lay-data="{field:‘title‘, width: 200, templet: ‘#titleTpl‘}">文章標題</th>
<th lay-data="{field:‘id‘, width:100}">ID</th>
1
2
3
4
5
6
7
8
9
10
templet對應的模板，它可以存放在頁面的任意位置。模板遵循於 laytpl 語法，可讀取到返回的所有數據
<script type="text/html" id="titleTpl">
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
註意：上述的 {{d.id}}、{{d.title}} 是動態內容，它對應數據接口返回的字段名。除此之外，你還可以讀取到以下額外字段：
序號：{{ d.LAY_INDEX }} （該額外字段為 layui 2.2.0 新增）
由於模板遵循 laytpl 語法（建議細讀 laytpl文檔 ），因此在模板中你可以寫任意腳本語句（如 if else/for等）：
<script type="text/html" id="titleTpl">
{{# if(d.id < 100){ }}
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
{{# } else { }}
{{d.title}}(普通用戶)
{{# } }}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
函數轉義
自 layui 2.2.5 開始，templet 開始支持函數形式，函數返回一個參數 d，包含接口返回的所有字段和數據。如下所示：
table.render({
cols: [[
{field:‘title‘, title: ‘文章標題‘, width: 200
,templet: function(d){
return ‘ID：‘+ d.id +‘，標題：<span style="color: #c00;">‘+ d.title +‘</span>‘
}
}
,{field:‘id‘, title:‘ID‘, width:100}
]]
});
1
2
3
4
5
6
7
8
9
10
直接賦值模版字符
templet 也可以直接是一段 html 內容
templet: ‘<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>‘
註意：這裏一定要被一層 <div></div> 包裹，否則無法讀取到模板
1
2
3
四、toolbar - 綁定列工具條
類型：String，默認值：無
通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕，而 tool 參數就是為此而生，你因此可以非常便捷地實現各種操作功能。tool 參數和 templet 參數的使用方式完全類似，通常接受的是一個選擇器，也可以是一段HTML字符。
table.render({
cols: [[
{field:‘id‘, title:‘ID‘, width:100}
,{fixed: ‘right‘, width:150, align:‘center‘, toolbar: ‘#barDemo‘} //這裏的toolbar值是模板元素的選擇器
]]
});
等價於：
<th lay-data="{field:‘id‘, width:100}">ID</th>
<th lay-data="{fixed: ‘right‘, width:150, align:‘center‘, toolbar: ‘#barDemo‘}"></th>
1
2
3
4
5
6
7
8
9
10
toolbar 對應的模板，它可以存放在頁面的任意位置：
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
<!-- 這裏同樣支持 laytpl 語法，如： -->
{{# if(d.auth > 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="check">審核</a>
{{# } }}
</script>
註意：屬性 lay-event="" 是模板的關鍵所在，值可隨意定義。
1
2
3
4
5
6
7
8
9
10
11
12
接下來我們可以借助 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對象
if(layEvent === ‘detail‘){ //查看
//do somehing
} else if(layEvent === ‘del‘){ //刪除
layer.confirm(‘真的刪除行麽‘, function(index){
obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
layer.close(index);
//向服務端發送刪除指令
});
} else if(layEvent === ‘edit‘){ //編輯
//do something
//同步更新緩存對應的值
obj.update({
username: ‘123‘
,title: ‘xxx‘
});
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
五、異步數據接口
由url、method、where…等多個參數組成
異步數據接口參數詳情
六、done - 數據渲染完的回調
無論是異步請求數據，還是直接賦值數據，都會觸發該回調。你可以利用該回調做一些表格以外元素的渲染。
table.render({ //其它參數在此省略
done: function(res, curr, count){
//如果是異步請求數據方式，res即為你接口返回的信息。
//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當前頁數據、count為數據總長度
console.log(res);
//得到當前頁碼
console.log(curr);
//得到數據總量
console.log(count);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
七、table的基礎方法
基礎用法是table模塊的關鍵組成部分，目前所開放的所有方法如下：
>//設定全局默認參數。options即各項基礎參數
> table.set(options);
>
> //事件監聽。event為內置事件名（詳見下文），filter為容器lay-filter設定的值
> table.on(‘event(filter)‘, callback);
>
> //filter為容器lay-filter設定的值，options即各項基礎參數。
> table.init(filter, options);
>
> //獲取表格選中行（下文會有詳細介紹）。id 即為 id 參數對應的值
> table.checkStatus(id);
>
> //用於表格方法級渲染，核心方法。應該不用再過多解釋了
> table.render(options);
>
> //表格重載
> table.reload(id, options);
>
> //重置表格尺寸
> table.resize(id);
>
> //導出數據
> table.exportFile(id, data, type);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1、獲取選中行——table.checkStatus(‘ID’)
該方法可獲取到表格所有的選中行相關數據 ，其中 ID 為table基礎參數 id 對應的值
table.render({ //其它參數省略
id: ‘idTest‘
});
1
2
3
調用
var checkStatus = table.checkStatus(‘idTest‘); //idTest 即為基礎參數 id 對應的值
console.log(checkStatus.data) //獲取選中行的數據
console.log(checkStatus.data.length) //獲取選中行數量，可作為是否有選中行的條件
console.log(checkStatus.isAll ) //表格是否全選
1
2
3
4
5
2、表格重載
很多時候，你需要對表格進行重載。比如數據全局搜索。layui提供了兩種方法
— —table.reload(ID, options)
參數 ID 即為基礎參數id對應的值
參數 options 即為各項基礎參數
— —tableIns.reload(options)
對象 tableIns 來源於 table.render() 方法的實例
參數 options 即為各項基礎參數
//所獲得的 tableIns 即為當前容器的實例
var tableIns = table.render({
elem: ‘#id‘
,cols: [] //設置表頭
,url: ‘/api/data‘ //設置異步接口
,id: ‘idTest‘
});
//這裏以搜索為例
tableIns.reload({
where: { //設定異步數據接口的額外參數，任意設
aaaaaa: ‘xxx‘
,bbb: ‘yyy‘
//…
}
,page: {
curr: 1 //重新從第 1 頁開始
}
});
//上述方法等價於
table.reload(‘idTest‘, {
where: { //設定異步數據接口的額外參數，任意設
aaaaaa: ‘xxx‘
,bbb: ‘yyy‘
//…
}
,page: {
curr: 1 //重新從第 1 頁開始
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
3、事件監聽— —table.on(‘event(filter)’, callback)
event為內置事件名，filter為容器lay-filter設定的值
監聽頭部工具欄事件— —toolbar(test)
點擊頭部工具欄區域設定了屬性為 lay-event="" 的元素時觸發
原始容器
<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‘
//,…… //其他參數
});
//監聽事件
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
監聽復選框選擇— —checkbox(test)
點擊復選框時觸發，回調函數返回一個object參數，攜帶的成員如下：
table.on(‘checkbox(test)‘, function(obj){
console.log(obj.checked); //當前是否選中狀態
console.log(obj.data); //選中行的相關數據
console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one
});
1
2
3
4
5
監聽單元格編輯— —edit(test)
單元格被編輯，且值發生改變時觸發，回調函數返回一個object參數
table.on(‘edit(test)‘, function(obj){
//註：edit是固定事件名，test是table原始容器的屬性 lay-filter="對應的值"
console.log(obj.value); //得到修改後的值
console.log(obj.field); //當前編輯的字段名
console.log(obj.data); //所在行的所有相關數據
});
1
2
3
4
5
6
監聽行單雙擊事件— —row(test)
點擊或雙擊行時觸發
//監聽行單擊事件
table.on(‘row(test)‘, function(obj){
console.log(obj.tr) //得到當前行元素對象
console.log(obj.data) //得到當前行數據
//obj.del(); //刪除當前行
//obj.update(fields) //修改當前行數據
});
//監聽行雙擊事件
table.on(‘rowDouble(test)‘, function(obj){
//obj 同上
});
---------------------
作者：嶽奔
來源：CSDN
原文：https://blog.csdn.net/weixin_42348971/article/details/84579682
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
layui表格——table.render(options)（轉）