layui数据表格笔记

最新推荐文章于 2026-06-13 10:09:11 发布

原创最新推荐文章于 2026-06-13 10:09:11 发布 · 628 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

一、渲染方式：

1.方法渲染 2.自动渲染 3.转换静态表格

使用方法渲染多 js配置完成渲染

自动渲染 html配置自动渲染

1.方法渲染

HTML:

JS：

var table = layui.table;

//执行渲染

table.render({

elem: '#demo' //指定原始表格元素选择器（推荐id选择器）

,height: full-200 //容器高度

,cols: [{}] //设置表头

});

2.自动渲染：在容器先配置好参数对标签设置属性 lay-data="" 用于配置一些基础参数

<thead>

<tr>

</tr>

</thead>

</table>

JS：

layui.use('table', function() {

var table = layui.table;

})

二、templet: 自定义列模板

1.绑定模板选择器自定义多：

{field:'title', title: '文章标题', width: 200, templet: '#templet'} //这里的#templet是模板元素的选择器

在页面任意地方写：

<a href="#" class="layui-table-link">{{d.title}}</a>

<p>{{d.LAY_INDEX}}</p> //序号

。。。。

</script>

2.函数转义自定义适中： templet 若未函数，则返回一个参数 d（包含当前行数据及特定的额外字段） return

{field:'title', title: '文章标题', width: 200

,templet: function(d){

console.log(d.LAY_INDEX); //得到序号。一般不常用

console.log(d.LAY_COL); //得到当前列表头配置信息。一般不常用

//得到当前行数据，并拼接成自定义模板

return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'

}

3.直接赋值模板字符较少内容直接写一段html 一定要被<div></div>包裹

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'

三、toolbar：绑定工具条模板

操作按钮 tool参数和templet参数用法类似 table.on('tool(test)',function(obj){})

,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器

在页面任意位置写：

{{# if(d.auth > 2){ }}

{{# } }}

</script>

工具条事件：

table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

var data = obj.data; //获得当前行数据

var layEvent = obj.event; //获得 lay-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'

});

}

});

四、异步数据请求：

五、done ：数据渲染完的回调

table.render({ //其它参数在此省略

done: function(res, curr, count){

//如果是异步请求数据方式，res即为你接口返回的信息。

//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

console.log(res);

//得到当前页码

console.log(curr);

//得到数据总量

console.log(count);

}

});

六、基础方法：

> table.set(options); //设定全局默认参数。options即各项基础参数

> table.on('event(filter)', callback); //事件。event为内置事件名，filter为容器lay-filter设定的值

> table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。

> table.checkStatus(id); //获取表格选中行。id 即为 id 参数对应的值

> table.render(options); //用于表格方法级渲染，核心方法。

> table.reload(id, options, deep); //表格重载

> table.resize(id); //重置表格尺寸

> table.exportFile(id, data, type); //导出数据

> table.getData(id); //用于获取表格当前页的所有行数据