슬릭그리드는 자바스크립트 기반의 매우 심플한 grid/spreadsheet component 이다. 처음 배울 때는 다소 까다로울 수 있지만, 일단 한번 사용방법을 익히고 나면 마음에 들거란다.
대략의 특징은 아래와 같다.
Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)Extremely fast rendering speedSupports jQuery UI ThemesBackground post-rendering for richer cellsConfigurable & customizableFull keyboard navigationColumn resize/reorder/show/hideColumn autosizing & force-fitPluggable cell formatters & editorsSupport 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 | falsesortable : true | falseminWidthrerenderOnResize : true | falseheaderCssClass
이름 그대로 각 컬럼이 리사이즈 가능한지, 정렬 가능한지, 최소 가로 넓이는 얼마인지, 리사이즈했을 때 다시 그리는지 등을 설정할 수 있다.