[jqGrid] 그리드 데이터 다루기 - 값 가져오기/수정하기

행 데이터 가져오기

// 선택된 행의 데이터 가져오기
const rowId = $("#grid").jqGrid('getGridParam', 'selrow');
const rowData = $("#grid").jqGrid('getRowData', rowId);

// 특정 행의 모든 데이터
const specificRowData = $("#grid").jqGrid('getRowData', '행_ID');

 

 

셀 값 가져오기

// 특정 셀의 값 가져오기
const cellValue = $("#grid").jqGrid('getCell', rowId, 'columnName');

// getCellValue 사용
const value = $("#grid").jqGrid('getCellValue', rowId, 'columnName');

 

 

데이터 수정하기

// 특정 셀 데이터 수정
$("#grid").jqGrid('setCell', rowId, 'columnName', '새로운값');

// 행 전체 데이터 수정
$("#grid").jqGrid('setRowData', rowId, {
    name: '새이름',
    age: 30,
    dept: 'IT'
});

 

 

 

실제 활용 예시

// 선택된 행의 처리상태 업데이트하기
function updateStatus() {
    const selectedRow = $("#grid").jqGrid('getGridParam', 'selrow');
    if (!selectedRow) {
        alert('행을 선택해주세요.');
        return;
    }

    $("#grid").jqGrid('setCell', selectedRow, 'status', 'COMPLETED', {
        color: 'blue',
        'font-weight': 'bold'
    });
}

// 체크된 행들의 데이터 가져오기
function getCheckedRows() {
    const checkedRows = [];
    const ids = $("#grid").jqGrid('getDataIDs');
    
    ids.forEach(id => {
        if ($("#jqg_grid_" + id).is(":checked")) {
            checkedRows.push($("#grid").jqGrid('getRowData', id));
        }
    });
    
    return checkedRows;
}

 

 

✅ 메모

• getRowData()는 현재 화면에 표시된 데이터 기준
• 서버 데이터와 동기화가 필요한 경우 별도 처리 필요
• setCell() 사용시 스타일도 같이 변경 가능
• 대량 데이터 처리시 성능 고려 필요

다음엔 jqGrid의 이벤트 핸들링에 대해 정리해봐야겠다.