설치

webPonent Grid 2.0 Installation

15px2

필요사항

webPonent Grid 2.0은 다음 라이브러리들을 기반으로 만들어져 있습니다.

 

webPonent Grid 2.0 라이브러리

webPonent Grid 2.0은 다음 소스파일로 구성 되어 있습니다.

  • webponent.grid.css - 그리드 코어 CSS파일 (수정하시면 안됩니다.)
  • webponent.grid.flat.css - 그리드 디자인을 위한 CSS파일 (이 파일을 수정하셔서 디자인을 바꾸면 됩니다.)
  • webponent.grid.js - 그리드 코어 JAVASCRIPT 파일

Include Files

webPonent Grid를 사용하기 위해 다음과같이 라이브러리 파일들을 include해야 합니다.

xml
<link rel="stylesheet" type="text/css" href="your/path/to/webponent.grid.css">
<link rel="stylesheet" type="text/css" href="your/path/to/webponent.grid.flat.css">

<script src="your/path/to/jquery-1.11.1.min.js"></script>
<script src="your/path/to/jquery-ui-1.10.3.custom.min.js"></script>
<script src="your/path/to/jquery.mousewheel.min.js"></script>
<script src="your/path/to/underscore-min.js"></script>
<script src="your/path/to/webponent.grid.js"></script>

초기화

Markup

그리드를 초기화 시키기 위해 그리드가 들어가는 테이블과, 그리드의 모양을 정의하는 템플릿 두가지 마크업이 필요 합니다.

다음은 기본적으로 HTML테이블을 그리드로 바꾸는 예 입니다. 실제로 그리드를 초기화 시키는 방법은 여러가지가 있습니다. 다양한 초기화 방법을 보시려면 여기로 가주세요.

그리드가 들어가게 될 테이블 부분xml
 
		<table id="ci-grid">
		    <thead>
		        <tr>
		            <th>ID</th>
		            <th>USER NAME</th>
		            <th>PASSWORD</th>
		            <th>GENDER</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td>1</td>
		            <td>areynolds</td>
		            <td>pYhuzU</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>2</td>
		            <td>egeorge</td>
		            <td>i0X0x4</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>3</td>
		            <td>jellis</td>
		            <td>tQWflr38bCS</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>4</td>
		            <td>mbutler</td>
		            <td>FuzZU1FX56</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>5</td>
		            <td>acole</td>
		            <td>3OPmwkEpgx6</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>6</td>
		            <td>fwhite</td>
		            <td>LkuKshVi</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>7</td>
		            <td>jwelch</td>
		            <td>Q41WHH</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>8</td>
		            <td>mjohnson</td>
		            <td>f4kWh88</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>9</td>
		            <td>pmurphy</td>
		            <td>n9N0AFd07</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>10</td>
		            <td>lwashington</td>
		            <td>Iw6HsA</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>11</td>
		            <td>mmason</td>
		            <td>RqkTOr</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>12</td>
		            <td>abutler</td>
		            <td>WailJn</td>
		            <td>Female</td>
		        </tr>
		        <tr>
		            <td>13</td>
		            <td>rsnyder</td>
		            <td>cwBv6A</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>14</td>
		            <td>smitchell</td>
		            <td>LLhPgJ5j</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>15</td>
		            <td>rhudson</td>
		            <td>yw1PlpF153</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>16</td>
		            <td>csanchez</td>
		            <td>wUAFe6jPYvOG</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>17</td>
		            <td>wrivera</td>
		            <td>sbzO0H</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>18</td>
		            <td>awheeler</td>
		            <td>aVlLiFd</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>19</td>
		            <td>pmills</td>
		            <td>la9pWwr</td>
		            <td>Male</td>
		        </tr>
		        <tr>
		            <td>20</td>
		            <td>jlawrence</td>
		            <td>zLf4xJFLK</td>
		            <td>Female</td>
		        </tr>
		    </tbody>
		</table>
 
 
그리드의 모양을 정의하는 템플릿js
	<script id="ci-grid-template" type="text/template">
		<table width="100%">
			<thead>
				<tr>
					<th name="id" align="center" >id</th>
					<th name="user_name" align="center">user_name</th>
					<th name="password" align="center">password</th>
					<th name="gender" align="center">gender</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td name="id" bind="id" ></td>
					<td name="user_name" bind="user_name" ></td>
					<td name="password" bind="password" ></td>
					<td name="gender" bind="gender" ></td>
				</tr>
			</tbody>
		</table>
	</script>

초기화 자바 스크립트

초기화 하고 싶은 테이블과, 템플릿을 jQuery로 선택한후 webponent.grid.init()에 두 인자를 전달해주면 기본적인 초기화를 할 수 있습니다.

그리드 초기화 스크립트js
	var table = $('#ci-grid');

	var template = $('#ci-grid-template');
 
	// 그리드 초기화
	var grid = webponent.grid.init(table, template);