表格数据分动态和静态的
layui提供了个layui.table
模块组件,可以快速开发表格数据显示
- html前端调用
<table id="user-table" lay-filter="user-table"></table>
table标签 - scrip引用layui库
<script src="../../component/layui/layui.js"></script>
- JavaScript执行操作,所有layui库的操作都在
layui.use(['table', 'form', 'jquery','common'], function() {}
中执行 - 调用
table.render
,执行生命周期:执行table.render
->调用before
函数->http执行成功则先调用parseData
函数->表格数据加载渲染完成调用done
函数
通过http GET接口获取表格显示数据
table.render({
elem: '#user-table',
url: 'http://aaaa.cn/test',
method: 'get',
where:{
uart_len:0,
device_id:'000000000'
},
page: true,
limit: 10,
data:[],
scrollPos:'fixed',
cols: cols,
skin: 'row',
editTrigger: 'dblclick',
// lineStyle: 'height: 30px;',
toolbar: '#user-toolbar',
defaultToolbar: [{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
parseData: function(res){ //res 即为原始返回的数据
return tableUpdateParams;
},
before: function(res, curr, count) {
},
done: function(res, curr, count) {
}
});
字段说明
- where
GET请求参数,以上请求链接等价于http://aaaa.cn/test?uart_len=0&device_id:000000000
,直接链接的方式的时候,参数值都是字符串类型,而且不需要加双引号的 - data:字段类型,列表,功能详单于parseData说明中的数据格式的
data
,加载静态显示数据,和http操作二选一
函数说明
- parseData
由于layui.table的数据格式是固定的,如下
{
code: 0
,msg: ''
,count: 0
,data: [{
device_id : ''
}]
}
data
字段类型为列表,列表中每个对象为每行的显示数据。
如果GET
请求回来的数据不是按照这个格式返回的需要经过转换才能正常加载显示数据,parseData
函数就是用来做中间数据格式转换的,轻度重载
不会改变任何参数,深度重载
只改变table.reload
时填写的参数,其他参数保持调用table.render
时的值。
重载表格显示数据
重载分两种,不管调用哪种方式都是按照执行生命周期
来执行,
轻度重载
只重载显示数据
table.reloadData('user-table', {});
深度重载
重载所有参数,包括url
、where
等参数,true
表示打开深度重载
table.reload('user-table',{
where:{
uart_len:1,
device_id:'000000000',
max_id:1
}}
, true);
```