jQGrid 대해서 2/2

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

1. 메소드

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

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

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

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

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인 상태에서만 동작합니다.

$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);
1
2
3
4
5
// 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));
        }
    );
}
 

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

 

 

3. 마치며

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

참고도서 및 사이트

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

출처:http://www.nextree.co.kr/p11216/