[jqGrid] SubGrid로 상세 데이터 표시하기

오늘은 jqGrid에서 SubGrid 설정하면서 배웠던 내용들을 정리해본다.

처음에는 단순히 옵션만 설정하면 되는 줄 알았는데, 실제로 해보니 신경 쓸 게 은근 많았다.

 

1. 기본 설정

먼저 SubGrid를 활성화하고 기본적인 모양을 잡아주는 설정:

$("#mainGrid").jqGrid({
    // ... 다른 설정들 ...
    subGrid: true,  // SubGrid 사용
    subGridOptions: {
        plusicon: "ui-icon-triangle-1-e",    // 접힌 상태 
        minusicon: "ui-icon-triangle-1-s",   // 펼쳐진 상태
        openicon: "ui-icon-arrowreturn-1-e", // 화살표 
        expandOnLoad: false,   // 처음부터 다 펼치지 않음
        selectOnExpand: true,  // 펼칠 때 행 선택되게
        reloadOnExpand: false  // 매번 새로 로드하지 않음
    }
});

이렇게만 하면 아이콘은 생기는데... 실제로 뭔가를 보여주진 않는다.

 

 

2. SubGrid 이벤트 핸들링

SubGrid가 펼쳐질 때 실제 내용을 그려줘야 한다. 크게 두 단계로 나눠서 처리했다:

// 1. 펼치기 전에 체크
subGridBeforeExpand: function(subgrid_id, row_id) {
    if(row_id == 'blankRow') return false;  // 빈 행
    
    var rowdata = $(this).getRowData(row_id);
    if(!rowdata.hasChild) {  // 자식 데이터가 없으면
        alert("상세 내역이 없습니다.");
        return false;
    }
    return true;
},

// 2. 실제로 펼칠 때
subGridRowExpanded: function(subgrid_id, row_id) {
    var rowdata = $(this).getRowData(row_id);
    createDetailGrid(rowdata, subgrid_id);
}

 

3. 실제 하위 그리드 생성하기

여기서 삽질을 좀 했다.

처음엔 단순히 div에 데이터만 넣으면 되는 줄 알았는데, 하위 그리드도 완전한 jqGrid를 새로 만들어줘야 했다:

function createDetailGrid(masterData, subgrid_id) {
    // 1. 고유한 ID 생성
    var subgrid_table_id = subgrid_id + "_t";
    var pager_id = "p_" + subgrid_table_id;
    
    // 2. 그리드 마크업 생성
    $("#" + subgrid_id).html(
        "<table id='" + subgrid_table_id + "'></table>" +
        "<div id='" + pager_id + "'></div>"
    );
    
    // 3. 하위 그리드 초기화
    $("#" + subgrid_table_id).jqGrid({
        url: 'api/details',
        postData: {
            parentId: masterData.id  // 부모 데이터 ID
        },
        colModel: [
            {name: 'detailCode', label: '상세코드'},
            {name: 'detailName', label: '상세명'},
            // ... 더 많은 컬럼들
        ],
        width: '100%',
        height: '100%'
        // ... 더 많은 옵션들
    });
}

 

✅ 메모

 

1. expandOnLoad는 웬만하면 false로
   • true로 하면 처음 로딩할 때 모든 하위 데이터를 다 가져오려고 함
   • 데이터가 많으면 초기 로딩이 너무 오래 걸림
2. reloadOnExpand도 false가 좋다
   • true면 접었다 펼칠 때마다 매번 서버 호출
   • 단, 실시간성이 중요한 데이터라면 true도 고려
3. 하위 그리드 width 설정 주의
   • 부모 그리드보다 살짝 작게 설정하는게 좋음
   • 스크롤이 생길 수 있어서
4. 에러 처리도 꼭 해주자

loadError: function(xhr, status, error) {
    alert("상세 데이터 조회 중 오류가 발생했습니다.");
    return false;
}

 

 

 

 

다음에는 커스텀 포매터로 셀 데이터 꾸미기에 대해 정리해봐야겠다.