Slickgrid example1-simple.html 분석

Language/Javascript

Slickgrid example1-simple.html 분석

TechNote.kr 2015. 11. 16. 10:24

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid example 1: Basic grid</title>
		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
	</head>
	<body>
		<table width="100%">
		<tr>
			<td valign="top" width="50%">
				<div id="myGrid" style="width:600px;height:500px;display:none;"></div>
			</td>
			<td valign="top">
				<h2>Demonstrates:</h2>
				<ul>
					<li>basic grid with minimal configuration</li>
				</ul>
			</td>
		</tr>
		</table>

		<script src="../lib/jquery-1.7.min.js"></script>
		<script src="../lib/jquery.event.drag-2.0.min.js"></script>

		<script src="../slick.core.js"></script>
		<script src="../slick.grid.js"></script>

		<script>

		var grid;

		var columns = [
			{id:"title", name:"Title", field:"title"},
			{id:"duration", name:"Duration", field:"duration"},
			{id:"%", name:"% Complete", field:"percentComplete"},
			{id:"start", name:"Start", field:"start"},
			{id:"finish", name:"Finish", field:"finish"},
			{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
		];

		var options = {
			enableCellNavigation: true,
			enableColumnReorder: false
		};

		$(function() {
			var data = [];
			for (var i = 0; i < 500; 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").show();
		})

		</script>
	</body>
</html>

[Slickgrid를 사용하기 위한 기본 설정 포함]

line 1 : HTML 5 규격 사용 선언 ([참고자료])

line 6,7,8 : link tag 로 slickgrid, jquery css 연결 ([참고자료])

line 25 ~ 29 : jquery, slickgrid javascript 연결

[Slickgrid의 위치 정의]

line 14 : div tag로 실제 slickgrid가 구현될 위치를 선언.

[Slickgrid의 구현]

line 33 : 실제 grid 저장할 변수 선언

line 35 : slickgrid의 column(열) 정의 - 여기서는 6개의 열을 정의함 (title, duration, %, start, finish, effort-driven)

line 44 : slickgrid의 option 정의 - 여기서는 enableCellNavigation 사용, enableColumnReorder 미사용

line 49 ~ 65 : 실제 Data 생성 및 grid instance 생성 구간

저작자표시 비영리 변경금지 (새창열림)

'Language > Javascript' 카테고리의 다른 글

javascript is eating the world. (0)	2015.12.23
ajax POST debugging 방법 (0)	2015.12.12
ajax를 이용한 async post data 저장 (0)	2015.11.16
Slickgrid grid options (0)	2015.11.16
ajax (0)	2015.11.02
Closure - 클로저 (0)	2015.10.25
Grid - Slickgrid (0)	2015.10.24
Slickgrid 와 django의 연동 (0)	2015.10.16

현재글Slickgrid example1-simple.html 분석

TechNote.kr