layui-数据表格的使用

表格数据分动态和静态的
layui提供了个layui.table模块组件,可以快速开发表格数据显示

  1. html前端调用<table id="user-table" lay-filter="user-table"></table>table标签
  2. scrip引用layui库<script src="../../component/layui/layui.js"></script>
  3. JavaScript执行操作,所有layui库的操作都在layui.use(['table', 'form', 'jquery','common'], function() {}中执行
  4. 调用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) {

	}
});
字段说明
  1. where
    GET请求参数,以上请求链接等价于http://aaaa.cn/test?uart_len=0&device_id:000000000,直接链接的方式的时候,参数值都是字符串类型,而且不需要加双引号的
  2. data:字段类型,列表,功能详单于parseData说明中的数据格式的data,加载静态显示数据,和http操作二选一
函数说明
  1. parseData
    由于layui.table的数据格式是固定的,如下
{
	code: 0
	,msg: ''
	,count: 0
	,data: [{
			device_id : ''
		}]
}

data字段类型为列表,列表中每个对象为每行的显示数据。
如果GET请求回来的数据不是按照这个格式返回的需要经过转换才能正常加载显示数据,parseData函数就是用来做中间数据格式转换的,轻度重载不会改变任何参数,深度重载只改变table.reload时填写的参数,其他参数保持调用table.render时的值。

重载表格显示数据

重载分两种,不管调用哪种方式都是按照执行生命周期来执行,

轻度重载

只重载显示数据

table.reloadData('user-table', {});
深度重载

重载所有参数,包括urlwhere等参数,true表示打开深度重载

table.reload('user-table',{
	where:{
		uart_len:1,
		device_id:'000000000',
		max_id:1
	}}
, true);
```
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值