toggle menu

[SlickGrid] 슬릭 그리드 기본 설정

2012. 11. 16. 14:36 JavaScript
슬릭그리드는 자바스크립트 기반의 매우 심플한 grid/spreadsheet component 이다. 처음 배울 때는 다소 까다로울 수 있지만, 일단 한번 사용방법을 익히고 나면 마음에 들거란다.

대략의 특징은 아래와 같다.

Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
Extremely fast rendering speed
Supports jQuery UI Themes
Background post-rendering for richer cells
Configurable & customizable
Full keyboard navigation
Column resize/reorder/show/hide
Column autosizing & force-fit
Pluggable cell formatters & editors
Support for editing and creating new rows.
Grouping, filtering, custom aggregators, and more!
Advanced detached & multi-field editors with undo/redo support.
“GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.


슬릭그리드
https://github.com/mleibman/SlickGrid



가장 단순한 형태의 적용 예를 살펴보면, 이해가 빠를 것이다.
단순하긴 하지만, 50만건의 데이터를 아무런 속도 저하없이 처리하는 모습을 확인할 수 있다.
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

		<!-- 슬릭그리드 기본 CSS -->
		<link rel="stylesheet" href="libs/slickgrid/css/slick.grid.css" type="text/css"/>

		<!-- jquery-ui가 없으면 안예쁘게 나옴 -->
		<link rel="stylesheet" href="libs/jquery/css/jquery-ui.css" type="text/css"/>

		<!-- 필수 jquery library -->
		<script src="libs/jquery/js/jquery-1.7.2.min.js"></script>
		<script src="libs/jquery/js/jquery.event.drag-2.0.min.js"></script>

		<!-- 필수 슬릭그리드 library -->
		<script src="libs/slickgrid/js/slick.core.js"></script>
		<script src="libs/slickgrid/js/slick.grid.js"></script>
		
		<!-- 슬릭그리드 세팅 -->
		<script type="text/javascript" charset="utf-8">
			//DOM이 모두 로드되었을 때
			$(document).ready(function () {
				//슬릭 그리드 컬럼 설정
				var columns = [{
					id : "title", //내부 접근 아이디
					name : "제목", //Grid에 표시될 컬럼명
					field : "title" //연동할 데이터상의 변수명
				},
				{
					id : "duration",
					name : "기간",
					field : "duration"
				},
				{
					id : "%",
					name : "성취도(%)",
					field : "percentComplete"
				},
				{
					id : "start",
					name : "시작일",
					field : "start"
				},
				{
					id : "finish",
					name : "종료일",
					field : "finish"
				},
				{
					id : "effort-driven",
					name : "노력 여부",
					field : "effortDriven"
				}];
	
				//그리드 옵션들
				var options = {
					enableCellNavigation : true,
					enableColumnReorder : false //재정렬은 jquery-ui.sortable 모듈 필요
				};
	
				
				//테스트를 위해 임의로 데이터를 생성하고,
				//SlickGrid 객체를 만들어 myGrid라는 id의 Div에 적용한다.
				(function () {
					var data = [];
					for(var i = 0; i < 500000; i++) {
						data[i] = {
							title : "Task " + i,
							duration : "5 days",
							percentComplete : Math.round(Math.random() * 100),
							start : "01/01/2009",
							finish : "01/05/2009",
							effortDriven : (i % 5 == 0)
						};
					}
	
					var grid = new Slick.Grid("#myGrid", data, columns, options);
				})();
					
			});
		</script>

	</head>
	<body>
		<!-- 아무것도 없는 DIV를 만든다. -->
		<!-- 여기에 SlickGrid가 그려진다. -->
		<div id="myGrid" style="width:600px;height:500px;"></div>

	</body>
</html>


 
이번에는 데이터를 어떻게 업데이트하는지 확인해보기 위해 그리드를 클릭시 데이터를 변경하는 예를 살펴보자.
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

		<!-- 슬릭그리드 전체 틀(구조) -->
		<link rel="stylesheet" href="libs/slickgrid/css/slick.grid.css" type="text/css"/>

		<!-- jquery-ui가 없으면 안예쁘게 나옴 -->
		<link rel="stylesheet" href="libs/jquery/css/jquery-ui.css" type="text/css"/>

		<!-- 필수 jquery library -->
		<script src="libs/jquery/js/jquery-1.7.2.min.js"></script>
		<script src="libs/jquery/js/jquery.event.drag-2.0.min.js"></script>

		<!-- 필수 슬릭그리드 library -->
		<script src="libs/slickgrid/js/slick.core.js"></script>
		<script src="libs/slickgrid/js/slick.grid.js"></script>
		
		<!-- 슬릭그리드 세팅 -->
		<script type="text/javascript" charset="utf-8">
			//DOM이 모두 로드되었을 때
			$(document).ready(function () {
				var grid = null;
				
				//슬릭 그리드 컬럼 설정
				var columns = [{
					id : "title", //내부 접근 아이디
					name : "제목", //Grid에 표시될 컬럼명
					field : "title" //연동할 데이터상의 변수명
				},
				{
					id : "duration",
					name : "기간",
					field : "duration"
				},
				{
					id : "%",
					name : "성취도(%)",
					field : "percentComplete"
				},
				{
					id : "start",
					name : "시작일",
					field : "start"
				},
				{
					id : "finish",
					name : "종료일",
					field : "finish"
				},
				{
					id : "effort-driven",
					name : "노력 여부",
					field : "effortDriven"
				}];
	
				//그리드 옵션들
				var options = {
					enableCellNavigation : true,
					enableColumnReorder : false //재정렬은 jquery-ui.sortable 모듈 필요
				};
	
				
				//테스트를 위해 임의로 데이터를 생성하고,
				//SlickGrid 객체를 만들어 myGrid라는 id의 Div에 적용한다.
				(function () {
					var data = [];
					for(var i = 0; i < 5; i++) {
						data[i] = {
							title : "Task " + i,
							duration : "5 days",
							percentComplete : Math.round(Math.random() * 100),
							start : "01/01/2009",
							finish : "01/05/2009",
							effortDriven : (i % 5 == 0)
						};
					}
	
					grid = new Slick.Grid("#myGrid", data, columns, options);
				})();
				
				
				//클릭시 업데이트 테스트
				$('#myGrid').unbind().bind('click', function (e) {
					//한줄짜리 더미 데이터
					var dummyData = [{
						title : "ㅋㅋㅋ",
						duration : "하루",
						percentComplete : 100,
						start : "01/01/2009",
						finish : "01/05/2009",
						effortDriven : false
					}] 
				
					//아래의 세 과정이 필수
					grid.setData(dummyData); //데이터를 설정
					grid.updateRowCount(); //로우 카운트 업데이트
					grid.render(); //다시 그리기
				});
					
			});
		</script>

	</head>
	<body>
		<!-- 아무것도 없는 DIV를 만든다. -->
		<!-- 여기에 SlickGrid가 그려진다. -->
		<div id="myGrid" style="width:600px;height:500px;"></div>

	</body>
</html>


컬럼에 사용되는 옵션을 몇가지 더 살펴보도록 하자.
//슬릭 그리드 컬럼 설정
var columns = [{
	id : "title", //내부 접근 아이디
	name : "제목", //Grid에 표시될 컬럼명
	field : "title" //연동할 데이터상의 변수명
},

........

위와 같이 컬럼은 가장 기본적으로 id, name, field 세 가지로 구성되어 있지만, 몇가지 더 사용될 수 있는 옵션이 존재한다.

resizable : true | false
sortable : true | false
minWidth
rerenderOnResize : true | false
headerCssClass

이름 그대로 각 컬럼이 리사이즈 가능한지, 정렬 가능한지, 최소 가로 넓이는 얼마인지, 리사이즈했을 때 다시 그리는지 등을 설정할 수 있다.



JavaScript 관련 포스팅 더보기