Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

ListView概述

Kendo UI ListView使您可以顯示數(shù)據(jù)綁定項的自定義布局。

ListView非常適合以一致的方式顯示項目列表，您可以在在Internet的設(shè)計結(jié)構(gòu)、搜索引擎結(jié)果、Gmail中的收件箱項目、Trello中的標簽列表中看到常見用法的示例。

可以使用Kendo UI DataSource組件將ListView綁定到本地JSON數(shù)據(jù)或遠程數(shù)據(jù)，它使您可以控制數(shù)據(jù)的顯示。它不提供數(shù)據(jù)綁定項的默認呈現(xiàn)，而是依靠模板來定義項目列表的顯示方式，包括交替的項目和正在編輯的項目。

基本配置

若要創(chuàng)建ListView，請使用現(xiàn)有的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元素。

   

   

   

   

  功能和特點

  • 項目
  • 編輯
  • 選擇
  • 分頁
  • 滾動
  • 模板