[
  {
    "id": "1",
    "user_name": "areynolds",
    "password": "pYhuzU",
    "gender": "Male"
  },
  {
    "id": "2",
    "user_name": "egeorge",
    "password": "i0X0x4",
    "gender": "Female"
  },
  {
    "id": "3",
    "user_name": "jellis",
    "password": "tQWflr38bCS",
    "gender": "Female"
  },
  {
    "id": "4",
    "user_name": "mbutler",
    "password": "FuzZU1FX56",
    "gender": "Female"
  }
]] ]>

테이블이 세팅되어있지않구 JSON데이터를 기반으로 데이터를 넣을때는 반대의 과정이 일어납니다.

bind속성과 데이터 모델은 밀접한 관계가 있어서, 자세한 내용은 데이터 모델편에서 설명하겠습니다.

SCRIPT Template VS HTML Template

 대다수의 예제는 script태그안에 template을 정의하고, table태그에 테이블을 정의했습니다. 하지만 실제로는 꼭 script태그를 이용해서 template을 정의할 필요는 없습니다. script태그를 사용하면 기본적으로 display:none속성이있다는점과, 브라우저가 렌더링시 이 태그를 무시해, 조금이라도 렌더링성능이 향상되는 장점이 있습니다.

 다음은 여러가지 방식으로 테이블과 템플릿을 정의하는 예제입니다.

<table id="ci-grid">
	   
</table>

<script id="ci-grid-template" type="text/template">
	<table>
		<thead>
			<tr>
				<th name="id" >ID</th>
				<th name="user_name">USER NAME</th>
				<th name="password">PASSWORD</th>
				<th name="gender">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>
 
<script>
	var table = $('#ci-grid');
	var template = $('#ci-grid-template');
 
	var grid = webponent.grid.init(table, template);
</script>

<div id="ci-grid">
	   
</div>

<div id="ci-grid-template" style="display:none;">
	<table>
		<thead>
			<tr>
				<th name="id" >ID</th>
				<th name="user_name">USER NAME</th>
				<th name="password">PASSWORD</th>
				<th name="gender">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>
</div>


<script>
	var table = $('#ci-grid');
	var template = $('#ci-grid-template');

	var grid = webponent.grid.init(table, template);

</script>

<div id="ci-grid">
	<table>
		<thead>
			<tr>
				<th name="id" >ID</th>
				<th name="user_name">USER NAME</th>
				<th name="password">PASSWORD</th>
				<th name="gender">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>
</div>

<script>
	var template = $('#ci-grid');

	var grid = webponent.grid.init(template);

</script>

	<table width="600px" height="400px">
		...
	</table>

	<table>
		<thead>
			<tr>
				<th name="id" width="70px">id</th>
				<th name="user_name" width="150px">user_name</th>
				<th name="password" width="150px">password</th>
				<th name="gender" width="100px">gender</th>
			</tr>
		</thead>
		...
	</table>

	<table>
		<thead>
			<tr>
				<th name="id" width="70px">id</th>
				<th name="user_name" width="*" min-width="200px">user_name</th>
				<th name="password" width="150px">password</th>
				<th name="gender" width="100px">gender</th>
			</tr>
		</thead>
		...
	</table>

	<table>
		<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="right">gender</th>
			</tr>
		</thead>
		...
	</table>

	<table>
		<thead>
			<tr>
				<th name="id">id</th>
				<th name="user_name">user_name</th>
				<th name="password" visibility="hidden">password</th>
				<th name="gender">gender</th>
			</tr>
		</thead>
		...
	</table>

	<table>
		<thead>
			<tr>
				<th name="id" fixed="fixed">id</th>
				<th name="user_name">user_name</th>
				<th name="password">password</th>
				<th name="gender">gender</th>
			</tr>
		</thead>
		...
	</table>

	<table>
		<thead>
			<tr>
				<th rowspan="2" name="id" fixed="fixed">id</th>
				<th rowspan="2" name="user_name">user_name</th>
				<th rowspan="2" name="password">password</th>
				<th colspan="2" name="name">name</th>
			</tr>
			<tr>
				<th parent="name" name="first_name">First name</th>
				<th parent="name" name="last_name">Last name</th>
			</tr>
		</thead>
		...
	</table>