마이크로 템플릿을 이용하면 그리드에 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를 초기화 시켰습니다.