jqgrid单元格合并

jqgrid初始化

$("#table").jqGrid({
   url: '',
    styleUI: 'Bootstrap',
    datatype: "json",
    height: 'auto',
    autowidth: true,
    shrinkToFit: false,
    autoScroll:true,
	rowNum: -1,
    colNames: [
     	"id",
         "考评种类",
         "考评内容",
         "考评指标",
         "指标算法",
         "目标值",
         "满分",
         "条件",
         "分值",
     ],
     colModel: [
		// id
		{
			name: "id",
			index: "id",
			editable: false,
			width: 100,
			sortable: false,
			hidden: true
		},
       // 考评种类
        {
            name: "one_checkKindName",
            index: "one_checkKindName",
            editable: false,
            width: 100,
            sortable: false,
			formatter:function(cellvalue, options, rowObject){
               	if(!cellvalue){
               		return '--'
				}
               	else{
               		return cellvalue+'('+rowObject.one_score+'′)'
				}
			},
			cellattr: function(rowId, tv, rawObject, cm, rdata) {
				//合并单元格
				return 'id=\'one_checkKindName' + rowId + "\'";
				//if (Number(rowId) < 5) { return ' colspan=2' }
			}
       	},
       // 考评内容
        {
            name: "two_checkKindName",
            index: "two_checkKindName",
            editable: false,
            width: 100,
            sortable: true,
			formatter:function(cellvalue, options, rowObject){
				if(!cellvalue){
					return '--'
				}
				else{
					return cellvalue+'('+rowObject.two_score+'′)'
				}
			},
			cellattr: function(rowId, tv, rawObject, cm, rdata) {
				//合并单元格
				return 'id=\'two_checkKindName' + rowId + "\'";
				//if (Number(rowId) < 5) { return ' colspan=2' }
			}
        },
       // 考评指标
        {
            name: "arithmeticName",
            index: "arithmeticName",
            editable: false,
            width: 160,
            sorttype: "string",
			formatter:function(cellvalue, options, rowObject){
				if(!cellvalue){
					return '--'
				}
				else{
					return cellvalue
				}
			},
			cellattr: function(rowId, tv, rawObject, cm, rdata) {
				//合并单元格
				return 'id=\'arithmeticName' + rowId + "\'";
				//if (Number(rowId) < 5) { return ' colspan=2' }
			}
        },
        // 指标算法
        {
            name: "targetArithmetic",
            index: "targetArithmetic",
            editable: false,
            width: 280,
            sortable: false,
			formatter:function(cellvalue, options, rowObject){
				if(!cellvalue){
					return '--'
				}
				else{
					return cellvalue
				}
			},
			cellattr: function(rowId, tv, rawObject, cm, rdata) {
				//合并单元格
				return 'id=\'targetArithmetic' + rowId + "\'";
				//if (Number(rowId) < 5) { return ' colspan=2' }
			}
        },
        // 目标值
        {
            name: "checkTarget",
            index: "checkTarget",
            editable: false,
            width: 80,
            sorttype: "string",
			formatter:function(cellvalue, options, rowObject){
				if(!cellvalue){
					return '--'
				}
				else{
					return cellvalue
				}
			},
			cellattr: function(rowId, tv, rawObject, cm, rdata) {
				//合并单元格
				return 'id=\'checkTarget' + rowId + "\'";
				//if (Number(rowId) < 5) { return ' colspan=2' }
			}
       },
        // 满分
        {
            name: "fullScore",
            index: "fullScore",
            editable: false,
            width: 80,
            sortable: false,
			formatter:function(cellvalue, options, rowObject){
				if(!cellvalue){
					return '--'
				}
				else{
					return cellvalue
				}
			},
			cellattr: function(rowId, tv, rawObject, cm, rdata) {
				//合并单元格
				return 'id=\'fullScore' + rowId + "\'";
				//if (Number(rowId) < 5) { return ' colspan=2' }
			}
        },
        // 条件
        {
            name: "arithmeticShow",
            index: "arithmeticShow",
            editable: false,
            width: 120,
            sortable: false,
			formatter:function(cellvalue, options, rowObject){
				if(!cellvalue){
					return '--'
				}
				else{
					return cellvalue
				}
			}
       },
        // 分值
        {
            name: "arithmeticScore",
            index: "arithmeticScore",
            editable: false,
            width: 120,
            sortable: false,
			formatter:function(cellvalue, options, rowObject){
				if(!cellvalue){
					return '--'
				}
				else{
					return cellvalue
				}
			}
                 },
    ],
	gridComplete:function(){
		var gridName = 'table';
		checkTem.Merger(gridName,'one_checkKindName');
		checkTem.Merger(gridName,'two_checkKindName');
		checkTem.Merger(gridName,'arithmeticName');
		checkTem.Merger(gridName,'arithmeticName,targetArithmetic');
		checkTem.Merger(gridName,'arithmeticName,checkTarget');
		checkTem.Merger(gridName,'arithmeticName,fullScore');
	}
});
  

jqgrid是动态加载数据的，所以我们得动态的给每个需要合并的单元格设定id

cellattr: function(rowId, tv, rawObject, cm, rdata) {
	//合并单元格
	return 'id=\'checkTarget' + rowId + "\'";
	//if (Number(rowId) < 5) { return ' colspan=2' }
}

jqgrid初始化完成之后，在gridComplete方法里调用merge方法，合并单元格。

function Merger(gridName, CellName) {
	//得到显示到界面的id集合
	var mya = $("#" + gridName + "").getDataIDs();
	//当前显示多少条
	var length = mya.length;
	for (var i = 0; i < length; i++) {
		//从上到下获取一条信息
		var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
		//定义合并行数
		var rowSpanTaxCount = 1;
		for (j = i + 1; j <= length; j++) {
			//和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
			var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
			var cellNames = CellName.split(",");
			if(cellNames.length == 1){
				if (before[cellNames[0]] == end[cellNames[0]] ) {
					rowSpanTaxCount++;
					$("#" + gridName + "").setCell(mya[j], cellNames[0], '', { display: 'none' });
				} else {
					rowSpanTaxCount = 1;
					break;
				}
				$("#" + cellNames[0] + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);//最后合并需要合并的行与合并的行数
				$("#" + cellNames[0] + "" + mya[i] + "").css("vertical-align","middle");

			}else{
				if (before[cellNames[0]] == end[cellNames[0]] ) {
					if(before[cellNames[1]] == end[cellNames[1]]){
						rowSpanTaxCount++;
						$("#" + gridName + "").setCell(mya[j], cellNames[1], '', { display: 'none' });
					}else{
						rowSpanTaxCount = 1;
						break;
					}
				} else {
					rowSpanTaxCount = 1;
					break;
				}
				$("#" + cellNames[1] + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);//最后合并需要合并的行与合并的行数
				$("#" + cellNames[1] + "" + mya[i] + "").css("vertical-align","middle");
			}
		}
	}

}