EasyUI DataGrid根据字段动态合并单元格

原创
2015/06/12 09:23
阅读数 5K
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../inc.jsp"></jsp:include>
<meta http-equiv="X-UA-Compatible" content="edge" />
<title>合并单元格实例</title>
<script type="text/javascript">
	var dataGrid;
	$(function() {
		//查询列表
		dataGrid = $('#dataGrid').datagrid({
			url : '${ctx}' + '/itemreceiptsclaim/dataGrid',
			striped : true,
			rownumbers : true,
			pagination : true,
			singleSelect : true,
			idField : 'id',
			sortName : 'id',
			sortOrder : 'asc',
			pageSize : 20,
			pageList : [ 15, 20, 30 ],
			columns : [ [ {
				width : '200',
				title : '项目名称',
				field : 'name',
				align : 'center'
			}, {
				width : '125',
				title : '项目编号',
				field : 'itemCode',
				align : 'center'
			}, {
				width : '125',
				title : '部门',
				field : 'orgName',
				align : 'center'
			}, {
				width : '125',
				title : '创建时间',
				field : 'created',
				align : 'center'
			}, {
				width : '80',
				title : '状态',
				field : 'status',
				align : 'center',
				sortable : true,
				formatter : function(value, row, index) {
					switch (value) {
					case 0:
						return '已删除';
					case 1:
						return '草稿';
					}
				}
			} ] ],onLoadSuccess : function(data) {
				if (data.rows.length > 0) {
					mergeCellsByField("dataGrid", "name,itemCode");
				}
			},toolbar : '#toolbar'
		});

	});

	/**
	 * EasyUI DataGrid根据字段动态合并单元格
	 * 参数 tableID 要合并table的id
	 * 参数 colList 要合并的列,用逗号分隔
	 */
	function mergeCellsByField(tableID, colList) {
		var ColArray = colList.split(",");
		var tTable = $("#" + tableID);
		var TableRowCnts = tTable.datagrid("getRows").length;
		var tmpA;
		var tmpB;
		var PerTxt = "";
		var CurTxt = "";
		for (var j = ColArray.length - 1; j >= 0; j--) {
			PerTxt = "";
			tmpA = 1;
			tmpB = 0;
			for (var i = 0; i <= TableRowCnts; i++) {
				if (i == TableRowCnts) {
					CurTxt = "";
				} else {
					CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
				}
				if (PerTxt == CurTxt) {
					tmpA += 1;
				} else {
					tmpB += tmpA;
					tTable.datagrid("mergeCells", {
						index : i - tmpA,
						field : ColArray[j],
						rowspan : tmpA,
						colspan : null
					});
					tTable.datagrid("mergeCells", {
						index : i - tmpA,
						field : "Ideparture",
						rowspan : tmpA,
						colspan : null
					});
					tmpA = 1;
				}
				PerTxt = CurTxt;
			}
		}
	}
</script>
</head>
<body class="easyui-layout" data-options="fit:true,border:false">

	<div data-options="region:'center',fit:true,border:false">
		<table id="dataGrid" data-options="fit:true,border:false"></table>
	</div>

	<div id="toolbar" style="display: none;" class="datagrid-toolbar">
		<table data-options="fit:true,border:false">
			<tr>
				<td>项目名称</td>
				<td><input name="name" type="text" class="span2" value=""></td>
				<td>提交时间</td>
				<td><input class="easyui-datetimebox" name="submitStart" value=""></td>
				<td align="center">~~至~~</td>
				<td><input class="easyui-datetimebox" name="submitEnd" value=""></td>
			</tr>
		</table>
		<a onclick="searchFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">查询</a> 
	</div>
</body>
</html>

 

展开阅读全文
打赏
0
8 收藏
分享
加载中
更多评论
打赏
0 评论
8 收藏
0
分享
返回顶部
顶部