[记] layui table渲染

最新推荐文章于 2023-06-17 19:42:09 发布

qq_33641175

最新推荐文章于 2023-06-17 19:42:09 发布

阅读量179

点赞数

分类专栏：前端文章标签：前端 layui

本文链接：https://blog.csdn.net/qq_33641175/article/details/113625893

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

渲染方式

网络数据+cols

见layui官网示例

网络数据 + thead>th

见layui官网示例

本地数据 + cols(使用table.render(option))

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>本地数据+cols</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		<table class="layui-table" lay-filter="table2" id="table2"></table>
		<script src="layui-src/layui.js"></script>
		<script>
			var datas = [
				{"seqid": "10001","name": "张三",},
				{"seqid": "10002","name": "李四",},
			];
			var table2Option = {
				elem: '#table2',
				cols: [[
					{field: 'seqid',width: 100,title: 'ID'},
					{field: 'seqid',width: 100,title: '姓名'},
				]],
				data: datas,
				even: true,
				id: 'table2',
			};
			layui.use(['layer', 'form', 'element', 'table'], function() {
				table = layui.table;
				table.render(table2Option);
			});
		</script>
	</body>
</html>

本地数据 + thead>th(使用table.init(filter,setting))

主要是HBuilder格式化一下, 那个cols就变的巨长

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>本地数据+thead>th</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		<table class="layui-table" lay-filter="table1" id="table1">
			<thead>
				<th lay-data="{field:'seqid', width:90, sort: true}">申请ID</th>
				<th lay-data="{field:'name', width:120}">姓名</th>
			</thead>
		</table>
		<script src="layui-src/layui.js"></script>
		<script>
			var datas = [
				{"seqid": "10001","name": "张三",},
				{"seqid": "10002","name": "李四",},
			];
			var table1Option = {
				elem: '#table1',
				data: datas,
				even: true,
				id: 'table1',
			};
			layui.use(['layer', 'form', 'element', 'table'], function() {
				table = layui.table;
				table.init('table1', table1Option);
			});
		</script>
	</body>
</html>