ext报表合并单元格的方法

//合并表头的方法extjs的官网上有，这里提供的是合并数据单元格的方法

?

//首先在页面上添加以下内容

<style>?
?/*与表头对齐*/
??.x-grid3-row td, .x-grid3-summary-row td{
??????? padding-right: 0px;
??????? padding-left: 0px;
??????? padding-top: 0px;
??????? padding-bottom: 0px;
??? }
??? /*去掉行间空白*/
??? .x-grid3-row {
??? ?border-right-width: 0px;
??? ?border-left-width: 0px;
??????? border-top-width: 0px;
??????? border-bottom-width: 0px;
?}
</style>

?

//然后在表格加载数据时调用下面的函数

//合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');});
//参数：grid-需要合并的表格,rowOrCol-合并行还是列,borderStyle-合并后单元格分隔线样式
function gridSpan(grid, rowOrCol, borderStyle){
	var array1 = new Array();
	var count1 = 0;
	var count2 = 0;
	var index1 = 0;
	var index2 = 0;
	var aRow = undefined;
	var preValue = undefined;
	var firstSameCell = 0;
	var allRecs = grid.getStore().getRange();
	
	if(rowOrCol == 'row'){
		count1 = grid.getColumnModel().getColumnCount();
		count2 = grid.getStore().getCount();
	} else {
		count1 = grid.getStore().getCount();
		count2 = grid.getColumnModel().getColumnCount();
	}
	
	for(i = 0; i < count1; i++){
		preValue = undefined;
		firstSameCell = 0;
		array1[i] = new Array();
		for(j = 0; j < count2; j++){
			if(rowOrCol == 'row'){
				index1 = j;
				index2 = i;
			} else {
				index1 = i;
				index2 = j;
			}
			var colName = grid.getColumnModel().getColumnId(index2);
			if(allRecs[index1].get(colName) == preValue){
				allRecs[index1].set(colName, '&nbsp;');
				array1[i].push(j);
				if(j == count2 - 1){
					var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
					if(rowOrCol == 'row'){
						allRecs[index].set(colName, preValue);
					} else {
						allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
					}
				}
			} else {
				if(j != 0){
					var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
					if(rowOrCol == 'row'){
						allRecs[index].set(colName, preValue);
					} else {
						allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
					}
				}
				firstSameCell = j;
				preValue = allRecs[index1].get(colName);
				allRecs[index1].set(colName, '&nbsp;');
				if(j == count2 - 1){
					allRecs[index1].set(colName, preValue);
				}
			}
		}
	}
	grid.getStore().commitChanges();
	
	//添加所有分隔线
	for(i = 0; i < grid.getStore().getCount(); i ++){
		for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){
			aRow = grid.getView().getCell(i,j);
			aRow.style.borderTop = borderStyle;
			aRow.style.borderLeft = borderStyle;
		}
	}
	
	//去除合并的单元格的分隔线
	for(i = 0; i < array1.length; i++){
		for(j = 0; j < array1[i].length; j++){
			if(rowOrCol == 'row'){
				aRow = grid.getView().getCell(array1[i][j],i);
				aRow.style.borderTop = 'none';
			} else {
				aRow = grid.getView().getCell(i, array1[i][j]);
				aRow.style.borderLeft = 'none';
			}		
		}
	}
}

?

?

?

注意：表格太大时可能导致页面暂时失去响应，稍等即可

合并后的效果：附件

?