반응형
이번 포스팅에서는 jqGrid를 활용하여 간단한 직원 관리 시스템 프로젝트를 구현하는 방법을 설명하겠습니다.
프로젝트 : 직원 관리 시스템
직원 관리 시스템은 직원 목록을 조회하고, 새로운 직원을 추가하거나 수정 및 삭제하는 기능을 제공합니다. 이 시스템은 jqGrid의 CRUD 기능과 서버에서 데이터를 불러오는 기능을 포함합니다.
HTML 및 jqGrid 설정
<!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="employeeGrid"></table>
<div id="pager"></div>
<script>
$(document).ready(function () {
$("#employeeGrid").jqGrid({
url: 'https://jsonplaceholder.typicode.com/users', // 직원 데이터를 가져올 서버 URL
datatype: "json",
colNames: ['ID', '이름', '이메일', '전화번호', '회사'],
colModel: [
{ name: 'id', index: 'id', width: 50, key: true },
{ name: 'name', index: 'name', width: 150, editable: true },
{ name: 'email', index: 'email', width: 200, editable: true },
{ name: 'phone', index: 'phone', width: 150, editable: true },
{ name: 'company.name', index: 'company.name', width: 150, editable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
height: 'auto',
autowidth: true,
caption: "직원 관리 시스템",
editurl: '/save', // 데이터 저장 URL
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
});
});
</script>
</body>
</html>설명: 이 코드는 직원 관리 시스템의 기본 구조입니다. url 부분에 서버에서 제공하는 JSON 데이터를 연결하여 그리드를 초기화하고, CRUD 기능을 지원하는 기본적인 그리드 구성을 제공하며, 편집 가능한 열로 구성됩니다. editurl 속성은 데이터를 저장하는 URL을 지정합니다.
서버 통합 및 백엔드 연동
직원 관리 시스템을 완성하기 위해서는 서버 측 코드가 필요합니다. 서버는 데이터를 제공하고, 데이터 추가 및 수정 작업을 처리합니다. 서버는 REST API를 통해 프론트엔드와 데이터를 주고받을 수 있습니다. 아래는 간단한 Node.js 백엔드 예시입니다.
Node.js 서버 코드
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
let employees = [
{ id: 1, name: 'John Doe', email: 'john@example.com', phone: '123-456-7890', company: { name: 'ABC Corp' } },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', phone: '987-654-3210', company: { name: 'XYZ Inc' } }
];
// 직원 목록 가져오기
app.get('/employees', (req, res) => {
res.json(employees);
});
// 직원 추가 또는 수정
app.post('/save', (req, res) => {
const employee = req.body;
const index = employees.findIndex(emp => emp.id === employee.id);
if (index !== -1) {
// 수정
employees[index] = employee;
} else {
// 추가
employee.id = employees.length + 1;
employees.push(employee);
}
res.json({ success: true });
});
// 직원 삭제
app.delete('/delete/:id', (req, res) => {
const id = parseInt(req.params.id);
employees = employees.filter(emp => emp.id !== id);
res.json({ success: true });
});
app.listen(3000, () => {
console.log('서버가 포트 3000에서 실행 중입니다.');
});설명: 위 코드는 기본적인 Node.js 서버 예제입니다. GET /employees 요청으로 직원 목록을 반환하고, POST /save 요청으로 직원 데이터를 추가하거나 수정하며, DELETE /delete/:id 요청으로 특정 직원을 삭제할 수 있습니다.
참고 사이트: jqGrid Documentation
반응형
'JS > jqGrid' 카테고리의 다른 글
| [jqGrid] 12. 자주 발생하는 문제 해결 (FAQ) (0) | 2024.09.12 |
|---|---|
| [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] 6. 데이터 편집 및 수정 (0) | 2024.09.10 |
| [jqGrid] 5. 옵션 및 설정 (0) | 2024.09.09 |
| [jqGrid] 4. 데이터 로드 및 바인딩 (0) | 2024.09.09 |