翻譯|使用教程|編輯:龔雪|2020-11-06 11:13:13.737|閱讀 229 次
概述:Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù),本文將為大家介紹Kendo UI ListView分頁(yè)功能,歡迎下載最新版體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
Kendo UI for jQuery R3 2020 SP1試用版下載
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ù)。
默認(rèn)情況下,ListView的分頁(yè)功能處于禁用狀態(tài)。
要啟用分頁(yè),請(qǐng)實(shí)例化單獨(dú)的pager控件并將其綁定到相同的DataSource。
<div id="listview"></div>
<div id="pager"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ id: 1, item: "Item 1" },
{ id: 2, item: "Item 2" },
{ id: 3, item: "Item 3" },
{ id: 4, item: "Item 4" },
{ id: 5, item: "Item 5" },
{ id: 6, item: "Item 6" }
],
pageSize: 2
});
$("#listview").kendoListView({
dataSource: dataSource,
template: "<div>#: item #</div>"
});
$("#pager").kendoPager({
dataSource: dataSource
});
</script>
當(dāng)綁定到ListView的項(xiàng)目數(shù)大于預(yù)期時(shí),pager將控制顯示的項(xiàng)目。
1. 創(chuàng)建一個(gè)用于渲染的目標(biāo)元素,通常將其放置在ListView附近。
<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>
2. 通過(guò)其pageable屬性更新ListView配置,以聲明該小部件支持分頁(yè)并初始化pager。
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 4
});
$("pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
下面的示例演示了建議方法的完整實(shí)現(xiàn)。
<div id="listView" style="max-height:400px;overflow:auto;"></div>
<div id="pager"></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>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
}
});
$("pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
</script>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)