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="http://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>

功能和特點

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

---