jqGrid (메소드)

jqGrid/함수 2015. 10. 22. 19:44

728x90

jqGrid 첫번째 글에서는 그리드의 환경설정과 그리드를 사용하기 위해서 꼭 필요한 몇 가지들을 알아보았습니다. 이번 글에서는 프로젝트를 진행하면서 많이 사용한 그리드 메소드와 경험을 소개하겠습니다.

1. 메소드

그리드에서 제공하는 메소드를 사용하기 위한 사용법부터 알아보겠습니다.

1 2	jQuery('#grid_id').jqGridMethod( parameter1,...parameterN ); ex) jQuery('#grid_id').setGridParam({...}).hideCol('somecol').trigger('reloadGrid');

grid_id는 그리드가 설정된 ID입니다.
jqGridMethod는 그리드에서 제공하는 메소드입니다.
메소드에 따라 parameter가 존재할 수 있습니다.

그리드에서 기본적으로 제공하는 메소드의 사용법은 위와 같습니다. 그리드 3.6버전 이후부터는 새롭게 추가된 방식으로 메소드를 사용할 수 있습니다.

1 2	jQuery("#grid_id").jqGrid('jqGridMethod', parameter1,...parameterN ); ex)jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");

grid_id는 그리드가 설정된 ID입니다.
jqGrid는 그리드의 인스턴스입니다.
jqGridMethod는 그리드에서 제공하는 메소드입니다.
메소드에 따라 parameter가 존재할 수 있습니다.

여기서 중요한 것은 jqGrid()안에 메소드명을 써줘야 하는데 꼭 ‘메소드명’의 형태로 써줘야 합니다. 다음으로 프로젝트를 진행하면서 많이 사용하였던 메소드에 대해 소개하겠습니다.

addRowData(rowId, data, position, srcRowId) 그리드에서 행을 추가해주는 메소드입니다.

rowId : 추가되는 행의 ID를 설정해줍니다.
data : 추가될 데이터입니다. 기존에 존재하는 데이터의 길이가 같아야 합니다.
position : 데이터가 추가될 위치를 정해줍니다. ‘first’, ‘last’, ‘before’, ‘after’ 4가지의 속성이 있습니다.
srcRowId : position의 값이 ‘before’, ‘after’일 때 설정해줍니다. ID값이 들어옵니다.

var addData = {

"id" : "006",

"name": "영진킴",

"age" : "26",

"sex" : "male",

"position" : "사원"

};

// before 3.6v

$Grid.addRowData('006',addData,'after','002');

// after 3.6v

$Grid.jqGrid('addRowData','006',addData,'after','002');

clearGridData() 현재 불러온 데이터를 초기화시켜주는 메소드입니다. 서버에 존재하는 데이터는 삭제되지 않습니다.

// before 3.6v

$Grid.clearGridData();

// after 3.6v

$Grid.jqGrid('clearGridData');

delRowData(rowId) rowId에 해당하는 행을 삭제해주는 메소드입니다. 서버에 존재하는 데이터는 삭제되지 않습니다.

// before 3.6v

$Grid.delRowData('001');

// after 3.6v

$Grid.jqGrid('delRowData','001');

getCell(rowId, iCol)

특정 셀에 있는 데이터를 가지고 오는 메소드입니다.

rowId : 가지고 올 데이터의 ID를 설정해줍니다.
iCol : 가지고 올 colName을 설정해줍니다.

// before 3.6v

var cellData = $Grid.getCell('001','name');

// after 3.6v

var cellData = $Grid.jqGrid('getCell','001','name');

getRowData(rowId)

rowId에 해당하는 데이터를 가져오는 메소드입니다.

//before 3.6v

var rowData = $Grid.getRowData('001');

//after 3.6v

var rowData = $Grid.jqGrid('getRowData','001');

setRowData(rowId, data, cssProp)

데이터를 수정할 수 있는 메소드입니다. 서버에 존재하는 데이터는 수정되지 않습니다.

rowId : 수정될 행의 ID를 설정해줍니다.
data : 추가될 데이터입니다. 기존에 존재하는 데이터의 길이가 같아야 합니다.
cssProp : CSS속성을 설정할 수 있습니다.

setRowData 메소드를 사용시 data는 수정하지 않고 CSS만 적용하는 경우가 많은대 그때는 data에 false 값을 주고 CSS설정만 해주면 됩니다.

// before 3.6v

$Grid.setRowData('001', false, { background : '#feffc4' });

// after 3.6v

$Grid.jqGrid('setRowData', '002', false, { background : '#feffc4' });

getDataIDs()

전체 데이터의 ID를 가져오는 메소드입니다.

// before 3.6v

var dataIds = $Grid.getDataIDs();

// after 3.6v

var dataIds = $Grid.jqGrid('getDataIDs');

trigger(“reloadGrid”)

그리드를 다시 불러오는 메소드입니다. 이 메소드는 그리드의 속성 중 하나인 loadonce 속성이 false인 상태에서만 동작합니다.

1	$Grid.trigger('reloadGrid');

getGridParam(name)

name에 해당하는 값을 반환해주는 메소드 입니다. name에 종류로는 그리드 options에 해당하는 값이 올 수 있습니다.

대표적으로 selrow, selarrrow가 자주 사용됩니다.

selrow : 선택한 행의 ID를 가지고 옵니다. 여러 행이 선택되었다면 제일 마지막에 선택된 행의 ID를 가지고 옵니다.
selarrrow : 여러 행을 선택하였을 때 각각의 ID를 가지고 옵니다.

// before 3.6v

var selRowId = $Grid.getGridParam('selrow');

var selRowIds = $Grid.getGridParam('selarrrow');

// after 3.6v

var selRowId = $Grid.jqGrid('getGridParam','selrow');

var selRowIds = $Grid.jqGrid('getGridParam','selarrrow');

setGridParam()

그리드 options에 해당하는 값을 수정할 수 있습니다.

대표적으로 postData, url이 자주 사용됩니다. 또 setGridParam 메소드는 위에서 설명한 trigger 메소드와 같이 자주 사용됩니다.

예를 들어 postData에 검색할 값을 설정하고 바로 trigger메소드를 호출하면 검색한 데이터가 그리드에 그려지는 조회 기능을 구현할 수 있습니다.

var searchData = '검색조건';

// getGridParam을 이용해서 postData를 가져온다.

var postData = $Grid.jqGrid('getGridParam','postData');

// postData에 검색할 data 세팅

postData.search = searchData;

// setGridParam을 이용해서 postData에 새로 설정해준 postData 설정 후 그리드를 다시 불러온다.

// before 3.6v

$Grid.setGridParam({'postData' : postData}).trigger('reloadGrid');

// after 3.6v

$Grid.jqGrid('setGridParam', {'postData' : postData}).trigger('reloadGrid');

setSelection(rowId, onSelectRowEvent)

특정 그리드 행을 선택/해제할 수 있는 메소드입니다.

rowId : 선택될 행의 ID를 설정해줍니다.
onSelectRowEvent : onSelectRow 이벤트를 활성화/비활성화할 수 있습니다. true/false 값이 들어오고 기본값은 true입니다.

// before 3.6v

$Grid.setSelection('001',false);

// after 3.6v

$Grid.jqGrid('setSelection','001',false);

resetSelection()

선택된 행을 해제하는 메소드입니다.

// before 3.6v

$Grid.resetSelection();

// after 3.6v

$Grid.jqGrid('resetSelection');

2. 경험사례

실제 프로젝트에서 그리드를 사용한 모습을 살펴보겠습니다.

위에 보시는 그림은 실제 프로젝트에서 구현한 화면입니다. 위 화면에서 고객의 요구사항에 따라 정렬 기능을 추가하려고 합니다. 그리드의 장점 중의 하나는 정렬 기능을 제공해준다는 것이지만 그리드의 형식에 맞추어 서버를 구현한다면 오히려 시간이 더 많이 들 수도 있고 이 점을 어떤 이가 악용한다면 서버 과부하가 걸릴 수 있을 것입니다. 지금부터 간단한 정렬을 소개하도록 하겠습니다.

<textarea class="crayon-plain print-no" style="line-height: 15px !important; overflow: hidden; font-size: 12px !important; z-index: 0; opacity: 0; -moz-tab-size: 4; -o-tab-size: 4; -webkit-tab-size: 4; tab-size: 4;" wrap="soft" readonly="" data-settings="dblclick">// 그리드의 이벤트 중 하나인 onSortCol을 이용합니다. onSortCol : function(index, iCol, sortOrder) { $Grid.setGridParam({datatype: 'local', loadonce : true}); // 그리드의 데이터를 가져와서 json sort 해줍니다. var obj = $Grid.jqGrid('getRowData'); obj = sortByKey(obj, index); // 그리드의 데이터를 clear하고 정렬된 json을 다시 세팅합니다. $Grid.clearGridData(); $Grid.setGridParam({data:obj}).trigger("reloadGrid"); $Grid.setGridParam({datatype: 'json', loadonce : false}); // onSortCol 이벤트를 커스터마이징 한것이므로 기존의 이벤트를 부르지 못하게 stop 해줍니다. return 'stop'; } // sortByKey 함수는 자바스크립트에서 제공하는 sort를 이용하여 구현 function sortByKey(array, key) { return array.sort( function(a, b) { var x = a[key]; var y = b[key]; return ((x < y) ? -1 : ((x > y) ? 1 : 0)); } ); }</textarea>

// 그리드의 이벤트 중 하나인 onSortCol을 이용합니다.

onSortCol : function(index, iCol, sortOrder) {

$Grid.setGridParam({datatype: 'local', loadonce : true});

// 그리드의 데이터를 가져와서 json sort 해줍니다.

var obj = $Grid.jqGrid('getRowData');

obj = sortByKey(obj, index);

// 그리드의 데이터를 clear하고 정렬된 json을 다시 세팅합니다.

$Grid.clearGridData();

$Grid.setGridParam({data:obj}).trigger("reloadGrid");

$Grid.setGridParam({datatype: 'json', loadonce : false});

// onSortCol 이벤트를 커스터마이징 한것이므로 기존의 이벤트를 부르지 못하게 stop 해줍니다.

return 'stop';

}

// sortByKey 함수는 자바스크립트에서 제공하는 sort를 이용하여 구현

function sortByKey(array, key) {

return array.sort(

function(a, b) {

var x = a[key];

var y = b[key];

return ((x < y) ? -1 : ((x > y) ? 1 : 0));

}

);

}

그리드에서 컬럼 헤더를 클릭할 때 발생하는 이벤트를 이용하여 구현한 예제입니다. 위의 예제를 설명하자면 그리드는 헤더를 클릭 시 ajax 통신을 통해서 데이터를 가지고 옵니다. 이때 이벤트 안에서 datatype을 local형식으로 조작 후 현재 불러온 데이터만 가지고 자바스크립트를 이용하여 정렬해준 후 이벤트를 빠져나오는 방식으로 구현했습니다. 위의 예제는 데이터를 json 방식으로 가져왔을 때의 예제입니다.

3. 마치며

그리드의 메소드와 간략한 예제를 소개하였습니다. 이 말고도 실제 프로젝트에서 그리드를 이용한 다양한 예제가 많이 있지만, 그리드의 장점이지만 단점일 수도 있는 정렬 예제를 소개했습니다. 제가 소개한 것은 그리드의 한 부분입니다. 그리드를 더 많이 이해하고 활용한다면 보다 쉽고 편리한 개발이 되겠지요. 감사합니다.

참고도서 및 사이트

jqGrid Wiki methods(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods)

[출처] jqGrid (메소드)|작성자 듀스포에

1. 메소드

그리드에서 제공하는 메소드를 사용하기 위한 사용법부터 알아보겠습니다.

1 2	jQuery('#grid_id').jqGridMethod( parameter1,...parameterN ); ex) jQuery('#grid_id').setGridParam({...}).hideCol('somecol').trigger('reloadGrid');

grid_id는 그리드가 설정된 ID입니다.
jqGridMethod는 그리드에서 제공하는 메소드입니다.
메소드에 따라 parameter가 존재할 수 있습니다.

1 2	jQuery("#grid_id").jqGrid('jqGridMethod', parameter1,...parameterN ); ex)jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");

grid_id는 그리드가 설정된 ID입니다.
jqGrid는 그리드의 인스턴스입니다.
jqGridMethod는 그리드에서 제공하는 메소드입니다.
메소드에 따라 parameter가 존재할 수 있습니다.

addRowData(rowId, data, position, srcRowId) 그리드에서 행을 추가해주는 메소드입니다.

rowId : 추가되는 행의 ID를 설정해줍니다.
data : 추가될 데이터입니다. 기존에 존재하는 데이터의 길이가 같아야 합니다.
position : 데이터가 추가될 위치를 정해줍니다. ‘first’, ‘last’, ‘before’, ‘after’ 4가지의 속성이 있습니다.
srcRowId : position의 값이 ‘before’, ‘after’일 때 설정해줍니다. ID값이 들어옵니다.

var addData = {

"id" : "006",

"name": "영진킴",

"age" : "26",

"sex" : "male",

"position" : "사원"

};

// before 3.6v

$Grid.addRowData('006',addData,'after','002');

// after 3.6v

$Grid.jqGrid('addRowData','006',addData,'after','002');

clearGridData() 현재 불러온 데이터를 초기화시켜주는 메소드입니다. 서버에 존재하는 데이터는 삭제되지 않습니다.

// before 3.6v

$Grid.clearGridData();

// after 3.6v

$Grid.jqGrid('clearGridData');

delRowData(rowId) rowId에 해당하는 행을 삭제해주는 메소드입니다. 서버에 존재하는 데이터는 삭제되지 않습니다.

// before 3.6v

$Grid.delRowData('001');

// after 3.6v

$Grid.jqGrid('delRowData','001');

getCell(rowId, iCol)

특정 셀에 있는 데이터를 가지고 오는 메소드입니다.

rowId : 가지고 올 데이터의 ID를 설정해줍니다.
iCol : 가지고 올 colName을 설정해줍니다.

// before 3.6v

var cellData = $Grid.getCell('001','name');

// after 3.6v

var cellData = $Grid.jqGrid('getCell','001','name');

getRowData(rowId)

rowId에 해당하는 데이터를 가져오는 메소드입니다.

//before 3.6v

var rowData = $Grid.getRowData('001');

//after 3.6v

var rowData = $Grid.jqGrid('getRowData','001');

setRowData(rowId, data, cssProp)

데이터를 수정할 수 있는 메소드입니다. 서버에 존재하는 데이터는 수정되지 않습니다.

rowId : 수정될 행의 ID를 설정해줍니다.
data : 추가될 데이터입니다. 기존에 존재하는 데이터의 길이가 같아야 합니다.
cssProp : CSS속성을 설정할 수 있습니다.

setRowData 메소드를 사용시 data는 수정하지 않고 CSS만 적용하는 경우가 많은대 그때는 data에 false 값을 주고 CSS설정만 해주면 됩니다.

// before 3.6v

$Grid.setRowData('001', false, { background : '#feffc4' });

// after 3.6v

$Grid.jqGrid('setRowData', '002', false, { background : '#feffc4' });

getDataIDs()

전체 데이터의 ID를 가져오는 메소드입니다.

// before 3.6v

var dataIds = $Grid.getDataIDs();

// after 3.6v

var dataIds = $Grid.jqGrid('getDataIDs');

trigger(“reloadGrid”)

그리드를 다시 불러오는 메소드입니다. 이 메소드는 그리드의 속성 중 하나인 loadonce 속성이 false인 상태에서만 동작합니다.

1	$Grid.trigger('reloadGrid');

getGridParam(name)

name에 해당하는 값을 반환해주는 메소드 입니다. name에 종류로는 그리드 options에 해당하는 값이 올 수 있습니다.

대표적으로 selrow, selarrrow가 자주 사용됩니다.

selrow : 선택한 행의 ID를 가지고 옵니다. 여러 행이 선택되었다면 제일 마지막에 선택된 행의 ID를 가지고 옵니다.
selarrrow : 여러 행을 선택하였을 때 각각의 ID를 가지고 옵니다.

// before 3.6v

var selRowId = $Grid.getGridParam('selrow');

var selRowIds = $Grid.getGridParam('selarrrow');

// after 3.6v

var selRowId = $Grid.jqGrid('getGridParam','selrow');

var selRowIds = $Grid.jqGrid('getGridParam','selarrrow');

setGridParam()

그리드 options에 해당하는 값을 수정할 수 있습니다.

대표적으로 postData, url이 자주 사용됩니다. 또 setGridParam 메소드는 위에서 설명한 trigger 메소드와 같이 자주 사용됩니다.

예를 들어 postData에 검색할 값을 설정하고 바로 trigger메소드를 호출하면 검색한 데이터가 그리드에 그려지는 조회 기능을 구현할 수 있습니다.

var searchData = '검색조건';

// getGridParam을 이용해서 postData를 가져온다.

var postData = $Grid.jqGrid('getGridParam','postData');

// postData에 검색할 data 세팅

postData.search = searchData;

// setGridParam을 이용해서 postData에 새로 설정해준 postData 설정 후 그리드를 다시 불러온다.

// before 3.6v

$Grid.setGridParam({'postData' : postData}).trigger('reloadGrid');

// after 3.6v

$Grid.jqGrid('setGridParam', {'postData' : postData}).trigger('reloadGrid');

setSelection(rowId, onSelectRowEvent)

특정 그리드 행을 선택/해제할 수 있는 메소드입니다.

rowId : 선택될 행의 ID를 설정해줍니다.
onSelectRowEvent : onSelectRow 이벤트를 활성화/비활성화할 수 있습니다. true/false 값이 들어오고 기본값은 true입니다.

// before 3.6v

$Grid.setSelection('001',false);

// after 3.6v

$Grid.jqGrid('setSelection','001',false);

resetSelection()

선택된 행을 해제하는 메소드입니다.

// before 3.6v

$Grid.resetSelection();

// after 3.6v

$Grid.jqGrid('resetSelection');

2. 경험사례

실제 프로젝트에서 그리드를 사용한 모습을 살펴보겠습니다.

// 그리드의 이벤트 중 하나인 onSortCol을 이용합니다.

onSortCol : function(index, iCol, sortOrder) {

$Grid.setGridParam({datatype: 'local', loadonce : true});

// 그리드의 데이터를 가져와서 json sort 해줍니다.

var obj = $Grid.jqGrid('getRowData');

obj = sortByKey(obj, index);

// 그리드의 데이터를 clear하고 정렬된 json을 다시 세팅합니다.

$Grid.clearGridData();

$Grid.setGridParam({data:obj}).trigger("reloadGrid");

$Grid.setGridParam({datatype: 'json', loadonce : false});

// onSortCol 이벤트를 커스터마이징 한것이므로 기존의 이벤트를 부르지 못하게 stop 해줍니다.

return 'stop';

}

// sortByKey 함수는 자바스크립트에서 제공하는 sort를 이용하여 구현

function sortByKey(array, key) {

return array.sort(

function(a, b) {

var x = a[key];

var y = b[key];

return ((x < y) ? -1 : ((x > y) ? 1 : 0));

}

);

}

3. 마치며

참고도서 및 사이트

jqGrid Wiki methods(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods)

[출처] jqGrid (메소드)|작성자 듀스포에

728x90

저작자표시

'jqGrid > 함수' 카테고리의 다른 글

[Tapestry] JQGrid 커스텀 컴포넌트 개발일지 (0)	2015.10.22
jqGrid 추가 옵션 (0)	2015.10.22
JqGrid 속성 (1)	2015.10.22

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

160x600

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30