jqGrid에서 데이터를 로드하고 바인딩하는 방식은 매우 유연합니다. 로컬 데이터와 서버 데이터를 각각 로드할 수 있으며, AJAX를 통해 서버와 비동기적으로 통신하여 데이터를 가져오는 방법도 지원합니다. 또한, JSON과 XML 같은 다양한 데이터 포맷을 사용할 수 있어, 데이터 소스에 맞는 유연한 설정이 가능합니다. 이 글에서는 로컬 데이터와 서버 데이터 로딩, AJAX를 통한 서버 데이터 로딩, JSON 및 XML 데이터 포맷 사용에 대해 자세히 설명하고, 예제 소스 코드도 함께 제공합니다.
로컬 데이터 vs 서버 데이터 로딩
로컬 데이터는 클라이언트 측에서 미리 정의된 데이터를 로드할 때 사용합니다. 주로 정적 데이터를 다룰 때 사용되며, 서버에 추가 요청을 하지 않고 로컬에 있는 배열이나 JSON 객체를 활용합니다. 반면에, 서버 데이터는 서버에서 데이터를 동적으로 가져와 그리드에 표시하는 방식으로, 주로 대규모 데이터셋을 다룰 때 사용됩니다.
로컬 데이터 로드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로컬 데이터 로딩</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 () {
var localData = [
{ id: 1, name: "John", username: "johnny", email: "john@example.com" },
{ id: 2, name: "Jane", username: "janey", email: "jane@example.com" },
{ id: 3, name: "Doe", username: "doey", email: "doe@example.com" }
];
$("#grid").jqGrid({
datatype: "local", // 로컬 데이터를 사용합니다.
data: localData, // 로컬 데이터를 그리드에 바인딩합니다.
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,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "로컬 데이터 그리드",
height: 'auto',
autowidth: true
});
});
</script>
</body>
</html>이 코드는 로컬 데이터 배열을 jqGrid에 바인딩하여 표시합니다. datatype: "local"로 설정하고 data 속성에 로컬 데이터를 제공하여 서버 요청 없이 데이터를 그리드에 표시할 수 있습니다.
AJAX를 통한 서버 데이터 로딩
서버에서 데이터를 AJAX로 불러오는 방식은 매우 유용합니다. 데이터가 많을 때 서버에 비동기 요청을 보내고, 그 데이터를 그리드에 표시할 수 있습니다. 이 방법은 대용량 데이터를 처리할 때 서버 부하를 줄이고 사용자 경험을 향상시키는 데 도움이 됩니다.
AJAX 서버 데이터 로드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX 서버 데이터 로딩</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>이 예제는 AJAX를 통해 서버로부터 데이터를 받아와 jqGrid에 표시합니다. url 옵션에 서버 API 경로를 설정하고, datatype을 json으로 설정하여 서버에서 JSON 데이터를 불러옵니다.
JSON 및 XML 데이터 포맷 사용하기
jqGrid는 JSON과 XML 포맷을 모두 지원하며, 데이터의 형태에 따라 datatype을 설정할 수 있습니다. JSON 데이터는 경량 데이터 형식으로 주로 많이 사용되며, XML은 데이터 구조가 복잡하거나 특정 서버 API와 통신할 때 유용하게 사용됩니다.
JSON 데이터 포맷 예제
datatype: "json", // 데이터 형식을 JSON으로 설정
url: "https://api.example.com/data" // JSON 데이터를 불러올 APIXML 데이터 포맷 예제
datatype: "xml", // 데이터 형식을 XML로 설정
url: "https://api.example.com/data.xml" // XML 데이터를 불러올 APIJSON과 XML 데이터 포맷 모두 서버에서 반환된 데이터를 jqGrid에 바인딩하여 사용할 수 있습니다. JSON은 일반적으로 가볍고, 많은 API에서 기본 포맷으로 제공되기 때문에 빠르고 효율적인 처리가 가능합니다. XML은 구조화된 데이터를 다룰 때 더 유용하지만, 파싱 속도는 JSON보다 느릴 수 있습니다.
'JS > jqGrid' 카테고리의 다른 글
| [jqGrid] 8. 고급 설정 (1) | 2024.09.11 |
|---|---|
| [jqGrid] 7. 기능 확장 (0) | 2024.09.11 |
| [jqGrid] 6. 데이터 편집 및 수정 (0) | 2024.09.10 |
| [jqGrid] 5. 옵션 및 설정 (0) | 2024.09.09 |
| [jqGrid] 3. 기본 그리드 구성 (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 |