EasyUI-datagrid-自动合并单元格

1.目标

  1.1表格初始化完成后，已经自动合并好需要合并的行；

  1.2当点击字段排序后，重新进行合并；

 

2.实现

  2.1 引入插件

    

/**
 * author ____′↘夏悸
 * create date 2012-11-5
 *
 **/
$.extend($.fn.datagrid.methods, {
	autoMergeCells : function (jq, fields) {
		return jq.each(function () {
			var target = $(this);
			if (!fields) {
				fields = target.datagrid("getColumnFields");
			}
			var rows = target.datagrid("getRows");
			var i = 0,
			j = 0,
			temp = {};
			for (i; i < rows.length; i++) {
				var row = rows[i];
				j = 0;
				for (j; j < fields.length; j++) {
					var field = fields[j];
					var tf = temp[field];
					if (!tf) {
						tf = temp[field] = {};
						tf[row[field]] = [i];
					} else {
						var tfv = tf[row[field]];
						if (tfv) {
							tfv.push(i);
						} else {
							tfv = tf[row[field]] = [i];
						}
					}
				}
			}
			$.each(temp, function (field, colunm) {
				$.each(colunm, function () {
					var group = this;
					
					if (group.length > 1) {
						var before,
						after,
						megerIndex = group[0];
						for (var i = 0; i < group.length; i++) {
							before = group[i];
							after = group[i + 1];
							if (after && (after - before) == 1) {
								continue;
							}
							var rowspan = before - megerIndex + 1;
							if (rowspan > 1) {
								target.datagrid('mergeCells', {
									index : megerIndex,
									field : field,
									rowspan : rowspan
								});
							}
							if (after && (after - before) != 1) {
								megerIndex = after;
							}
						}
					}
				});
			});
		});
	}
});

 

  2.2html代码

    

<table id="simpleDgId" style="height: 300px" />

  2.3js代码

    

var sortFlag = false;
	$('#simpleDgId').datagrid({
		url:"testController.do?datagrid",
		fitColumns:true,
		singleSelect:true,
		remoteSort: false,
		columns:[[
		          {field:"age",title:"年龄",width:25,align:'center',sortable:true},
		          {field:"userName",title:"名称",width:25,align:'center',sortable:true},
		          {field:"mobilePhone",title:"手机",width:25,align:'center',sortable:true}
		]],
		onSortColumn:function(sort, order){
			sortFlag = true;
			if("userName"==sort){
				$(this).datagrid("autoMergeCells",[sort]);
			}else{
				$(this).datagrid("autoMergeCells");
			}
		},
		onLoadSuccess: function(data){
			if(!sortFlag) $(this).datagrid("autoMergeCells");
		}
	});

 

  2.4后台

     url:"testController.do?datagrid"

     后台数据就是普通的表格数据，这里就不赘述了

  

  2.5效果