[jqGrid] 자주 쓰는 메서드 정리

jqGrid를 쓰면서 자주 사용했던 메서드들 총정리

나중에 또 까먹을까봐 기록해두는 중... 🤔

 

1. setRowData

그리드의 특정 행 데이터를 업데이트할 때 사용한다.

문법

$("#grid").jqGrid('setRowData', rowid, data, cssp)

매개변수

• rowid: 업데이트할 행의 ID (필수)
• data: 업데이트할 데이터 객체 (필수)
• cssp: CSS 속성 (선택)

사용 예시

// 단일 컬럼 업데이트
$("#myGrid").jqGrid('setRowData', rowId, {'name': 'John'});

// 여러 컬럼 동시에 업데이트
$("#myGrid").jqGrid('setRowData', rowId, {
    'name': 'John',
    'age': 25,
    'city': 'Seoul'
});

// CSS 스타일 적용하면서 업데이트
$("#myGrid").jqGrid('setRowData', rowId, 
    {'status': '완료'}, 
    {color: 'blue'}
);

 

 

 

2. getRowData

특정 행의 데이터를 가져올 때 쓴다. 데이터 수정하기 전에 현재 값 확인할 때 자주 썼음.

문법

$("#grid").jqGrid('getRowData', rowid)

 

사용 예시

// 특정 행의 전체 데이터 가져오기
var rowData = $("#myGrid").jqGrid('getRowData', 1);
console.log('행 데이터:', rowData);

// 가져온 데이터에서 특정 컬럼값만 사용
var name = rowData.name;
var age = rowData.age;

// 데이터 검증에 활용
if(rowData.status === '완료') {
    alert('이미 처리된 데이터입니다.');
    return;
}

 

 

 

3. addRowData

새로운 행을 추가할 때 사용한다. position 파라미터로 추가할 위치도 지정할 수 있어서 편리함.

문법

$("#grid").jqGrid('addRowData', rowid, data, position, srcrowid)

매개변수

• rowid: 새로운 행의 ID
• data: 추가할 행 데이터
• position: 추가할 위치 ('first', 'last', 'before', 'after')
• srcrowid: position이 'before'나 'after'일 때 기준이 되는 행 ID

사용 예시

// 마지막에 행 추가
$("#myGrid").jqGrid('addRowData', 1, {
    name: '홍길동',
    age: 25,
    city: '서울'
}, 'last');

// 특정 행 앞에 새로운 행 추가
$("#myGrid").jqGrid('addRowData', 2, {
    name: '김철수',
    age: 30,
    city: '부산'
}, 'before', 1);

 

 

 

4. getDataIDs

그리드의 모든 행 ID를 배열로 가져온다. 전체 데이터를 순회하면서 처리할 때 유용하게 썼다.

문법

$("#grid").jqGrid('getDataIDs')

 

사용 예시

// 모든 행 ID 가져오기
var allRows = $("#myGrid").jqGrid('getDataIDs');

// 가져온 ID로 전체 데이터 처리
for(var i = 0; i < allRows.length; i++) {
    var rowId = allRows[i];
    var rowData = $("#myGrid").jqGrid('getRowData', rowId);
    
    // 각 행에 대한 처리
    if(rowData.status === '대기중') {
        $("#myGrid").jqGrid('setRowData', rowId, {
            'status': '처리중',
            'updateDate': new Date().toISOString()
        });
    }
}

 

 

 

5. setCell

특정 셀의 값만 변경할 때 사용한다. setRowData보다 간단히 쓸 수 있어서 자주 활용했음.

문법

$("#grid").jqGrid('setCell', rowid, colname, data, css)

 

사용 예시

// 특정 셀 값만 변경
$("#myGrid").jqGrid('setCell', 1, 'status', '완료');

// 스타일도 함께 변경
$("#myGrid").jqGrid('setCell', 1, 'status', '완료', 'text-success');

// 여러 스타일 적용
$("#myGrid").jqGrid('setCell', 1, 'status', '실패', {
    color: 'red',
    'font-weight': 'bold'
});

 

 

 

이렇게 정리하고 보니 생각보다 많이 썼네... 😅

나중에 시간 나면 더 자주 쓰는 메서드들도 추가로 정리해야겠다.