[jQgrid] 같은 데이터가 나오는 곳 계산 후 rowspan

jQgrid를 사용할 때 같은 데이터가 나오는 곳까지를 계산한 후 rowspan을 하는 방식

[1. JavaScript 함수 2개 추가]
	/* 개수에 따라 다르지만 rowspan하려는 열이 하나라면 switch문을 사용할 필요 없이 하나만 사용하면 된다.(switch문의 하나) */
	/* 페이저를 사용하면 rowspan이 풀리는 현상이 있다. sortable 또한 false로 해야한다. */
	
	Form(rowId, val, rawObject, cm, rdata) {
		var result;
		const cellName = cm.name;

		switch (cellName) {
			case 'GROUP_NAME_L':
				if (this.prevCellVal.value == val) {
					result = ' style="display: none" rowspanid="' + this.prevCellVal.cellId + '"';
				} else {
					var cellId = 'row_' + rowId + '_' + cm.name;
					result = ' rowspan="1" id="' + cellId + '"';

					this.prevCellVal = {cellId: cellId, value: val};
					result += 'style="background-color: #f2f2f2"';
				}
				break;
			case 'GROUP_NAME_M':
				if (this.connCellVal.value == val) {
					result = ' style="display: none" rowspanid="' + this.connCellVal.cellId + '"';
				} else {
					var cellId = 'row_' + rowId + '_' + cm.name;
					result = ' rowspan="1" id="' + cellId + '"';

					this.connCellVal = {cellId: cellId, value: val};
					result += 'style="background-color: #f2f2f2"';
				}
				break;
		}

		return result;
	},

	/* rowSpan*/
	PageLoadGrid() {
		const oThis = this;
		oThis.prevCellVal = {cellId: undefined, value: undefined};
		oThis.currConnIdVal = {cellId: undefined, value: undefined};

		const grid = document.getElementById(`${oThis.prefix}grid`);

		$('td[rowspan="1"]', grid).each(function (i, target) {
			var spans = $('td[rowspanid="' + this.id + '"]', grid).length + 1;

			if (spans > 1) {
				$(this).attr('rowspan', spans);
				const rowData = {GROUP_NAME: '합계'}

				// oThis.$list.jqGrid('addRowData', this.id + 1, rowData, 'end');
			}
		});
	},
	
[2. 전역 변수로 객체 선언]
	/* rowspan할 열이 하나라면 해당 객체도 하나만 선언하면 된다. */
	prevCellVal: {},
	connCellVal: {},
	
[3. 해당하는 열의 colMake에 cellattr 적용]
	/* sortable 하면 rowspan이 깨지기 때문에 sortable은 막아주어야 함. 또한 처음에 만든 함수를 연결*/
	colMake.setOpt('회원', 'GROUP_NAME_L', 110, ColAlign.Center, {
			cellattr: (rowId, val, rawObject, cm, rdata) => {
				return oThis.Form(rowId, val, rawObject, cm, rdata);
			},
			sortable: false
		}
	);
	colMake.setOpt('상품', 'GROUP_NAME_M', 110, ColAlign.Center, {
		cellattr: (rowId, val, rawObject, cm, rdata) => {
			return oThis.Form(rowId, val, rawObject, cm, rdata);
		},
		sortable: false
	});
		
[4. gridComplete()에서 함수 실행]
	/* 해당 함수를 실행함으로서 rowspan을 실행할 수 있다. */
	oThis.PageLoadGrid();

여기서의 핵심은
oThis.prevCellVal = {cellId: undefined, value: undefined};
oThis.currConnIdVal = {cellId: undefined, value: undefined};
을 맞게 초기화하는 것입니다.

Grid를 reload하는 이벤트에 맞게 적용하면 됩니다.