jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView Items

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库。

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>