【JqGrid】jqgrid合併單元格之jeesite（jsite）項目中dataGrid合併單元格

1、參考jqgrid官方的事件和方法
http://www.trirand.com/jqgridwik ... %5B%5D=gridcomplete
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

2、Demo如下：

代碼看下面：

3.在項目中的應用

 

//初始化DataTables對象
$('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	autoGridWidth:false,
	columnModel: [
		{header:'ID', name:'lineNo',index:'a.line_no', width:90, align:"center",hidden:true},
		{header:'${i18n("交貨通知單號")}', name:'orderNo',index:'a.order_no', width:90, align:"center",sortable:false,cellattr: function(rowId, tv, row, cm, val) {
			 //合併單元格
            return 'id=\'orderNo' + rowId + "\'"; 
		  }},
		{header:'${i18n("項次")}', name:'orderItem',index:'a.order_item', width:50,sortable:false, align:"center"},
		{header:'${i18n("出貨數量")}', name:'shipedqty',index:'a.shipedqty', width:90,sortable:false, align:"center"},			
		{header:'${i18n("預計出貨時間")}', name:'etd',index:'a.etd', width:130, sortable:false,align:"center",cellattr: function(rowId, tv, row, cm, val) {
				 //合併單元格
	            return 'id=\'etd' + rowId + "\'"; 
			  }},
		{header:'${i18n("倉庫代碼")}', name:'facilityCd',index:'a.fromfacility_cd', width:90,sortable:false, align:"center"},
		{header:'${i18n("備註")}', name:'remark',index:'a.remark', width:90,sortable:false, align:"center"}
	],
	dataId: 'lineNo',
	showRownum: true,
	showCheckbox: true, 
	// 加載成功後執行事件
	ajaxSuccess: function(data){
		MergerRowspan("dataGrid", 'orderNo');
		MergerRowspanToOther("dataGrid", 'orderNo','shippedDate');
		MergerRowspanToOther("dataGrid", 'orderNo','etd');  
	}
});




//公共調用方法合併單元格（無需修改）
function MergerRowspan(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]);
			if (before[CellName] == end[CellName]) {
				rowSpanTaxCount++;
				$("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
			} else {
				rowSpanTaxCount = 1;
				break;
			}
			$("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
		}
	}
}
//根據某一欄位值去合併另一欄位（根據cellName和並otherCellName,上邊舉例根據交貨通知單號 合併預出貨日期單元格）
function MergerRowspanToOther(gridName, CellName,otherCellName) {
	//得到顯示到界面的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]);
			if (before[CellName] == end[CellName]) {
				rowSpanTaxCount++;
				$("#" + gridName + "").setCell(mya[j], otherCellName, '', { display: 'none' });
			} else {
				rowSpanTaxCount = 1;
				break;
			}
			$("#" + otherCellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
		}
	}
}
//公共調用方法合併單元格（根據需要修改修改）
function MergerColspan(gridName,rowId,id,CellName) {
	
	$("#" + gridName + "").setCell(rowId, id, '', { display: 'none' });
	$("#" + CellName + "" + rowId + "").attr("colspan", 2);
	
}

參考博客：https://blog.csdn.net/zsq520520/article/details/53375438