마이크로 템플릿을 이용하면 그리드에 HTML의 모든 요소를 붙힐 수 있습니다.
다음은 그리드내 인풋요로, 링크요소, jQueryUI calendar를 삽입한 예제 입니다.
<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를 초기화 시켰습니다.