webPonent Grid 2.0은 다음 라이브러리들을 기반으로 만들어져 있습니다.
webPonent Grid 2.0은 다음 소스파일로 구성 되어 있습니다.
webPonent Grid를 사용하기 위해 다음과같이 라이브러리 파일들을 include해야 합니다.
<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>
그리드를 초기화 시키기 위해 그리드가 들어가는 테이블과, 그리드의 모양을 정의하는 템플릿 두가지 마크업이 필요 합니다.
다음은 기본적으로 HTML테이블을 그리드로 바꾸는 예 입니다. 실제로 그리드를 초기화 시키는 방법은 여러가지가 있습니다. 다양한 초기화 방법을 보시려면 여기로 가주세요.
<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>
<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()에 두 인자를 전달해주면 기본적인 초기화를 할 수 있습니다.
var table = $('#ci-grid'); var template = $('#ci-grid-template'); // 그리드 초기화 var grid = webponent.grid.init(table, template);