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

Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI 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元素。

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

$(document).ready(function() {
$(“#listView”).kendoListView({
template: “

• ${FirstName} ${LastName}
• ”,
  dataSource: {
  data: [
  {
  FirstName: “Joe”,
  LastName: “Smith”
  },
  {
  FirstName: “Jane”,
  LastName: “Smith”
  }]
  }
  });
  });

   

   

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

   

   

   

   

  功能和特点

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