easyUI datagarid单元格动态合并

第二列根据第一列合并,第三列根据第二列合并。层级关系。

/*
 * tableID表格的id
 * colList要合并的字段例如:"overcount,totalcount"
 */
//加载成功后合并单元格
function mergeCellByField(tableID, colList){
	var tTable = $("#" + tableID);//表的id
	var ColArray = colList.split(",");//合并的列数组
	var TableRowCnts = tTable.datagrid("getRows").length;//得到总行数
	var tempTxt = tTable.datagrid("getRows")[0][ColArray[0]],//第一次的临时变量为第一行的值
		curTxt='';//存放table表循环出来的对应的字段值
	var cellNumArr = [];//存放每次合并开始的下标
	var numTotal = 1;//相同的字段数
	for (var i = 1; i <= TableRowCnts; i++) {
		if(i==TableRowCnts){
			curTxt='';//最后一个的情况
		}else{
			curTxt = tTable.datagrid("getRows")[i][ColArray[0]];
		}
		if(curTxt == tempTxt){
			numTotal+=1;
		}else{
			//第一个字段的合并
			tTable.datagrid("mergeCells", { 
                index:i-numTotal,//合并开始的索引
                field: ColArray[0],//合并的字段
                rowspan: numTotal,//合并的行数
                colspan: null//合并的列数
            });	
			cellNumArr.push(i-numTotal);//每次合并的行下标的开始索引
			tempTxt = curTxt;//将每次循环的值赋值给临时变量,与上一次对比
			numTotal = 1; //每次不同时,第一个不算入,从第二个开始对比
		}
	}
	mergeCellByFieldSecond(tTable,ColArray,cellNumArr)
}
//第二个字段的合并	
function mergeCellByFieldSecond(tTable, ColArray,cellNumArr){
	var befCellArr = cellNumArr;
	var tTable = tTable;
	var ColArray = ColArray;
	var thirdIndexArr = [];
	var tempTxt = '';
	for(var j = 0; j <= befCellArr.length-1;j++){
		var num =befCellArr[j]+1;
		var nextNum = befCellArr[j+1];
		var index = befCellArr[j];
		tempTxt = tTable.datagrid("getRows")[index][ColArray[1]],curTxt='';
		var tempArr = cellRow(tTable,ColArray,num,nextNum,tempTxt,1);
		thirdIndexArr = thirdIndexArr.concat(tempArr)
	}	
	mergeCellByFieldThird(tTable,ColArray,thirdIndexArr);
}
//第三个字段合并
function mergeCellByFieldThird(tTable,ColArray,thirdIndexArr){
	var befCellArr = thirdIndexArr;
	var tTable = tTable;
	var ColArray = ColArray;
	for(var k = 0; k <= befCellArr.length-1;k++){
		var num =befCellArr[k]+1;
		var nextNum = befCellArr[k+1];
		var index = befCellArr[k];
		tempTxt = tTable.datagrid("getRows")[index][ColArray[2]];
		var tempArr = cellRow(tTable,ColArray,num,nextNum,tempTxt,2);
	}	
}
//根据前一列合并
function cellRow(tTable,ColArray,num,nextNum,tempTxt,colum){
	var TableRowCnts = tTable.datagrid("getRows").length;//得到总行数
	var curTxt='';
	var cellNumArr = [];//存放每次合并开始的下标
	var numTotal = 1;//相同的字段数
	if(nextNum == null){
		nextNum =TableRowCnts;
	}
	for (var i = num; i <= nextNum; i++) {
		if(i == nextNum){
			curTxt='';//最后一个的情况
		}else{
			curTxt = tTable.datagrid("getRows")[i][ColArray[colum]];
		}
		if(curTxt == tempTxt){
			numTotal+=1;
		}else{
			//第一个字段的合并
			tTable.datagrid("mergeCells", { 
                index:i-numTotal,//合并开始的索引
                field: ColArray[colum],//合并的字段
                rowspan: numTotal,//合并的行数
                colspan: null//合并的列数
            });	
			cellNumArr.push(i-numTotal);//每次合并的行下标的开始索引
			tempTxt = curTxt;//将每次循环的值赋值给临时变量,与上一次对比
			numTotal = 1; //每次不同时,第一个不算入,从第二个开始对比
		}
	}
	return cellNumArr;
}

效果图:

 

posted @ 2018-07-09 11:07  小伍w  阅读(455)  评论(0编辑  收藏  举报