본문 바로가기
Javascript

[JS] 대용량 데이터에 성능 좋은 SlickGrid 시작하기

by Dokon Jang 2021. 2. 5.
반응형

얼마전 프로젝트에서 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>
반응형

댓글