jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView模板

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

ListView使您可以使用模板来呈现其项目。

引用的模板显示服务设置的结果。

var dataSource = new kendo.data.DataSource({transport: {read: {url: "https://demos.telerik.com/kendo-ui/service/Products",dataType: "jsonp"}}});$("#listView").kendoListView({dataSource: dataSource,template: kendo.template($("#template").html())});

下面的示例演示了建议方法的完整实现。

<div id="listView" style="max-height:400px;overflow:auto;"></div><script type="text/x-kendo-tmpl" id="template"><div class="product"><img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /><h3>#:ProductName#</h3><p>#:kendo.toString(UnitPrice, "c")#</p></div></script><script>var dataSource = new kendo.data.DataSource({transport: {read: {url: "https://demos.telerik.com/kendo-ui/service/Products",dataType: "jsonp"}}});$("#listView").kendoListView({dataSource: dataSource,pageable: true,template: kendo.template($("#template").html())});</script>