layui方法渲染数据表格

官方文档

官方文档如下:

三种初始化渲染方式

方式机制适用场景
01.方法渲染用JS方法的配置完成渲染(推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可
02.自动渲染HTML配置,自动渲染无需写过多 JS,可专注于 HTML 表头部分
03.转换静态表格转化一段已有的表格元素无需写过多 JS,可专注于 HTML 表头部分无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可

主要使用方法渲染,官方也推荐使用此方式

引入CSS和JS文件

1
2
3
4
<!-- layui css文件 -->
<link rel="stylesheet" type="text/css" href="${cxt}/static/layui/css/layui.css"/>
<!-- layui js文件 -->
<script type="text/javascript" src="${cxt}/static/layui/layui.js"/>

接下来在body里加入如下一组table标签

1
<table class="layui-hide" id="valueTable" lay-filter="valueTable"></table>

然后加入如下js代码

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
37
38
39
 // 方法渲染
var customerTable;
var table;
var form;
layui.use('table', function () {
$ = layui.jquery, table = layui.table, form = layui.form; // 很重要,初始化

customerTable = table.render({
elem: '#valueTable' //要和table标签ID一致
,height: 'full'
, url: '${cxt}/sys/salesRecord/salesRecordList?'
, id: 'testReload'
, page: true
, limit: 20
, offset: 'auto'
, height: 'full-105'
, cols: [[
// {type: 'checkbox'},
{field: 'id', title: '编号', align: 'center', width: 80}
, {field: 'c_pic', width: 130, align: 'center', title: '商品图片', templet: "<div><img src='{{d.c_pic}}'/></div>"}
, {field: 'name', title: '商品名称', align: 'center', width: 180}
, {field: 'store_name', title: '商家名称', align: 'center', width: 130}
, {field: 'c_num', title: '销售数量', align: 'center', width: 100}
, {field: 'type', title: '商品类型', align: 'center', width: 100, templet: "#type"}
, {field: 'c_money', title: '商品价格', align: 'center', width: 100}
, {field: 'createTime', title: '销售时间', sort: true, align: 'center', width: 180}
]]
// 以下不需要可以去掉
, done: function (res, curr, count) {
//数据表格加载完成时调用此函数
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
//设置全部数据到全局变量
//table_data = res.data;
console.log(res.data);
}
});
});
</script>

到此,方法渲染就结束了,效果如下

具体的参数含义看官方文档即可

添加操作按钮

只需在cols里添加如下

1
2
3
4
5
6
, {fixed: 'right', width: 250, align: 'center', toolbar: '#barDemo', title: '操作'}
// #barDemo名字可随便取,需一致
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-mini" lay-event="add">编辑</a>
<a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>


完整JSP文件:
链接: JSP例子
密码: dt8c

------本文结束感谢阅读------

本文标题:layui方法渲染数据表格

文章作者:churuo

原始链接:https://www.xuchuruo.cn/Layui动态数据表格.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%