Javascript) JqGrid를 사용한 그리드 생성

 SPA Application인 회사 프로그램을 개발하면서 JqGrid를 통해 그리드를 생성하는 일이 다수 있었다. JqGrid는 jQuery에서 제공하는 라이브러리로 페이저, 셀 수정, 멀티 체크 등의 기능을 위해 주로 사용하게 되었다.

 내 경우에는 주로 서버에서 가져온 데이터를 여러 방향으로 사용하면서 가공한 데이터로 그리드를 초기화하다보니 ajax로 바로 가져온 JSON 형태의 데이터를 사용하는 것이 아니라 가져온 로컬 데이터를 사용했다.

 

기본 구조

<table id="grid"></table>
<div id="pager"></div>

<script>
	$('#grid').jqGrid({
    	height: 300,
        width: 400,
        autowidth: false, // width와 함께 사용 불가
        colNames: colNames,
        colModel: colModel,
        rowNum: 10, // 한 페이지에 보여줄 행(row)의 수
        pager: '#pager',
        sortable: true, // 정렬 기능
        multiselect: true, // 다중 선택 기능(checkbox가 행마다 생성)
        emptyrecode: '데이터가 없습니다.', // 데이터가 없을 때 보여줄 문구
        celledit: true,
        cellsubmit: clientArray, // 셀 저장 시 ajax로 전송되지 않음(별도 처리 필요)
        ...
    });
</script>

 

pager

 그리드를 pagination하고자할 때 pager로 사용할 해당 element를 줄 수 있다. div를 전달하면 된다.

<div id='pager'></div>

 

colModel

각 컬럼의 속성을 정의한다.

const colModel = [
	{
        name: '컬럼명', 
        index: '보여질 컬럼명',
        width: 100,
        hidden: true, // true일 경우 숨겨지나, 데이터는 존재한다.
        frozen: false, // 그리드가 좌우로 스크롤해도 해당 컬럼은 고정시켜 보여준다.
	}
];

 

frozen

 colModel에서 각 컬럼에 개별적으로 사용 가능하다. 가장 마지막 컬럼에 틀고정이 적용된다. 'true'일 경우 해당 컬럼이 틀고정된다. 주의할 점은 cellEdit, sortName, sortable과 함께 사용될 수 없다. (인라인 편집을 수행하는 그리드라면 frozen 기능이 동작하지 않는다.)

 

---

이벤트

 모든 이벤트는 아래와 같이 정의시에 작성할 수도 있고, 그리드를 초기화한 후 setGridParam을 통해 추가해줄 수도 있다.

1) 그리드 정의시 이벤트도 함께 정의

$('#grid').jqGrid({
	...,
    onSelectRow: function(rowid, status, evt) {
    
    },
    onSelectAll: function(rowIds, status) {
    
    },
    beforeRequest: function() {
    
    },
    afterEditCell: function(rowId, cellName, value, iRow, iCol) {
    
    },
    afterSaveCell: function(rowId, cellName, value, iRow, iCol) {
    
    }
    ...
});

 

2) 그리드 초기화 후 이벤트 추가

$("grid").jqGrid({
    // ...
});

$("#grid").setGridParam("afterSaveCell", function(rowId, cellName, value, iRow, iCol) {
	// ...
});

 

onSelectRow, onSelectAll

 multiselect 속성의 값을 true로 줄 경우 체크박스가 생성되는데 이를 체크한 행들은 select되는 것으로 간주된다. 셀이 선택될 경우 일어나는 이벤트다.

• cf. 선택된 로우들의 아이디를 얻기 위해서는 $('#grid').jqGrid('getRowData', 'selarrrow')를 사용할 수도 있다.

onSelectRow: function(rowid, status, evt) {
	let data = $('#grid').jqGrid('getRowData', rowid);
},
onSelectAll: function(rowids, status) { // status : 'all select' 상태의 참/거짓 
    for (int i = 0; i < rowids.length; i++) {
    	let data = $('#grid').jqGrid('getRowData', rowids[i]);
    }
}

 

afterEditCell

 셀의 수정이 일어난 후에 동작되는 이벤트다. 하지만 실제로 동작시켜보면, 셀을 수정하기 위해 클릭 시 셀이 활성화되면서 호출된다. 때문에, 이를 이용해 아래와 같이 꼼수를 사용해서 셀이 포커스 아웃될 때마다 데이터가 저장되도록 할 수 있다.

afterEditCell: function(rowid, cellname, value, iRow, iCol) {
	$('#' + rowid + '_' + cellname).blur(function(e) {
    	$('#' + id).jqGrid('saveCell', iRow, iCol);
    });
},
...

 

afterSaveCell

 셀의 데이터가 저장된 후에 발동된다. 저장 후에는 jqGrid의 getChangeCells 함수를 통해 변경된 셀을 알 수 있다. 하지만 나와 같이 local 데이터를 사용할 경우 변경된 로우를 정확하게 알아내기 힘든 경우가 있다. 이럴 때는 컬럼에 숨겨진 값을 담을 수 있게 하고, 셀이 저장되면 afterSaveCell 함수가 호출되면서 인자로 받는 iRow, iCol을 이용해 해당 로우의 셀 데이터의 속성을 변경해주어 변경된 로우와 그렇지 않은 로우를 구분할 수 있다.

 

afterInsertRow

 로우를 삽입한 후에 발동된다. 만약 그리드의 특정 컬럼값으로는 버튼을 넣고 싶다던가 하는 등 로우가 생성된 후에 특정 작업을 하고싶은 경우에 사용할 수 있다.

$("#grid").jqGrid("setGridParam", {
	afterInsertRow: function(rowid, rowData, rowElem) {
    	// 수행할 동작
    }
});

 

---

주요 함수

 내가 작업 중에 자주 사용한 함수 위주로 작성하였다. 대부분의 함수는 $("#grid").jqGrid("함수명", param)의 형태와 $("#grid").함수명(param) 형태 두 가지 모두 지원된다.

const grid = $("#grid");

// 아래 두 함수의 결과는 같다.
const rowDatas1 = grid.jqGrid("getRowData");
const rowDatas2 = grid.getRowData();

 

setGridParam

 그리드의 속성값을 정의한다. 인자로 key와 value를 가진 Object를 받는다. colModels, data 등 뿐만 아니라, 이벤트도 정의할 수 있다.

grid.jqGrid("setGridParam", {colModels: [ ... ], colName: [ ... ]});
grid.jqGrid("setGridParam", {data: source, rowNum: source.length});

 

Cf. 데이터를 재조회해서 그리드에 다시 보여줘야할 경우들이 있다. 이 때에는 그리드의 데이터를 clear해준 뒤 그리드에 데이터를 set해주고 그리드를 리로드해준다.

grid.jqGrid("clearGridData");
grid.jqGrid("setGridParam", {value: source, rowNum: source.length});
grid.trigger("reloadGrid");

 

getGridParam

 그리드의 속성값들을 반환한다. 인자로 속성명을 key로 받는다.

1) 선택된 1개의 로우 아이디 조회

 'multiselect: false'인 경우에는 행를 클릭하면 클릭한 행에 highlight효과가 생긴다. 이 때 해당 행을 '선택'된 로우라고 생각하면 된다.('multiselect: true'인 경우에 체크박스가 checked된 행들이 '선택'된 로우인 것과는 다르다.)

const rowId = jqGrid("getGridParam", "selrow"); // 문자열 형태로 반환

 

2) 선택된 복수의 로우 아이디 조회

 "selarrrow"는 "selrow"와 달리 "select"와 "row"의 약어 사이에 "arr"(array)가 들어간다.

const rowDatas = grid.jqGrid("getGridParam", "selarrrow");

 

clearGridData

grid.jqGrid("clearGridData");

 

reloadGrid(trigger 함수의 인자로 함수명 전달)

grid.trigger("reloadGrid");

 

getRowData

 로우 데이터를 가져온다. 인자를 안받는 경우에는 모든 로우의 데이터를 배열 형태로 리턴하고, 하나의 인자를 받는 경우에는 로우 아이디를 받아, 이 로우의 데이터를 객체 형태로 리턴한다. RowID는 1부터 시작함에 유의하자. (Cell은 0부터 시작한다.)

Cf. 선택된 하나 혹은 여러 개의 로우 데이터를 받아야하는 경우가 빈번하다. 이 때에는 선택된 로우(들)의 아이디를 리턴하는 코드와  함께 사용하면 된다.

const grid = $("#grid");
const rowId = grid.jqGrid("getGridParam", "selrow");
const rowData = grid.jqGrid("getRowData", rowId);