[ParamQuery] 셀 병합하기(merge cell)

PQ그리드를 활용하여 그리드를 그리는 도중 셀 병합한 작업을 기록해본다!

 

function build_grid(){
	
    ...
   
	$("#my_grid").pqGrid(obj);

	$( "#my_grid" ).pqGrid({
		complete: function (event, ui) {
			autoMerge(this, true);
		}
	} );
    
 }

function autoMerge(grid, refresh) {
    
    var mc = [],
        CM = grid.option("colModel"),
        i = 5,
        data = grid.option("dataModel.data");

    var dataIndx = CM[i].dataIndx,
        rc = 1,
        j = data.length;
    
    while (j--) {
        var cd = data[j][dataIndx],
            cd_prev = data[j - 1] ? data[j - 1][dataIndx] : undefined;
        if (cd_prev !== undefined && cd == cd_prev) {
            rc++;
        }
        else if (rc > 1) {
            mc.push({ r1: j, c1: i, rc: rc, cc: 1, style: 'align-content: center;' });
            rc = 1;
        }
    }
    
	grid.option("mergeCells", mc);
	
	if (refresh) {
	    grid.refreshView();
	}
}

 

merge와 관련된 속성의 설명은 아래와 같다!

r1 : 머지할 셀의 시작 행 번호
c1 : 머지할 셀의 시작 열 번호
rc : 머지할 셀의 행 수 (row count)
cc : 머지할 셀의 열 수 (column count)

 

 

위 코드에서 

style: 'align-content: center;'

이 부분은 셀 병합을 한 후, 수직 정렬을 맞춰주기 위해 추가해준 부분이다.

 

vertical-align: middle로 해봤지만 반응이 없었고 align-content: center로 해주니 정렬됐다!!😆

 

 

셀 병합을 하는 경우, 함수를 사용하지 않고 mergeCells 옵션에서 바로 병합하는 방법도 있다.

아래 코드는 공식 문서에 나와있는 부분이다.

mergeCells: [
//r1 is shorthand for rowIndx, c1 for colIndx, rc for rowCount or rowspan, cc for columnCount or colspan.
    {r1: 0, c1: 2, rc: 4, cc: 5 },
    { r1: 5, c1: 4, rc: 4, cc: 4 },
    { r1: 10, c1: 7, rc: 400, cc: 4, style: 'background:#eee;' },
    { r1: 1, c1: 0, rc: 5, cc: 1, style: 'background:#ffffaa;' },
    { r1: 6, c1: 0, rc: 1000, cc: 1, style: 'background:lightgreen;' }
],

 

 

jQuery Grid Merge Cell options

 

---

[출처]

• https://paramquery.com/demos/merge_cell