[jqGrid] 주요 메서드와 이벤트 총정리

내가 보려고 카테고리별로 나눈 jqGrid의 주요 메서드와 이벤트

 

1. 데이터 관련 메서드

일단 제일 많이 쓰는 데이터 가져오기/설정하기 메서드들

// 데이터 가져오기
$grid.getRowData(rowId)          // 특정 행 데이터. 제일 자주 씀
$grid.getDataIDs()               // 모든 행 ID 배열. forEach 돌릴 때 씀
$grid.getLocalRow(rowId)         // 로컬 데이터에서 가져올 때
$grid.getCell(rowId, colName)    // 특정 셀만 필요할 때
$grid.getCol(colName)            // 컬럼 전체 값이 필요할 때
$grid.getGridParam('data')       // 그리드 전체 데이터

// 데이터 설정
$grid.setRowData(rowId, data)    // 행 데이터 수정할 때
$grid.setCell(rowId, colName, data) // 셀 하나만 수정
$grid.addRowData(rowId, data)    // 새 행 추가
$grid.delRowData(rowId)          // 행 삭제

 

 

2. 그리드 파라미터

그리드 상태 관련. page, sort 이런거 많이 씀

// 기본 사용법
$grid.getGridParam('파라미터명')   
$grid.setGridParam({
    page: 1,
    rowNum: 20,
    sortname: 'id',
    sortorder: 'asc'
})

// 자주 쓰는 파라미터들
'records'       // 전체 레코드 수
'page'          // 현재 페이지 
'rowNum'        // 페이지당 행 수
'sortname'      // 정렬 컬럼명
'sortorder'     // 정렬 순서(asc/desc)
'selrow'        // 선택된 행 ID
'selarrrow'     // 다중 선택된 행 ID 배열

 

 

3. 그리드 동작 메서드

자주 쓰는 기본 동작들. 데이터 새로고침이나 초기화할 때 많이 씀

$grid.trigger('reloadGrid')      // 새로고침. 검색이나 데이터 변경 후에 많이 씀
$grid.clearGridData()            // 데이터 초기화. 보통 에러 났을 때 비울 때 씀
$grid.setSelection(rowId)        // 특정 행 선택하고 싶을 때
$grid.resetSelection()           // 선택 초기화. 다중선택 모드에서 유용
$grid.showCol(colName)           // 숨겼던 컬럼 다시 보여줄 때
$grid.hideCol(colName)           // 특정 컬럼 숨기고 싶을 때

 

 

 

4. 이벤트 핸들러 ★★★

진짜 중요함. 그리드 대부분의 기능을 여기서 컨트롤함

{
    // 데이터 로딩 관련
    beforeRequest: function() {    
        // 서버 요청 전에 뭔가 처리해야할 때. 파라미터 조작 많이 함
    }, 
    loadComplete: function(data) {
        // 제일 많이 씀. 데이터 로드 후 추가 처리할 때
        // 아이콘 추가나 스타일 변경 등을 여기서 함
    },
    loadError: function(xhr,status,error) {
        // 에러 처리. 보통 여기서 alert 띄움
    },
    
    // 행 관련
    beforeSelectRow: function(rowid, e) {
        // 행 선택 전에 체크할 게 있을 때
    },
    onSelectRow: function(rowid, status, e) {
        // 행 클릭했을 때 추가 동작 필요하면 여기서
    },
    afterInsertRow: function(rowid, rowdata, rowelem) {
        // 새 행 추가된 후 처리
    },
    
    // 셀 관련
    onCellSelect: function(rowid,iCol,cellcontent,e) {
        // 특정 셀 클릭 시 팝업 띄운다든가 할 때
    }
}

 

 

 

5. 데이터 요청/응답 파라미터

백엔드와의 통신 관련. 검색이나 필터링할 때 많이 씀

{
    postData: {              
        // 서버로 보낼 추가 파라미터들
        filters: '',
        searchField: '',
        searchString: '',
        searchOper: ''
    },
    
    jsonReader: {           
        // 서버에서 오는 JSON 구조 정의
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        id: "id"
    }
}

 

 

 

6. 표시 관련 설정

초기 그리드 세팅할 때 쓰는 옵션들

{
    caption: '그리드 제목',
    height: 'auto',      // 높이 자동조절
    autowidth: true,     // 너비 자동조절
    shrinkToFit: true,   // 컬럼 너비 자동맞춤
    rownumbers: true,    // 행번호 보여줄지
    multiselect: true,   // checkbox 다중선택
    viewrecords: true,   // 전체 레코드 수 표시
    pager: '#pager',     // 페이징 처리
    rowList: [10,20,30], // 페이지 사이즈 옵션
    loadui: 'disable'    // 로딩 중 표시 끌지
}

 

 

 

7. 검색/필터 관련

검색 기능 넣을 때 씀

$grid.searchGrid({
    // 고급 검색 설정
    multipleSearch: true,    // 다중 조건 검색
    multipleGroup: true,     // 그룹 검색
    showQuery: true          // 쿼리 보여주기
})

$grid.filterToolbar({
    // 툴바 검색 설정
    defaultSearch: 'cn',     // contains 검색
    searchOperators: true    // 검색 연산자 사용
})

 

 

실제 사용하면서 겪은 이슈들

• loadComplete 안에서 setRowData 쓸 때 무한루프 주의해야 함
• formatter에서 무거운 작업하면 확실히 느려짐. 최대한 간단하게 쓰기
• multiselect 쓸 때 데이터 새로고침하면 선택 풀리는거 주의
• IE에서 작동 안 하는 기능들 있으니 크로스브라우징 필요하면 테스트 필수
• 서버 사이드 페이징할 때 loadonce: false 꼭 확인하기