jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView模板-控件新闻-慧都网

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

翻译|使用教程|编辑：龚雪|2020-11-17 09:42:23.500|阅读 208 次

概述：Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，本文将为大家介绍Kendo UI ListView模板功能，欢迎下载最新版体验！

相关链接：

Kendo UI for jQuery R3 2020 SP1试用版下载

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>

了解最新Kendo UI最新资讯，请关注Telerik中文网！