easyui datagrid 多表头

1.源代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/blue/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>

<body>
	<div id="dgdataCalibrationPoint" style="width:100%;height:100%"></div>
</body>
</html>
<script>
/* 初始化列表,表头 */
$("#dgdataCalibrationPoint").datagrid({
	fit : true,
	border : false,
	pagination : true,
	fitColumns : false,
	pageList : [ 10, 50, 100, 150, 200, 250, 300 ],
	url : "datagrid_colspan.json",
	pageSize : 10,
	autoRowHeight : false,
	rownumbers : true,
	columns : [ [{
		field : 'commId',
		checkbox : true,
		rowspan:2
	}, {
		field : 'deviceCode',
		title : '设备编号',
		width : 120,
		halign : 'center',
		align : 'center',
		rowspan:2
	}, {
		field : 'deviceMn',
		title : '设备MN号',
		width : 120,
		halign : 'center',
		align : 'center',
		rowspan:2
	}, {
		field : 'deviceName',
		title : '设备名称',
		width : 120,
		halign : 'center',
		align : 'center',
		rowspan:2
	}, {
		field : 'cnName',
		title : '计划类型',
		width : 100,
		halign : 'center',
		align : 'center',
		rowspan:2
	},{
		field : 'statusName',
		title : '执行状态',
		width : 100,
		halign : 'center',
		align : 'center',
		rowspan:2
	},{
		field : 'xState',
		title : ' 湿度校正',
		width : 100,
		halign : 'center',
		align : 'center',
		rowspan:2
	},
	{title:'校准点0',order: 2,colspan:3},  
    {title:'校准点1',order: 2,colspan:3}],
	[{
		field : 'xP0RH',
		title : '相对湿度(%RH)',
		width : 140,
		rowspan:1,
		halign : 'center',
		align : 'center'
	},{
		field : 'xP0K',
		title : '斜率',
		width : 100,
		rowspan:1,
		halign : 'center',
		align : 'center'
	},{
		field : 'xP0B',
		title : '截距',
		width : 100,
		rowspan:1,
		halign : 'center',
		align : 'center'
	},{
		field : 'xP1RH',
		title : '相对湿度(%RH)',
		width : 140,
		rowspan:1,
		halign : 'center',
		align : 'center'
	},{
		field : 'xP1K',
		title : '斜率',
		width : 100,
		rowspan:1,
		halign : 'center',
		align : 'center'
	},{
		field : 'xP1B',
		title : '截距',
		width : 100,
		rowspan:1,
		halign : 'center',
		align : 'center'
	}]],
	singleSelect : false,
	selectOnCheck : true,
	checkOnSelect : true
});
</script>

2.效果

easyui datagrid 多表头

猜你喜欢