jQuery UI組件庫Kendo UI for jQuery數(shù)據(jù)管理使用教程：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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

ListView概述

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

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

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

基本配置

若要創(chuàng)建ListView，請使用現(xiàn)有的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"
}]
}
});
});

以下示例通過定義目標(biāo)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>

功能和特點

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

---

了解最新Kendo UI最新資訊，請關(guān)注Telerik中文網(wǎng)！