翻譯|使用教程|編輯:龔雪|2020-10-20 10:21:07.463|閱讀 230 次
概述:Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫,本文將為大家介紹Kendo UI ListView Items的使用,歡迎下載最新版體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
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是創建現代Web應用程序的最完整UI庫。
您的項目可能需要在可視化上區分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="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>
下面的示例演示了建議方法的完整實現。
<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>
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網