jqGrid는 웹 애플리케이션에서 그리드 데이터를 쉽게 관리할 수 있는 강력한 도구입니다. 이를 통해 데이터를 표시하고 수정하는 등 다양한 작업을 할 수 있습니다. 이번 글에서는 jqGrid에서 자주 사용되는 여러 함수에 대해 간단히 설명하고, 각 함수의 사용 예제를 제공합니다.
getDataIDs
getDataIDs 함수는 그리드에 있는 모든 행의 ID 목록을 배열로 반환합니다. 데이터를 처리할 때 특정 행을 선택하거나 수정할 때 유용하게 사용할 수 있습니다.
var ids = $("#grid").jqGrid('getDataIDs');
console.log(ids); // 모든 행의 ID 출력
getRowData
getRowData 함수는 특정 행의 데이터를 객체 형식으로 반환합니다. 매개변수로 행 ID를 전달하면 해당 행의 데이터를 가져올 수 있습니다.
var rowData = $("#grid").jqGrid('getRowData', rowId);
console.log(rowData); // 특정 행의 데이터 출력
getCol
getCol 함수는 특정 컬럼의 모든 데이터를 배열로 반환합니다. 매개변수로 컬럼명을 전달하면 그 컬럼의 데이터를 가져올 수 있습니다.
var colData = $("#grid").jqGrid('getCol', 'name');
console.log(colData); // 'name' 컬럼의 모든 데이터 출력
setCell
setCell 함수는 특정 셀의 값을 설정하거나 스타일을 변경하는 데 사용됩니다.
$("#grid").jqGrid('setCell', rowId, 'name', '새로운 값', 'ui-state-highlight');
setSelection
setSelection 함수는 특정 행을 선택하는 데 사용됩니다. 이 함수는 행을 강조하거나 선택할 때 유용합니다.
$("#grid").jqGrid('setSelection', rowId);
getGridParam
getGridParam 함수는 그리드의 특정 파라미터 값을 가져옵니다. 그리드의 설정 정보를 확인할 때 유용합니다.
var gridWidth = $("#grid").jqGrid('getGridParam', 'width');
console.log(gridWidth); // 그리드 너비 출력
editCell
editCell 함수는 특정 셀을 편집 상태로 전환합니다.
$("#grid").jqGrid('editCell', rowId, colIndex, true);
saveCell
saveCell 함수는 특정 셀의 편집을 종료하고 저장합니다.
$("#grid").jqGrid('saveCell', rowId, colIndex);
restoreCell
restoreCell 함수는 특정 셀의 편집을 취소하고 원래 상태로 되돌립니다.
$("#grid").jqGrid('restoreCell', rowId, colIndex);
bindKeys
bindKeys 함수는 키보드 단축키를 설정하여 행을 선택하거나 편집할 수 있도록 합니다.
$("#grid").jqGrid('bindKeys');
triggerToolbar
triggerToolbar 함수는 툴바 필터링을 트리거하여 그리드 데이터를 필터링합니다.
$("#grid").jqGrid('triggerToolbar');
setGridState
setGridState 함수는 그리드의 상태를 변경하는 데 사용됩니다. 그리드를 최소화하거나 복원할 수 있습니다.
$("#grid").jqGrid('setGridState', 'hidden'); // 그리드 숨기기
$("#grid").jqGrid('setGridState', 'visible'); // 그리드 보이기
sortGrid
sortGrid 함수는 특정 컬럼을 기준으로 그리드를 정렬합니다.
$("#grid").jqGrid('sortGrid', 'name', true);
hideCol
hideCol 함수는 특정 컬럼을 숨기는 데 사용됩니다.
$("#grid").jqGrid('hideCol', 'name'); // 'name' 컬럼 숨기기
showCol
showCol 함수는 숨겨진 특정 컬럼을 다시 표시합니다.
$("#grid").jqGrid('showCol', 'name'); // 'name' 컬럼 표시
addRow
addRow 함수는 그리드에 새로운 행을 추가합니다.
$("#grid").jqGrid('addRow', {
rowID: 'newRow',
initdata: { name: '새로운 행', age: 25 },
position: "last"
});
delRow
delRow 함수는 특정 행을 삭제합니다.
$("#grid").jqGrid('delRowData', rowId);
editRow
editRow 함수는 특정 행을 편집 모드로 전환합니다.
$("#grid").jqGrid('editRow', rowId, true);
saveRow
saveRow 함수는 특정 행의 편집을 저장합니다.
$("#grid").jqGrid('saveRow', rowId);
cancelRow
cancelRow 함수는 특정 행의 편집을 취소합니다.
$("#grid").jqGrid('restoreRow', rowId);
참고 사이트: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
'JS > jqGrid' 카테고리의 다른 글
[jqGrid] 12. 자주 발생하는 문제 해결 (FAQ) (0) | 2024.09.12 |
---|---|
[jqGrid] 11. 예제 프로젝트 (1) | 2024.09.11 |
[jqGrid] 9. 성능 최적화 (0) | 2024.09.11 |
[jqGrid] 8. 고급 설정 (1) | 2024.09.11 |
[jqGrid] 7. 기능 확장 (0) | 2024.09.11 |
[jqGrid] 6. 데이터 편집 및 수정 (0) | 2024.09.10 |
[jqGrid] 5. 옵션 및 설정 (0) | 2024.09.09 |
[jqGrid] 4. 데이터 로드 및 바인딩 (0) | 2024.09.09 |