[jqGrid] 기본 그리드 만들기

0. <table> 태그와 jqGrid의 주요 차이점

<!-- 일반 테이블로 구현 시 -->
<table>
  <tr>
    <th onclick="sortTable()">이름</th> 
    	<!-- 정렬 기능을 직접 구현해야 함 -->
    <th>나이</th>
  </tr>
  <!-- 페이징 처리도 직접 구현 필요 -->
</table>

<!--html <table> 태그로만 테이블 만들었던 사람 나야 나-->

<!-- jqGrid 사용 시 -->
$("#grid").jqGrid({
    sortable: true,  // 정렬 기능 바로 사용 가능
    pager: '#pager', // 페이징 기능 바로 사용 가능
    // ... 다른 설정들
});

 

jqGrid를 사용하면 좋은 경우:

• 대규모 데이터를 다루는 관리자 페이지
• 복잡한 데이터 조작이 필요한 경우
• Excel과 유사한 기능이 필요한 경우

일반 테이블을 사용하면 좋은 경우:

• 간단한 데이터 표시만 필요한 경우
• 사용자 정의 UI가 많이 필요한 경우
• 가벼운 웹페이지를 만들 때

 

1. 필요한 라이브러리 추가하기

먼저 HTML 파일에 필요한 라이브러리들을 추가해야 한다.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jqGrid CSS -->
<link rel="stylesheet" href="path/to/ui.jqgrid.css">

<!-- jqGrid JS -->
<script src="path/to/jquery.jqGrid.min.js"></script>

△ 위의 예시는 CDN 경로를 통해 외부에 호스팅된 라이브러리 파일을 로드하는 방식 △

( 프로젝트에 파일을 추가해주고, 파일 경로를 작성하는 방식으로도 동작함 )

 

2. HTML 구조 만들기

그리드가 표시될 테이블과 페이징이 표시될 div를 준비한다.

<div id="grid_container">
    <!-- 그리드 테이블 -->
    <table id="myGrid"></table>
    
    <!-- 페이징 -->
    <div id="pager"></div>
</div>

 

3. 기본 그리드 생성하기

$(document).ready(function() {
    $("#myGrid").jqGrid({
        // 1. 기본 설정
        datatype: "local",      // 로컬 데이터 사용
        height: "auto",         // 높이 자동조절
        autowidth: true,        // 너비 자동조절
        
        // 2. 컬럼 정의
        colNames: ['이름', '나이', '이메일'],
        colModel: [
            {name: 'name', width: 100},
            {name: 'age', width: 50},
            {name: 'email', width: 150}
        ],
        
        // 3. 테스트 데이터
        data: [
            {name: "홍길동", age: 25, email: "hong@test.com"},
            {name: "김철수", age: 30, email: "kim@test.com"},
            {name: "이영희", age: 28, email: "lee@test.com"}
        ],
        
        // 4. 페이징 설정
        pager: '#pager',
        rowNum: 10,            // 한 페이지에 보여줄 행 개수
        viewrecords: true      // 총 레코드 수 표시
    });
});

 

4. 간단한 기능 추가하기

$("#myGrid").jqGrid({
    // ... 기본 설정은 동일 ...
    
    // 1. 정렬 기능
    sortable: true,
    
    // 2. 행 선택 이벤트
    onSelectRow: function(rowid) {
        var rowData = $(this).getRowData(rowid);
        alert('선택된 이름: ' + rowData.name);
    },
    
    // 3. 빈 데이터 처리
    loadComplete: function() {
        if ($(this).getGridParam("records") == 0) {
            $("<div class='no-data'>데이터가 없습니다.</div>")
                .insertAfter($(this));
        }
    }
});

 

💡 초보자를 위한 Tips

1. 처음에는 로컬 데이터로 시작
2. colModel의 기본 속성만 사용
3. 그리드가 잘 나오는지 먼저 확인한 후 기능을 하나씩 추가

✅ 자주 하는 실수들

1. jQuery를 먼저 로드하지 않는 경우
2. CSS 파일을 누락하는 경우
3. 테이블과 페이저 ID를 잘못 연결하는 경우

🔍 결과 확인하기

위 코드를 실행하면 다음과 같은 기능이 동작한다:

• 기본적인 테이블 형태의 그리드
• 페이징 기능
• 행 선택 시 알림창
• 반응형 너비 조절

처음에는 간단한 기능부터 시작해서 점차 필요한 기능을 추가해봐야겠다.