반응형
jqGrid는 다양한 옵션과 설정을 통해 그리드의 레이아웃과 기능을 사용자에 맞게 최적화할 수 있습니다. 그리드의 크기, 페이징 설정부터 컬럼의 정렬, 수정 가능 여부, 데이터 형식까지 세밀하게 제어할 수 있습니다. 이번 글에서는 그리드 옵션(height, width, pager 등), 컬럼 설정(sortable, editable, hidden 등), 셀 포맷팅과 데이터 형식 지정에 대해 상세히 설명하고, 각 섹션에 예제 코드를 포함해 설명하겠습니다.
그리드 옵션 (height, width, pager 등)
그리드의 크기(height, width)와 페이징(pager)는 화면에 표시되는 그리드의 전반적인 레이아웃을 정의하는 중요한 설정입니다. 이러한 옵션들은 그리드가 응답형 레이아웃을 지원하거나, 화면 크기에 따라 동적으로 변경될 수 있도록 도와줍니다.
그리드 옵션 예제
<!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",
colNames: ['ID', 'Name', 'Username', 'Email'],
colModel: [
{ name: 'id', index: 'id', width: 60 },
{ name: 'name', index: 'name', width: 150 },
{ name: 'username', index: 'username', width: 150 },
{ name: 'email', index: 'email', width: 200 }
],
rowNum: 10,
pager: '#pager',
height: 'auto', // 그리드의 높이를 자동으로 설정
autowidth: true, // 그리드의 너비를 자동으로 설정
sortname: 'id',
viewrecords: true, // 전체 레코드 수를 표시
sortorder: "asc",
caption: "그리드 옵션 설정"
});
});
</script>
</body>
</html>설명:
- height: 그리드 높이를 자동으로 설정하거나, 특정 값으로 고정할 수 있습니다.
- autowidth: 화면 너비에 맞추어 그리드가 자동으로 크기를 조정합니다.
- pager: 그리드 하단에 페이징을 위한 요소를 추가하여 페이지 이동이 가능합니다.
- rowNum: 한 페이지에 표시될 데이터의 수를 설정합니다.
컬럼 설정 (sortable, editable, hidden 등)
컬럼 설정은 그리드에 표시될 데이터의 형식과 행동 방식을 제어하는데 사용됩니다. 예를 들어, 컬럼을 정렬 가능하게 설정하거나, 숨길 컬럼을 정의하거나, 수정 가능 여부를 설정할 수 있습니다. 이러한 설정은 사용자에게 더 나은 데이터 탐색 경험을 제공합니다.
컬럼 설정 예제
<script>
$(document).ready(function () {
$("#grid").jqGrid({
url: 'https://jsonplaceholder.typicode.com/users',
datatype: "json",
colNames: ['ID', 'Name', 'Username', 'Email'],
colModel: [
{ name: 'id', index: 'id', width: 60, sortable: true }, // 정렬 가능
{ name: 'name', index: 'name', width: 150, editable: true }, // 수정 가능
{ name: 'username', index: 'username', width: 150, hidden: false }, // 표시됨
{ name: 'email', index: 'email', width: 200, hidden: true } // 숨김
],
rowNum: 10,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "컬럼 설정 예제"
});
});
</script>설명:
- sortable: true로 설정하면 해당 컬럼에서 정렬 기능을 사용할 수 있습니다.
- editable: true로 설정하면 사용자가 그리드 내에서 해당 컬럼의 데이터를 수정할 수 있습니다.
- hidden: true로 설정하면 해당 컬럼이 그리드에서 숨겨집니다. 예를 들어, 이메일 컬럼은 숨겨져 있으나 데이터는 여전히 존재합니다.
셀 포맷팅과 데이터 형식 지정
jqGrid에서는 셀 포맷팅과 데이터 형식 지정을 통해 데이터를 더욱 시각적으로 구분하거나 특정 형식으로 표시할 수 있습니다. 예를 들어, 숫자를 화폐 단위로 표시하거나, 날짜 형식을 지정하여 사용자에게 가독성을 높일 수 있습니다.
셀 포맷팅 및 데이터 형식 예제
<script>
$(document).ready(function () {
$("#grid").jqGrid({
url: 'https://jsonplaceholder.typicode.com/users',
datatype: "json",
colNames: ['ID', 'Name', 'Username', 'Salary', 'Join Date'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: 'int' },
{ name: 'name', index: 'name', width: 150 },
{ name: 'username', index: 'username', width: 150 },
{ name: 'salary', index: 'salary', width: 150, formatter: 'currency', formatoptions: { prefix: '$' } }, // 화폐 단위 포맷
{ name: 'joinDate', index: 'joinDate', width: 150, formatter: 'date', formatoptions: { srcformat: 'Y-m-d', newformat: 'd/m/Y' } } // 날짜 포맷
],
rowNum: 10,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "셀 포맷팅과 데이터 형식"
});
});
</script>설명:
- formatter: 'currency': 숫자를 화폐 형식으로 변환합니다. prefix 옵션을 사용하여 화폐 단위를 추가할 수 있습니다.
- formatter: 'date': 날짜 데이터를 특정 형식으로 포맷합니다. srcformat은 서버에서 제공되는 원본 날짜 형식, newformat은 그리드에서 표시될 형식을 나타냅니다.
반응형
'JS > jqGrid' 카테고리의 다른 글
| [jqGrid] 9. 성능 최적화 (0) | 2024.09.11 |
|---|---|
| [jqGrid] 8. 고급 설정 (1) | 2024.09.11 |
| [jqGrid] 7. 기능 확장 (0) | 2024.09.11 |
| [jqGrid] 6. 데이터 편집 및 수정 (0) | 2024.09.10 |
| [jqGrid] 4. 데이터 로드 및 바인딩 (0) | 2024.09.09 |
| [jqGrid] 3. 기본 그리드 구성 (0) | 2024.09.09 |
| [jqGrid] 2. 환경 설정 및 기본 설정 (0) | 2024.09.09 |
| [jqGrid] 1. jqGrid 소개 (1) | 2024.09.08 |