【layUI杂记】layui之table复杂表头的设计 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="layui/css/layui.css" rel="stylesheet" />
		<script src="layui/jquery-1.10.2.min.js"></script>
		<script src="layui/layui.js"></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="w-100 mb-2 d-inline d-sm-none"></div>
			<div class="row">
				<div class="col-12">
					<table id="tabEmployee" lay-filter="tabEmployee"></table>
				</div>
			</div>
		</div>
	</body>
	<script>
		var tabEmployee; //声明一个变量放表格数据
		var layer, layuiTable;
		$(function() {
			//加载layui模块
			layui.use(['layer', 'table'], function() {
				layer = layui.layer,
					layuiTable = layui.table;
				//初始化表格
				tabEmployee = layuiTable.render({
					elem: '#tabEmployee', //表格id
					url: "", //路径
					cols: [
						[ //表头
							{
								type: "checkbox",
								rowspan: "2",
								fixed: "left"
							}, //多选框,fixed:"left"固定在左边
							{
								type: "numbers",
								rowspan: "2",
								title: "序号"
							},
							{
								field: "EmployeeNumber",
								rowspan: "2",
								title: "编号",
								align: "center"
							},
							{
								field: "EmployeeName",
								rowspan: "2",
								title: "姓名",
								width: 150,
								align: "center"
							},
							{
								colspan: "3",
								title: "信息",
								align: "center"
							},
							{
								colspan: "2",
								title: "工作",
								align: "center"
							},
							{
								field: "Remark",
								rowspan: "2",
								title: "备注",
								align: "center"
							},
						],
						[
							//对应{colspan: "3", title: "信息", align: "center"}表头
							{
								field: "Phone",
								title: "电话",
								align: "center"
							},
							{
								field: "Cellphone",
								title: "手机",
								align: "center"
							},
							{
								field: "Address",
								title: "地址",
								align: "center"
							},
							//{对应colspan: "2", title: "工作", align: "center"}表头
							{
								field: "DeoartmentName",
								title: "部门",
								align: "center"
							},
							{
								field: "PositionName",
								title: "职位",
								align: "center"
							},
						]
					],
					page: {
						limit: 10, //指定每页显示的条数
						limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50], //每页条数的选择项
					},
					data: [], //空数据原
				});
			});
		});
	</script>
</html>
posted @ 2022-04-26 14:41  郭祺迦  阅读(1832)  评论(0)    收藏  举报