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

---

Kendo UI for jQuery R3 2020试用版下载

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概述

Kendo UI ListView使您可以显示数据绑定项的自定义布局。

ListView非常适合以一致的方式显示项目列表，您可以在在Internet的设计结构、搜索引擎结果、Gmail中的收件箱项目、Trello中的标签列表中看到常见用法的示例。

可以使用Kendo UI DataSource组件将ListView绑定到本地JSON数据或远程数据，它使您可以控制数据的显示。它不提供数据绑定项的默认呈现，而是依靠模板来定义项目列表的显示方式，包括交替的项目和正在编辑的项目。

基本配置

若要创建ListView，请使用现有的span、div或ul HTML元素。

<ul id="listView"></ul>

下面的示例演示如何初始化ListView。

$(document).ready(function() {
$("#listView").kendoListView({
template: "<li>${FirstName} ${LastName}</li>",
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
});

以下示例通过定义目标HTML元素（例如list或div）演示ListView的工作原理，在下面的示例中，ListView项模板仅需要一个根元素，即div.product元素。

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="//demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>

功能和特点

• 项目
• 编辑
• 选择
• 分页
• 滚动
• 模板

---