프로그래밍/jQuery 👍
jsgrid 를 통해 CRUD 화면을 구성 ( jquery)
재우니
2024. 6. 28. 23:25
jsgrid 를 통해 CRUD 화면을 구성하였으며, jquery 기반으로 구현되어 있습니다.
- HTML 구조:
- <!DOCTYPE html>로 HTML5 문서임을 선언합니다.
- <html lang="ko">로 한국어 문서임을 명시합니다.
- <head> 섹션에서:
- 문자 인코딩을 UTF-8로 설정합니다.
- jsGrid의 CSS 파일 두 개를 로드합니다: 기본 스타일과 테마 스타일.
- jQuery와 jsGrid 라이브러리를 로드합니다.
- <body>에는 jsGrid를 표시할 단일 <div> 요소만 있습니다.
- JavaScript 코드:
- jQuery의 $(function() { ... })를 사용해 DOM 로드 완료 후 코드가 실행되도록 합니다.
- 데이터 모델 (clients 배열):
- 5개의 샘플 데이터를 포함합니다.
- 각 항목은 id, name, approvalDate를 가집니다.
- approvalDate는 ISO 8601 형식의 문자열 또는 null 값입니다.
- 데이터 조작 객체 (ClientsDB):
- loadData: 단순히 clients 배열을 반환합니다.
- insertItem:
- 새 id를 생성합니다 (Math.max(...clients.map(x => x.id), 0) + 1).
- 새 항목을 clients 배열에 추가합니다.
- updateItem:
- findIndex로 수정할 항목의 인덱스를 찾습니다.
- 해당 인덱스의 항목을 새 항목으로 교체합니다.
- deleteItem:
- findIndex로 삭제할 항목의 인덱스를 찾습니다.
- splice로 해당 항목을 배열에서 제거합니다.
- jsGrid 설정:
- 그리드의 너비는 100%, 높이는 400px로 설정합니다.
- inserting, editing, sorting, paging을 true로 설정하여 해당 기능들을 활성화합니다.
- controller로 ClientsDB 객체를 지정합니다.
- 필드 정의:
- name 필드:
- type: "text"로 설정하여 텍스트 입력 필드로 만듭니다.
- validate: "required"로 필수 입력 항목으로 지정합니다.
- approvalDate 필드:
- itemTemplate: 날짜를 'YYYY.MM.DD HH:mm' 형식으로 변환하여 표시합니다.
- insertTemplate: datetime-local 타입의 input 요소를 생성합니다.
- insertValue: 입력된 날짜 값을 반환합니다.
- editTemplate: 기존 값이 있으면 해당 값을 datetime-local input에 설정합니다.
- editValue: 수정된 날짜 값을 반환합니다.
- control 필드: jsGrid의 기본 편집/삭제 버튼을 추가합니다.
- name 필드:
- 이벤트 핸들러:
- onItemInserted: 항목 추가 시 로그를 출력하고 그리드를 새로고침합니다.
- onItemUpdated: 항목 수정 시 로그를 출력합니다.
- onItemDeleted: 항목 삭제 시 로그를 출력합니다.
주요 기술적 포인트:
- 날짜 처리:
- ISO 8601 형식의 문자열을 사용하여 날짜를 저장합니다.
- 표시할 때는 한국식 날짜 형식('YYYY.MM.DD HH:mm')으로 변환합니다.
- 입력/수정 시 HTML5의 datetime-local 타입을 사용하여 사용자 편의성을 높입니다.
- 데이터 관리:
- 메모리 내 배열을 사용하여 데이터를 관리합니다.
- 실제 애플리케이션에서는 이 부분을 서버 API 호출로 대체할 수 있습니다.
- ID 관리:
- 새 항목 추가 시 현재 최대 ID에 1을 더하여 새 ID를 생성합니다.
- Math.max(...clients.map(x => x.id), 0)를 사용하여 배열이 비어있을 때도 안전하게 처리합니다.
- 반응형 디자인:
- 그리드의 너비를 100%로 설정하여 부모 요소의 너비에 맞게 조정됩니다.
이 코드는 jsGrid를 사용한 기본적인 CRUD 기능의 구현을 잘 보여주는 예시입니다. 실제 프로덕션 환경에서는 서버와의 통신, 보안 처리, 더 복잡한 데이터 검증, 에러 핸들링 등이 추가로 필요할 수 있습니다.
전체 코드 제시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jsgrid CRUD 예제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.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/jsgrid/1.5.3/jsgrid.min.js"></script>
</head>
<body>
<div id="jsGrid"></div>
<script>
$(function() {
var clients = [{
"id": 1,
"name": "Otto Clay",
"approvalDate": "2023-06-28T14:30:00"
},
{
"id": 2,
"name": "Connor Johnston",
"approvalDate": "2023-06-29T09:15:00"
},
{
"id": 3,
"name": "Lacey Hess",
"approvalDate": "2023-06-30T11:45:00"
},
{
"id": 4,
"name": "Timothy Henson",
"approvalDate": "2023-07-01T16:20:00"
},
{
"id": 5,
"name": "Ramona Benton",
"approvalDate": null
}
];
var ClientsDB = {
loadData: function() {
return clients;
},
insertItem: function(item) {
item.id = Math.max(...clients.map(x => x.id), 0) + 1;
clients.push(item);
return item;
},
updateItem: function(item) {
var index = clients.findIndex(x => x.id === item.id);
clients[index] = item;
return item;
},
deleteItem: function(item) {
var index = clients.findIndex(x => x.id === item.id);
clients.splice(index, 1);
}
};
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
controller: ClientsDB,
fields: [{
name: "name",
type: "text",
width: 150,
validate: "required",
title: "이름"
},
{
name: "approvalDate",
title: "결재일",
type: "text",
width: 150,
align: "center",
itemTemplate: function(value) {
if (value) {
var date = new Date(value);
return date.getFullYear() + "." +
("0" + (date.getMonth() + 1)).slice(-2) + "." +
("0" + date.getDate()).slice(-2) + " " +
("0" + date.getHours()).slice(-2) + ":" +
("0" + date.getMinutes()).slice(-2);
}
return "";
},
insertTemplate: function() {
var $result = $("<input>").attr("type", "datetime-local");
this.insertControl = $result;
return $result;
},
insertValue: function() {
return this.insertControl ? this.insertControl.val() : "";
},
editTemplate: function(value) {
var $result = $("<input>").attr("type", "datetime-local");
if (value) {
$result.val(value.slice(0, 16));
}
this.editControl = $result;
return $result;
},
editValue: function() {
return this.editControl ? this.editControl.val() : "";
}
},
{
type: "control"
}
],
onItemInserted: function(args) {
console.log("Inserted:", args.item);
$("#jsGrid").jsGrid("refresh");
},
onItemUpdated: function(args) {
console.log("Updated:", args.item);
},
onItemDeleted: function(args) {
console.log("Deleted:", args.item);
}
});
});
</script>
</body>
</html>