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");
			}
		}
	}

}