jqGrid 사용법

 

jqGrid는 데이터 테이블을 쉽게 구현할 수 있도록 도와주는 jQuery 플러그인이다. jqGrid에 대해서 알아보자

 

1. 선언

$(function () {
    $("#grid").jqGrid({
        url: '/data/getData',  // 데이터를 가져올 URL
        datatype: 'json',      // 데이터 타입 (json, xml, local 등)
        mtype: 'GET',          // 요청 방식 (GET, POST)
        colNames: ['ID', 'Name', 'Age', 'City'],  // 컬럼 이름
        colModel: [             // 컬럼 모델 정의
            { name: 'id', index: 'id', width: 50, align: 'center', sortable: true },
            { name: 'name', index: 'name', width: 150, align: 'left', sortable: true },
            { name: 'age', index: 'age', width: 50, align: 'center', sortable: true },
            { name: 'city', index: 'city', width: 100, align: 'left', sortable: true }
        ],
        pager: '#pager',        // 페이징을 위한 요소 ID
        rowNum: 10,             // 한 페이지에 표시할 행 수
        rowList: [10, 20, 30],  // 선택 가능한 페이지 크기
        sortname: 'id',         // 초기 정렬 컬럼
        sortorder: 'asc',       // 초기 정렬 방식
        height: 'auto',         // 그리드 높이
        autowidth: true,        // 자동 너비 조정
        viewrecords: true,      // 총 레코드 수 표시 여부
        caption: 'Sample jqGrid',  // 그리드 제목
        loadComplete: function () {
            console.log('Data loaded!');
        }
    });
});

 

2. 주요 옵션

데이터

• url: 데이터를 가져올 서버 URL
• datatype: 데이터를 로드할 형식(json, xml, local 등)
• mtype: 서버 요청 방식(GET , POST)
• postData: 서버로 전송할 추가 데이터를 객체 형태로 지정

컬럼 관련 옵션

• colNames: 그리드 헤더에 표시될 컬럼 이름 배열
• colModel: 컬럼의 속성을 정의하는 객체 배열
• name: 데이터 속성이름
• index:서버 정렬용 컬럼 이름
• width: 컬럼 너비
• align: 텍스트 정렬 방식(left, center, right)
• sortable: 정렬 가능 여부(true, false)

페이징 관련 옵션

• pager: 페이징 버튼을 표시할 요소의 id
• rowNum: 한페이지에 표시할 행 수
• rowList: 선택 가능한 페이지 크기 배열

정렬 관련 옵션

• sortname: 초기정렬 컬럼
• sortorder: 초기 정렬 방식(asc, desc)

외형 관련 옵션

• height: 그리드 높이(auto 로 설정하면 컨텐츠 크기에 맞게 조정)
• autowidth: 그리드 너비를 컨테이너 크기에 맞게 자동 조정(true,false)
• caption: 그리드 제목

이벤트 관련 옵션

• loadComplete: 데이터 로드 후 실행되는 콜백 함수
• onSelectRow: 행 선택 시 호출되는 콜백 함수
• gridComplete: 그리드 렌더링 완료 후 실행되는 콜백 함수

 

3. 추가 기능

로컬 데이터 로드

var myData = [
    { id: 1, name: 'Alice', age: 25, city: 'New York' },
    { id: 2, name: 'Bob', age: 30, city: 'Los Angeles' },
    { id: 3, name: 'Charlie', age: 28, city: 'Chicago' }
];

$("#grid").jqGrid({
    datatype: 'local',
    data: myData,
    colNames: ['ID', 'Name', 'Age', 'City'],
    colModel: [
        { name: 'id', width: 50 },
        { name: 'name', width: 150 },
        { name: 'age', width: 50 },
        { name: 'city', width: 100 }
    ],
    pager: '#pager',
    rowNum: 10,
    autowidth: true
});

 

AJAX 로 동적 데이터 로드

$("#grid").jqGrid('setGridParam', {
    url: '/data/getNewData',
    datatype: 'json'
}).trigger('reloadGrid');