一、使用方法
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>
</tr>
</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
版权声明：本文为博主原创文章，转载请附上博文链接！