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

Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，Kendo UI 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概述

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

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

基本配置

若要创建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="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>

功能和特点

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