Javascript
[JS] 대용량 데이터에 성능 좋은 SlickGrid 시작하기
Dokon Jang
2021. 2. 5. 10:22
반응형
얼마전 프로젝트에서 DevExpress의 Web Component를 사용해서 Grid를 구현했었습니다.
DevExpress는 많은 기능을 제공하고 있었지만 대용량의 데이터 처리에 문제가 발생했습니다.
컬럼이 60개, 데이터가 2000개 이상일 때 데이터 바인딩 시 화면에 너무 많은 시간이 걸리더군요.
그래서 해결책으로 찾은 것이 SlickGrid입니다.
1. 아래의 GitHub에서 SlickGrid 소스를 받으세요.
https://github.com/6pac/SlickGrid
6pac/SlickGrid
A lightning fast JavaScript grid/spreadsheet. Contribute to 6pac/SlickGrid development by creating an account on GitHub.
github.com
2. WebContent 하위에 js/slickgrid 폴더에 SlickGrid 소스를 넣습니다.
3. 웹페이지의 Head에 CSS와 JS 연결합니다.
<link rel="stylesheet" href="js/slickgrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="js/slickgrid/css/smoothness/jquery-ui.css" type="text/css"/>
<script src="js/slickgrid/lib/jquery-1.12.4.min.js"></script>
<script src="js/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script src="js/slickgrid/slick.core.js"></script>
<script src="js/slickgrid/slick.grid.js"></script>
4. Body내에 SlickGrid가 표시될 DIV 태그를 추가합니다.
<div id="myGrid" style="width:600px;height:500px;"></div>
5. ready()에서 SlickGrid를 초기화 합니다.
<script>
$(document).ready(function () {
// 컬럼
var columns = [
{id: "no", name: "No", field: "no"},
{id: "title", name: "Title", field: "title", width:300},
{id: "creator", name: "Creator", field: "creator", width:150}
];
// 옵션
var options = {
enableColumnReorder: false
};
// 데이터(json)
var data = [
{ no: 1, title: "Title 1", creator:"Creator 1"},
{ no: 2, title: "Title 2", creator:"Creator 2"},
{ no: 3, title: "Title 3", creator:"Creator 3"}
];
// SlickGrid 생성
var grid = new Slick.Grid("#myGrid", data, columns, options);
});
</script>
6. 결과화면
[전체 소스]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Start Slick Grid</title>
<link rel="stylesheet" href="js/slickgrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="js/slickgrid/css/smoothness/jquery-ui.css" type="text/css"/>
<script src="js/slickgrid/lib/jquery-1.12.4.min.js"></script>
<script src="js/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script src="js/slickgrid/slick.core.js"></script>
<script src="js/slickgrid/slick.grid.js"></script>
<script>
$(document).ready(function () {
// 컬럼
var columns = [
{id: "no", name: "No", field: "no"},
{id: "title", name: "Title", field: "title", width:300},
{id: "creator", name: "Creator", field: "creator", width:150}
];
// 옵션
var options = {
enableColumnReorder: false
};
// 데이터(json)
var data = [
{ no: 1, title: "Title 1", creator:"Creator 1"},
{ no: 2, title: "Title 2", creator:"Creator 2"},
{ no: 3, title: "Title 3", creator:"Creator 3"}
];
// SlickGrid 생성
var grid = new Slick.Grid("#myGrid", data, columns, options);
});
</script>
</head>
<body>
<div id="myGrid" style="width:600px;height:500px;"></div>
</body>
</html>반응형