# Remote Operations와 DxDataGrid를 활용한 웹 애플리케이션 예제
一
오늘은 DxDataGrid를 사용하여 원격 데이터 작업을 수행하는 방법에 대해 알아보겠습니다. Node.js와 Express.js를 이용해 서버를 구축하고, 클라이언트 측에서는 DxDataGrid를 설정하여 필터링, 정렬, 페이징 작업을 구현하는 예제를 살펴보겠습니다.
## 서버 설정
먼저, Node.js와 필요한 모듈을 설치합니다. SQLite를 사용하여 데이터베이스를 설정하겠습니다.
### 1. Node.js와 필요한 모듈 설치
프로젝트 디렉토리에서 다음 명령어를 실행합니다:
```bash
npm init -y
npm install express body-parser sqlite3
```
### 2. 데이터베이스와 테이블 생성
`database.js` 파일을 생성하고, SQLite 데이터베이스와 샘플 테이블을 설정합니다:
```javascript
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database(':memory:'); // 메모리 내 데이터베이스 사용
db.serialize(() => {
db.run("CREATE TABLE products (ProductID INT, ProductName TEXT, QuantityPerUnit TEXT, UnitPrice REAL, UnitsInStock INT)");
const stmt = db.prepare("INSERT INTO products VALUES (?, ?, ?, ?, ?)");
stmt.run(1, 'Chai', '10 boxes x 20 bags', 18, 39);
stmt.run(2, 'Chang', '24 - 12 oz bottles', 19, 17);
// 추가 데이터 삽입
stmt.finalize();
});
module.exports = db;
```
### 3. 서버 코드 작성
`server.js` 파일을 생성하고 Express 서버를 설정합니다:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const db = require('./database');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.get('/api/products', (req, res) => {
let sql = "SELECT * FROM products";
let params = [];
// 필터링
if (req.query.filter) {
const filter = JSON.parse(req.query.filter);
if (filter.ProductName) {
sql += " WHERE ProductName LIKE ?";
params.push(`%${filter.ProductName}%`);
}
}
// 정렬
if (req.query.sort) {
const [field, order] = JSON.parse(req.query.sort);
sql += ` ORDER BY ${field} ${order === 'asc' ? 'ASC' : 'DESC'}`;
}
// 페이징
const pageSize = parseInt(req.query.pageSize) || 10;
const pageIndex = parseInt(req.query.pageIndex) || 0;
sql += ` LIMIT ${pageSize} OFFSET ${pageIndex * pageSize}`;
db.all(sql, params, (err, rows) => {
if (err) {
res.status(400).json({ "error": err.message });
return;
}
res.json({
data: rows,
totalCount: rows.length
});
});
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
```
### 4. 서버 실행
서버를 실행하려면 다음 명령어를 사용하세요:
```bash
node server.js
```
이제 서버가 클라이언트의 요청을 처리할 준비가 되었습니다.
## 클라이언트 설정
이제 클라이언트 측에서 DxDataGrid를 설정하는 HTML 파일을 작성합니다. 서버에서 데이터를 가져와 필터링, 정렬, 페이징 작업을 처리하도록 합니다.
### 5. 클라이언트 코드 작성
`index.html` 파일을 생성하고 다음과 같이 구성합니다:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DxDataGrid Remote Operations Example</title>
<link href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" rel="stylesheet">
<script src="https://cdn3.devexpress.com/jslib/20.2.6/js/dx.all.js"></script>
</head>
<body>
<div id="gridContainer"></div>
<script>
$(function() {
$("#gridContainer").dxDataGrid({
dataSource: {
load: function(loadOptions) {
let params = '?';
if (loadOptions.filter) {
params += `filter=${JSON.stringify(loadOptions.filter[1])}&`;
}
if (loadOptions.sort) {
params += `sort=${JSON.stringify([loadOptions.sort[0].selector, loadOptions.sort[0].desc ? 'desc' : 'asc'])}&`;
}
if (loadOptions.skip !== undefined) {
params += `pageIndex=${loadOptions.skip / loadOptions.take}&`;
}
if (loadOptions.take !== undefined) {
params += `pageSize=${loadOptions.take}&`;
}
return fetch('/api/products' + params)
.then(response => response.json())
.then(data => {
return {
data: data.data,
totalCount: data.totalCount
};
});
}
},
remoteOperations: {
sorting: true,
paging: true,
filtering: true,
grouping: true,
summary: true
},
columns: [
{ dataField: "ProductID", width: 90 },
{ dataField: "ProductName" },
{ dataField: "QuantityPerUnit" },
{ dataField: "UnitPrice" },
{ dataField: "UnitsInStock" }
],
filterRow: { visible: true },
paging: {
pageSize: 10
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [10, 20, 50],
showInfo: true
},
groupPanel: { visible: true },
summary: {
totalItems: [{
column: "UnitPrice",
summaryType: "sum"
}]
}
});
});
</script>
</body>
</html>
```
이제 이 예제를 실행하면 서버에서 데이터를 가져와 필터링, 정렬, 페이징을 처리하는 완전한 클라이언트-서버 통합 기능을 확인할 수 있습니다.
---
이 예제가 도움이 되기를 바랍니다! 질문이나 추가적인 도움이 필요하다면 언제든지 문의해주세요. 😊🚀
'갑을병정이야기' 카테고리의 다른 글
| jQuery 배열 복사 방법 (1) | 2024.12.19 |
|---|---|
| Java와 함께 하는 koin(feat kotlin), json 활용 이야기 (1) | 2024.12.14 |
| Retrofit을 이용한 REST API 활용 방법 (3) | 2024.12.04 |
| DevExpress dxDataGrid 사용하기: 사용자 입력과 날짜 형식 변환 (1) | 2024.10.27 |
| Visual SVN에서 변경 이력 및 내역 확인하기 (1) | 2024.10.01 |