jQuery UI組件庫(kù)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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

ListView概述

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

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

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

基本配置

若要?jiǎng)?chuàng)建ListView，請(qǐng)使用現(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"
}]
}
});
});

以下示例通過(guò)定義目標(biāo)HTML元素（例如list或div）演示ListView的工作原理，在下面的示例中，ListView項(xiàng)模板僅需要一個(gè)根元素，即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>

功能和特點(diǎn)

• 項(xiàng)目
• 編輯
• 選擇
• 分頁(yè)
• 滾動(dòng)
• 模板