logo Kendo UI使用教程-2019 我也要发布文档

jQuery UI组件库数据管理使用教程:ListView Items


Kendo UI for jQuery R3 2020试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Items

您的项目可能需要在可视化上区分ListView中的每个替代项。

例如,您可能需要在稍暗的背景(带状行)中渲染第二个项目。 要在ListView中呈现交替项,请通过定义altTemplate属性来设置模板。

<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="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>

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

下面的示例演示了建议方法的完整实现。

<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="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>

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

<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://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>


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发