로우에 마크업 붙이기

마이크로 템플릿을 이용하면 그리드에 HTML의 모든 요소를 붙힐 수 있습니다.

다음은 그리드내 인풋요로, 링크요소, jQueryUI calendar를 삽입한 예제 입니다.

xml
			<table id="grid-table-1">
			</table>
			<script id="grid-template-1" type="text/template">
				<table width="100%" height="350px">
					<thead>
						<tr>
							<th name="Isu">링크</th>
							<th name="NowPrc" align="right">텍스트박스</th>
							<th name="PrdayCmp" align="center">체크박스</th>
							<th name="Updn" align="right">등락율(%)</th>
							<th name="TopQty" align="right">달력</th>
							<th name="SellRmqty" align="right">셀렉트박스</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><a href="#" name="Isu" bind="Isu"></a></td>
							<td><input type="text" class="text" name="NowPrc" bind="NowPrc"/></td>
							<td name="PrdayCmp"><input type="checkbox"/></td>
							<td name="Updn" bind="Updn"></td>
							<td name="TopQty">
								<input type="text" class="date-picker text">
							</td>
							<td>
								<select class="grid-select">
									<option>{{SellRmqty}}</option>
									<option>{{SellOrdprc}}</option>
									<option>{{BuyOrdprc}}</option>
									<option>{{BuyRmqty}}</option>
								</select>
							</td>
						</tr>
					</tbody>
				</table>
			</script>
 
			<script>
			var table1 = $('#grid-table-1');
			var template1 = $('#grid-template-1');
			var grid1 = webponent.grid.init(table1, template1, {
				rowRendered : function (row) {
					$(row).find('.date-picker').datepicker();
				}
			});
			</script>

마이크로 템플릿을 사용할때 주의해야 하는 점은 name속성은 bind속성과 같은 요소에 정의 되어야 합니다.

예들들어  <td><input type="text" class="text" name="NowPrc" bind="NowPrc"/></td>와 같은 경우 입니다.

위 예제에서는 rowRendered옵션을 이용해서 jQuery calendar를 초기화 시켰습니다.