jqGrid의 기본 그리드 구성은 데이터를 표 형태로 시각화하고 관리하는 데 필요한 다양한 기능을 제공합니다. 그리드의 기본 구성에는 컬럼 정의, 데이터 소스 설정, 페이징, 정렬 등의 기능이 포함되며, 사용자는 이러한 옵션을 통해 데이터 그리드를 손쉽게 설정할 수 있습니다. 여기에서는 jqGrid의 기본 그리드를 설정하는 방법과 각 구성 요소에 대한 설명을 예제와 함께 알아보겠습니다.
1. 데이터 소스 설정
jqGrid에서 데이터 소스는 서버에서 가져오거나, 로컬에서 사용할 수 있습니다. 기본적으로 url 옵션을 사용하여 서버에서 데이터를 불러올 수 있으며, datatype을 통해 데이터를 JSON 또는 XML 형식으로 받을 수 있습니다. 로컬 데이터를 사용할 경우, datatype을 local로 설정하고 데이터를 배열 형식으로 제공할 수 있습니다.
2. 컬럼 구성
jqGrid는 컬럼을 정의하는 두 가지 옵션인 colNames와 colModel을 제공합니다. colNames는 그리드의 헤더에 표시될 이름을 설정하고, colModel은 각각의 컬럼에 대해 세부 설정을 정의합니다. 예를 들어, 각 컬럼의 데이터 타입, 너비, 정렬 가능 여부 등을 설정할 수 있습니다.
실행 가능한 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jqGrid 기본 그리드 구성</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
<script>
$(document).ready(function () {
$("#grid").jqGrid({
url: 'https://jsonplaceholder.typicode.com/users', // 서버에서 데이터 가져오기
datatype: "json", // 데이터 타입을 JSON으로 설정
colNames: ['ID', 'Name', 'Username', 'Email'], // 컬럼 이름 설정
colModel: [ // 각 컬럼에 대한 세부 설정
{ name: 'id', index: 'id', width: 60, sorttype: "int" }, // 정렬 타입을 숫자로
{ name: 'name', index: 'name', width: 150 }, // 이름 컬럼
{ name: 'username', index: 'username', width: 150 }, // 사용자 이름 컬럼
{ name: 'email', index: 'email', width: 200 } // 이메일 컬럼
],
rowNum: 10, // 페이지당 데이터 개수
rowList: [5, 10, 20], // 페이지당 선택 가능한 데이터 개수 옵션
pager: '#pager', // 페이징 기능 추가
sortname: 'id', // 초기 정렬 기준 컬럼
viewrecords: true, // 전체 레코드 수 표시
sortorder: "asc", // 초기 정렬 방식 (오름차순)
caption: "사용자 정보", // 그리드 제목
height: 'auto', // 그리드 높이 자동 조정
autowidth: true // 그리드 너비 자동 조정
});
});
</script>
</body>
</html>이 예제에서는 JSONPlaceholder API에서 사용자 데이터를 받아와 jqGrid로 표시합니다. colNames에서 컬럼의 헤더명을 지정하고, colModel에서 각 컬럼의 세부 속성을 설정합니다. 데이터는 서버에서 불러와서 자동으로 그리드에 표시되며, 페이징 기능도 포함되어 있습니다.
3. 페이징 및 정렬
jqGrid의 기본 기능 중 하나는 페이징입니다. rowNum 옵션을 사용해 한 페이지에 표시할 데이터의 개수를 설정할 수 있으며, rowList 옵션을 통해 사용자가 선택할 수 있는 페이지당 데이터 개수를 설정할 수 있습니다. 또한 sortname 옵션을 통해 기본 정렬 기준을 설정하고, sortorder 옵션을 통해 오름차순 또는 내림차순 정렬 방식을 지정할 수 있습니다.
4. 그리드 제목 및 레코드 표시
그리드 상단에 제목을 설정하기 위해 caption 옵션을 사용합니다. 또한 viewrecords 옵션을 true로 설정하면, 페이지 하단에 총 레코드 수가 표시됩니다. 이를 통해 사용자는 전체 데이터가 몇 개 있는지 쉽게 파악할 수 있습니다.
5. 그리드 크기 조정
autowidth 옵션은 그리드의 너비를 화면 크기에 맞춰 자동으로 조절하도록 도와줍니다. 또한 height 옵션을 auto로 설정하면, 데이터의 양에 따라 그리드의 높이가 자동으로 조정됩니다. 이러한 옵션은 응답형 디자인을 구현하는 데 유용합니다.
'JS > jqGrid' 카테고리의 다른 글
| [jqGrid] 7. 기능 확장 (0) | 2024.09.11 |
|---|---|
| [jqGrid] 6. 데이터 편집 및 수정 (0) | 2024.09.10 |
| [jqGrid] 5. 옵션 및 설정 (0) | 2024.09.09 |
| [jqGrid] 4. 데이터 로드 및 바인딩 (0) | 2024.09.09 |
| [jqGrid] 2. 환경 설정 및 기본 설정 (0) | 2024.09.09 |
| [jqGrid] 1. jqGrid 소개 (1) | 2024.09.08 |
| [jqgrid] edit cell close (0) | 2018.11.14 |
| jqgrid 행 추가 / 삭제 [ add row / delete row] (0) | 2018.04.18 |