easyui多行复杂表头数据显示

先创建一个数据表格

	// 初始化数据表格
	$('#excel').datagrid({
		columns : columns,
		// url : '/nursing/queryExcel',
		url : '/nursing/queryExcel',
		method : 'GET',
		rownumbers : true,// 行号
		autoRowHeight : false,
		pagination : true,// 分页条
		fitColumns : true,// 自动使列适应表格宽度
		checkOnSelect : false,
		selectOnCheck : true,
		toolbar : '#tb', // 自定义的工具栏操作按钮
		pageSize : 5,
		pageList : [ 5, 10, 15, 20 ],
		frozenColumns : [[{ field : 'ns_name', title : '养老院名称', width : 150, align :
		 'center' }, { field : 'devices_name', title : '设备名称', width : 150, align :
		 'center' }]],
		onLoadSuccess : function(data) {
			if (data.rows.length > 0) {
				// 调用mergeCellsByField()合并单元格
				mergeCellsByField("excel", "ns_name,devices_name");
			}
		}
	})

上面加载数据成功后执行合并行的方法

/**
 * EasyUI DataGrid根据字段动态合并单元格 param tableID 要合并table的id param colList
 * 要合并的列,用逗号分隔(例如："ns_name,devices_name"); param mainColIndex 要合并的主列索引
 */
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 = "";
	var alertStr = "";
	// for (j=0;j<=ColArray.length-1 ;j++ )
	for (j = ColArray.length - 1; j >= 0; j--) {
		// 当循环至某新的列时，变量复位。
		PerTxt = "";
		tmpA = 1;
		tmpB = 0;

		// 从第一行（表头为第0行）开始循环，循环至行尾(溢出一位)
		for (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
				});
				tmpA = 1;
			}
			PerTxt = CurTxt;
		}
	}
}

定义列

var columns = [ [ {
	"field" : "",
	"title" : "使用次数统计",
	"colspan" : 13,
	"align" : 'center'
}], [ {
	"field" : "map.January",
	"title" : "1月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['January'];  
    } 
}, {
	"field" : "map.February",
	"title" : "2月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['February'];  
    } 
}, {
	"field" : "map.March",
	"title" : "3月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['March'];  
    } 
}, {
	"field" : "map.April",
	"title" : "4月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['April'];  
    } 
}, {
	"field" : "map.May",
	"title" : "5月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['May'];  
    } 
}, {
	"field" : "map.June",
	"title" : "6月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['June'];  
    } 
}, {
	"field" : "map.July",
	"title" : "7月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['July'];  
    } 
}, {
	"field" : "map.August",
	"title" : "8月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['August'];  
    } 
}, {
	"field" : "September",
	"title" : "9月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['September'];  
    } 
}, {
	"field" : "October",
	"title" : "10月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['October'];  
    } 
}, {
	"field" : "November",
	"title" : "11月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['November'];  
    } 
}, {
	"field" : "map.December",
	"title" : "12月",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1,
	formatter : function (value, rec) {  
        return rec.map['December'];  
    } 
}, {
	"field" : "sum",
	"title" : "合计",
	"width" : 30,
	"align" : 'center',
	"rowspan" : 1
} ] ]

后台返回的json数据格式

{
    "total": 6,
    "rows": [
        {
            "ns_name": "疯子养老院",
            "devices_name": "水疗马桶1",
            "count": 1,
            "map": {
                "July": 7
            }
        },
        {
            "ns_name": "疯子养老院",
            "devices_name": "多功能马桶1",
            "count": 2,
            "map": {
                "August": 8,
            }
        },
        {
            "ns_name": "疯子养老院",
            "devices_name": "马桶2",
            "count": 1,
            "map": {
                "June": 6,
            }
        },
        {
            "ns_name": "HH养老院",
            "devices_name": "设备5",
            "count": 1,
            "map": {
                "August": 8,
            }
        },
        {
            "ns_name": "HH养老院",
            "devices_name": "设备6",
            "count": 1,
            "map": {
                "August": 8,
            }
        }
    ]
}