KendoUI 基础:Grid 绑定template展示
Grid 绑定template展示
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="TodayEditorGrid" style="margin:0 10px"></div> 2 3 <script id="trTemplate2" type="text/x-kendo-template"> 4 <tr> 5 <td style=" margin: 0; padding: 1px 0;"> 6 <p class="fontTitle1">#: BusinessForm #<p> 7 </td> 8 <td style=" margin: 0; padding: 1px 0;"> 9 <p class="fontTitle21">#: SKU #</p> 10 <p class="fontTitle22">#: ProductCategory #</p> 11 </td> 12 </tr> 13 </script> 14 15 16 17 <script> 18 19 var dataToday = new kendo.data.DataSource({ 20 transport: { 21 read: { 22 dataType: "json", 23 url: url, 24 }, 25 parameterMap: function (options, operation) { 26 27 return { pageIndex: options.page, pageCount: options.pageSize }; 28 } 29 }, 30 serverPaging: true, 31 pageSize: 10, 32 schema: { 33 total: function (d) { 34 return d.total; 35 }, 36 data: function (d) { 37 return d.rows; 38 } 39 } 40 }); 41 42 var page = 1, pageCount = 10; 43 $(document).ready(function () { 44 45 $("#TodayEditorGrid").kendoGrid({ 46 dataSource: dataToday, 47 editable: false, 48 height: 565, 49 resizable: true, 50 selectable: "single row", 51 rowTemplate: kendo.template($("#trTemplate2").html()), 52 columns: [ 53 { title: " ", width: '20%' }, 54 { headerTemplate: '<p class="fontTitle21">SKU</p><p class="fontTitle22">templateType</p>', width: '80%' }, 55 ], 56 pageable: { 57 pageSize: 15, 58 info: false, 59 refresh: true, //启用刷新按钮 60 } 61 }); 62 63 }); 64 65 </script>
效果展示图: