jqGrid는 데이터 편집과 수정을 위한 여러 가지 유연한 방법을 제공합니다. 이 중 가장 많이 사용되는 방식은 인라인 편집과 폼 편집입니다. 또한, 데이터 관리 작업을 위한 CRUD 작업(Create, Read, Update, Delete)과 유효성 검사 기능을 쉽게 구현할 수 있습니다. 이 글에서는 인라인 편집과 폼 편집, CRUD 작업 구현, 유효성 검사 및 커스터마이징에 대해 설명하고, 각 부분에 대해 동작 가능한 예제 코드를 제공합니다.
인라인 편집과 폼 편집
인라인 편집은 그리드의 각 셀에서 데이터를 직접 수정할 수 있는 방식입니다. 사용자는 셀을 클릭하면 즉시 수정할 수 있고, 수정 후 다른 셀로 이동하면 자동으로 저장됩니다. 폼 편집은 팝업 폼을 통해 그리드에서 데이터를 수정하는 방식입니다. 보다 복잡한 데이터 입력이 필요할 때 유용합니다.
인라인 편집 예제
<!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, editable: true },
{ name: 'name', index: 'name', width: 150, editable: true },
{ name: 'username', index: 'username', width: 150, editable: true },
{ name: 'email', index: 'email', width: 200, editable: true }
],
rowNum: 10,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "인라인 편집",
height: 'auto',
autowidth: true,
cellEdit: true, // 인라인 편집 활성화
cellsubmit: 'clientArray' // 데이터를 로컬에 저장
});
});
</script>
</body>
</html>설명: 이 코드는 인라인 편집 기능을 구현한 예제입니다. cellEdit: true로 설정하면 사용자가 셀을 클릭할 때 인라인 편집이 가능해지며, 수정된 데이터는 로컬에 저장됩니다.
폼 편집 예제
<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, editable: true },
{ name: 'name', index: 'name', width: 150, editable: true },
{ name: 'username', index: 'username', width: 150, editable: true },
{ name: 'email', index: 'email', width: 200, editable: true }
],
rowNum: 10,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "폼 편집",
height: 'auto',
autowidth: true
});
// 추가, 수정, 삭제 버튼을 추가
$("#grid").navGrid('#pager', { edit: true, add: true, del: true });
});
</script>설명: 폼 편집을 사용하려면 navGrid 메서드를 통해 수정, 추가, 삭제 버튼을 활성화할 수 있습니다. 각 버튼을 클릭하면 팝업 폼을 통해 데이터를 수정하거나 새 데이터를 추가할 수 있습니다.
CRUD 작업 구현 (Create, Read, Update, Delete)
CRUD 작업은 데이터의 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete) 기능을 의미합니다. jqGrid는 이러한 작업을 지원하기 위한 다양한 메서드를 제공합니다.
CRUD 작업 구현 예제
<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, editable: true },
{ name: 'name', index: 'name', width: 150, editable: true },
{ name: 'username', index: 'username', width: 150, editable: true },
{ name: 'email', index: 'email', width: 200, editable: true }
],
rowNum: 10,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "CRUD 작업",
height: 'auto',
autowidth: true
});
// 네비게이션 바에 추가, 수정, 삭제 버튼 추가
$("#grid").navGrid('#pager', {
edit: true, // 수정
add: true, // 추가
del: true, // 삭제
search: false,
refresh: true
});
});
</script>설명: 이 예제는 기본적인 CRUD 작업을 jqGrid에서 구현하는 방법을 보여줍니다. navGrid에서 수정(edit), 추가(add), 삭제(del) 옵션을 true로 설정하여 그리드에서 CRUD 작업을 할 수 있습니다.
유효성 검사 및 커스터마이징
jqGrid에서는 사용자가 입력한 데이터를 저장하기 전에 유효성 검사를 할 수 있습니다. 이는 특정 조건을 충족하는 데이터만 허용되도록 도와줍니다. 커스터마이징을 통해 사용자 정의 유효성 검사를 추가할 수도 있습니다.
유효성 검사 예제
<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, editable: true, editrules: { required: true } }, // 필수 입력
{ name: 'name', index: 'name', width: 150, editable: true, editrules: { required: true } }, // 필수 입력
{ name: 'username', index: 'username', width: 150, editable: true },
{ name: 'email', index: 'email', width: 200, editable: true, editrules: { email: true } } // 이메일 형식 검사
],
rowNum: 10,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "유효성 검사",
height: 'auto',
autowidth: true
});
$("#grid").navGrid('#pager', { edit: true, add: true, del: true });
});
</script>설명: editrules 속성을 통해 각 컬럼에 대한 유효성 검사를 설정할 수 있습니다. 예를 들어, required: true는 필수 입력 필드를 의미하며, email: true는 이메일 형식이 유효한지 확인합니다.
참고 사이트: jqGrid Documentation
'JS > jqGrid' 카테고리의 다른 글
| [jqGrid] 10. 자주쓰는 함수 (0) | 2024.09.11 |
|---|---|
| [jqGrid] 9. 성능 최적화 (0) | 2024.09.11 |
| [jqGrid] 8. 고급 설정 (1) | 2024.09.11 |
| [jqGrid] 7. 기능 확장 (0) | 2024.09.11 |
| [jqGrid] 5. 옵션 및 설정 (0) | 2024.09.09 |
| [jqGrid] 4. 데이터 로드 및 바인딩 (0) | 2024.09.09 |
| [jqGrid] 3. 기본 그리드 구성 (0) | 2024.09.09 |
| [jqGrid] 2. 환경 설정 및 기본 설정 (0) | 2024.09.09 |