KendoUI 基础：Grid 绑定template展示

Grid 绑定template展示

<div id="TodayEditorGrid" style="margin:0 10px"></div>

<script id="trTemplate2" type="text/x-kendo-template">
<tr>
<td style=" margin: 0; padding: 1px 0;">
<p class="fontTitle1">#: BusinessForm #<p>
</td>
<td style=" margin: 0; padding: 1px 0;">
<p class="fontTitle21">#: SKU #</p>
<p class="fontTitle22">#: ProductCategory #</p>
</td>
</tr>
</script>

 

<script>

var dataToday = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: url,
},
parameterMap: function (options, operation) {

return { pageIndex: options.page, pageCount: options.pageSize };
}
},
serverPaging: true,
pageSize: 10,
schema: {
total: function (d) {
return d.total;
},
data: function (d) {
return d.rows;
}
}
});

var page = 1, pageCount = 10;
$(document).ready(function () {

$("#TodayEditorGrid").kendoGrid({
dataSource: dataToday,
editable: false,
height: 565,
resizable: true,
selectable: "single row",
rowTemplate: kendo.template($("#trTemplate2").html()),
columns: [
{ title: " ", width: '20%' },
{ headerTemplate: '<p class="fontTitle21">SKU</p><p class="fontTitle22">templateType</p>', width: '80%' },
],
pageable: {
pageSize: 15,
info: false,
refresh: true, //启用刷新按钮
}
});

});

</script>

 

效果展示图：