jQuery UI組件庫(kù)Kendo UI for jQuery數(shù)據(jù)管理使用教程：ListView Items

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ù)。

Items

您的項(xiàng)目可能需要在可視化上區(qū)分ListView中的每個(gè)替代項(xiàng)。

例如，您可能需要在稍暗的背景（帶狀行）中渲染第二個(gè)項(xiàng)目。 要在ListView中呈現(xiàn)交替項(xiàng)，請(qǐng)通過定義altTemplate屬性來(lái)設(shè)置模板。

<div id="listView"></div>
<div class="k-page-wrap">
<div id="pager"></div>
</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>

<script type="text/x-kendo-tmpl" id="altTemplate">
<div class="product alt">
<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>

下面的示例演示了建議方法的完整實(shí)現(xiàn)。

<div id="listView" style="max-height:400px;overflow:auto;"></div>
<div class="k-pager-wrap">
<div id="pager"></div>
</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>

<script type="text/x-kendo-tmpl" id="altTemplate">
<div class="product alt">
<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>

<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 3
});

$("#pager").kendoPager({
dataSource: dataSource
});

$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html()),
altTemplate: kendo.template($("#altTemplate").html()),
});
</script>

<style>
.alt { background-color: #EEE; }
</style>