一、使用方法

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
版权声明:本文为博主原创文章,转载请附上博文链接!

转载于:https://www.cnblogs.com/ffaiss/p/10859703.html

layui表格——table.render(options)(转)相关推荐

  1. layui表格table固定表头第一行固定显示

    layui表格table固定表头第一行固定显示 代码示例如下: layui.use('table', function(){$ = layui.jquery;var table = layui.tab ...

  2. layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽

    table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求. ...

  3. layui的table实现,strust2+layui+jsp

    table表格其实还是很好实现的,先看效果吧 前台界面的代码如下: <body><input type="hidden" id="sd" va ...

  4. layui 表格表单日期格式转换

    layui表格中 表格中的日期是String类型,而数据库是Date类型,于是页面显示: 可以通过 temple 属性格式化时间, 向layui table表头中添加templet:' {{ Form ...

  5. 点击不同的统计类型重载layui表格

    点击不同的统计类型重载layui表格 开发工具与关键技术:Visual Studio 2015 作者:徐晶旗 撰写时间:2019年8月17日 在做项目的时候涉及到了统计分析,比如要分析经营利润分析,里 ...

  6. layui穿梭框和layui表格数据交互

    <style>/*树形菜单--分割线内文字*/.diseasea{position: relative;left:180px; /*右*/color: #005cbf}/*表单信息--分割 ...

  7. layui中table监听单元格_layui table表格 监听头删除不请求后台

    表格js function getTable() { var table = layui.table //表格 var username=$("#username").val(); ...

  8. layui修改table中的按钮_layui数据表格中如何设置按钮切换(是否置顶)与分页居中...

    手记1 一.数据表格中按钮切换(置顶与取消) 在layUI数据表格中是可以使用toolbar设置表格内的按钮 使用laytel语法 置顶 {{#  if(d.order>0){ }} 取消 {{ ...

  9. html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...

    layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整 需要把heigh高度写死 table.render({ elem: ...

最新文章

  1. 基于注解的 IOC 配置
  2. 全球及中国综艺节目产业营销策略分析及创新格局规划建议报告2021-2027年
  3. SSM项目 Jquery实现From表单提交 json后台并接受
  4. ffplay.c学习-3-音视频解码线程
  5. 一分钟学会看k线图_K线图怎么看?一分钟学会看K线图
  6. java在集合中的方法变动的类_java中级面试题 之基础篇
  7. uni-app更新某个组件版本;uni-app更新插件版本;uni-app更新uni_modules插件;uni-app小程序更新某一个组件的版本库
  8. android lru进程队列,Android缓存机制——LruCache
  9. SQL Server中的动态SQL
  10. excel 绘制突显的饼图
  11. dnf全部使用_DNF:1.13拍卖最后1天物价,花瓣礼箱破千万,果然人人都是黑商
  12. TiledMap使用笔记
  13. 汽车诊断系统总线协议规范知识汇总
  14. opensparc中的crossbar
  15. php利用phpqrcode生成二维码,并将二维码盖在一张图上实现美化
  16. 普通的html页面中ie11的兼容性问题
  17. linux下双击执行.sh脚本文件
  18. 内蒙古经贸学校计算机专业,内蒙古经贸学校招生专业|内蒙古经贸学校有哪些专业...
  19. 【预测模型】基于BP神经网络实现风电功率预测matlab代码
  20. 通过openssl生成pfx证书

热门文章

  1. java代码逆向工程生成uml
  2. A.457 - Linear Cellular Automata
  3. Iperf 源代码分析(四)
  4. Running 1 linux_yesterdaytodaytomorrow
  5. .NET网络编程学习(一)
  6. 流畅的python 数据模型
  7. 问题 C: 编写函数:字符串的复制 之一 (Append Code)
  8. 软启动器说明书_软启动器怎么接线?一张电路图一张实物图供大家参考
  9. TokenInsight:反映区块链行业整体表现的TI指数较昨日同期上涨0.41%
  10. Pickle Finance:BAC-DAI Pickle Jar将在迁移到BAS v2后更新