layui-数据表格的使用

最新推荐文章于 2025-09-11 02:26:40 发布

原创最新推荐文章于 2025-09-11 02:26:40 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript

layui.table组件用于快速开发前端表格显示，通过HTTPGET接口获取数据并按特定格式渲染。它支持动态加载和静态数据展示，数据格式要求包含code、msg、count和data字段。parseData函数用于转换非标准格式的数据，而table.reloadData和table.reload分别用于轻度和深度重载表格数据。

表格数据分动态和静态的
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);
```