jqGrid을 활용한 고급 JavaScript 데이터 테이블 구축 가이드

jqGrid는 동적이고 인터랙티브한 테이블 UI를 구축할 수 있게 해주는 강력한 jQuery 기반 플러그인이다. 대규모 데이터 셋을 브라우저에서 효율적으로 렌더링하고 정렬, 검색, 페이지네이션, 필터링, 인라인 편집 기능 등을 손쉽게 구현할 수 있어, 복잡한 데이터 관리 시스템에서도 널리 사용된다. 특히 대시보드나 백오피스에서 jqGrid는 그 강력함을 제대로 발휘한다.

JavaScript와 jqGrid 통합의 이점

1. 복잡한 데이터 구조를 손쉽게 렌더링

JavaScript만으로 데이터를 테이블 형태로 구현하려면 수많은 DOM 조작, 반복 렌더링, 상태 관리 코드가 필요하다. 그러나 jqGrid는 단 몇 줄의 설정만으로 데이터를 테이블로 시각화하고, 정렬/검색/필터 등의 기능까지 기본 제공한다. colModel, datatype, url, pager, rowNum 등의 속성 설정만으로 강력한 UI를 구성할 수 있다.

2. 서버사이드 처리와의 유연한 연동

jqGrid는 JSON이나 XML 형식의 데이터를 비동기적으로 받아들이며, 서버 사이드 언어와 연동이 자유롭다. REST API와 쉽게 통합되며, AJAX를 통한 동적 데이터 갱신 기능으로 효율적인 UI를 제공한다.

3. 강력한 사용자 정의 기능 지원

jqGrid는 사용자 정의 포맷터, 이벤트 핸들러, 툴팁, 커스텀 버튼 등을 지원한다. 이를 통해 개발자는 프로젝트에 맞는 테이블 인터페이스를 정교하게 설계할 수 있으며, 복잡한 비즈니스 로직도 구현 가능하다.

반응형

jqGrid 기본 설정 방법과 주요 속성 설명

1. 필수 속성 개요

• colNames: 테이블의 컬럼 제목 지정
• colModel: 각 컬럼의 속성과 옵션 정의
• url: 데이터를 가져올 서버 주소
• datatype: ‘json’ 또는 ‘xml’로 지정
• pager: 페이지네이션을 위한 div ID
• rowNum: 한 페이지에 보여줄 행 개수
• viewrecords: 전체 레코드 수 표시 여부

$("#grid").jqGrid({
    url: '/api/data',
    datatype: "json",
    colNames: ['ID', '이름', '이메일'],
    colModel: [
        { name: 'id', index: 'id', width: 60, sorttype: "int" },
        { name: 'name', index: 'name', width: 100 },
        { name: 'email', index: 'email', width: 200 }
    ],
    pager: '#pager',
    rowNum: 10,
    viewrecords: true,
    height: 'auto',
    caption: "사용자 리스트"
});

2. 고급 속성 및 이벤트 활용

• gridComplete: 그리드 렌더링 완료 후 실행될 함수
• loadComplete: 데이터 로딩 후 트리거될 콜백
• onSelectRow: 특정 행 선택 시 이벤트 발생

반응형

jqGrid 인라인 편집, 추가, 삭제 기능 구현하기

1. 인라인 편집 활성화

ondblClickRow: function(rowid, iRow, iCol, e) {
    $('#grid').jqGrid('editRow', rowid, {
        keys: true,
        successfunc: function() {
            alert('수정 완료');
        }
    });
}

2. 행 추가 기능 구현

$("#addRowBtn").click(function(){
    let newId = $.jgrid.randId();
    $("#grid").jqGrid('addRowData', newId, {});
});

3. 행 삭제 기능 구현

$("#deleteRowBtn").click(function(){
    let selectedRow = $("#grid").jqGrid('getGridParam','selrow');
    if(selectedRow){
        $("#grid").jqGrid('delRowData', selectedRow);
    }
});

반응형

서버와의 데이터 연동

1. 데이터 요청 및 수신 구조

서버는 JSON 구조로 데이터를 반환해야 하며, jqGrid는 기본적으로 다음과 같은 형태를 기대한다.

{
  "total": 3,
  "page": 1,
  "records": 25,
  "rows": [
    {"id": "1", "cell": ["1", "홍길동", "hong@example.com"]},
    {"id": "2", "cell": ["2", "이몽룡", "lee@example.com"]}
  ]
}

2. 서버 처리 예시 (Node.js + Express)

app.get('/api/data', (req, res) => {
    const result = {
        total: 1,
        page: 1,
        records: 2,
        rows: [
            { id: "1", cell: ["1", "홍길동", "hong@example.com"] },
            { id: "2", cell: ["2", "이몽룡", "lee@example.com"] }
        ]
    };
    res.json(result);
});

반응형

jqGrid의 고급 기능

1. Tree Grid

계층형 데이터를 표현하는 데 효과적이며, JSON 구조에 따라 부모-자식 관계를 시각화할 수 있다.

treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'name',

2. Sub Grid

행마다 세부 데이터를 추가로 보여줄 수 있다.

subGrid: true,
subGridUrl: "/api/subdata",

3. Grouping

특정 필드를 기준으로 행을 그룹화하여 보기 좋게 정렬할 수 있다.

grouping: true,
groupingView: {
    groupField: ['dept'],
    groupColumnShow: [false],
    groupText: ['<b>{0} - {1}건</b>']
}

반응형

반응형 디자인과 jqGrid

기본 jqGrid는 고정된 레이아웃을 갖지만, CSS 미디어쿼리 및 jQuery UI ThemeRoller, 또는 Bootstrap 스타일과 조합하면 다양한 반응형 전략을 적용할 수 있다.

1. jqGrid width 자동 조정 설정

$(window).on("resize", function () {
    var grid = $("#grid");
    var newWidth = grid.closest(".ui-jqgrid").parent().width();
    grid.jqGrid("setGridWidth", newWidth, true);
});

2. Bootstrap 기반 jqGrid

• ui-jqgrid-bootstrap.css와 함께 사용 시 테이블이 Bootstrap 스타일로 변환되어 반응형에 적합함
• responsive: true와 같은 설정으로 더 유연한 UI 구성 가능

반응형

jqGrid vs. DataTables vs. ag-Grid: 비교 분석

기능 jqGrid DataTables ag-Grid

기반	jQuery	jQuery	Vanilla JS
무료/유료	무료	무료	일부 유료
편집 기능	강력	제한적	매우 강력
서버 연동	매우 용이	기본 지원	고급 지원
성능	중	중	매우 우수
반응형 지원	보완 필요	강력	매우 강력

결론: jqGrid는 전통적인 jQuery 기반 프로젝트에 매우 적합하며, 단순하면서도 강력한 그리드 UI를 원할 경우 최고의 선택이 될 수 있다.

반응형

결론

jqGrid는 복잡한 웹 애플리케이션에서 데이터 중심의 UI를 구성하는 데 최적화된 도구이다. 정렬, 검색, 편집, 필터, 트리 구조 등 거의 모든 테이블 기능을 내장하고 있으며, jQuery 환경에서 최고의 퍼포먼스를 제공한다. 서버 연동과 반응형 UI까지 고려한다면, jqGrid는 지금도 여전히 강력하고 실전에서 신뢰할 수 있는 선택지다.