KendoUI 基础：Grid 绑定template展示

Grid 绑定template展示
 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: " ",  '20%' },
54 { headerTemplate: '<p class="fontTitle21">SKU</p><p class="fontTitle22">templateType</p>',  '80%' },
55 ],
56 pageable: {
57 pageSize: 15,
58 info: false,
59 refresh: true, //启用刷新按钮
60 }
61 });
62 
63 });
64 
65 </script>
View Code
效果展示图：