开发者论坛

 找回密码
 注册 (请使用非IE浏览器)
查看: 3752|回复: 0

Kendo UI ListView分页功能

[复制链接]

0

精华

8

贡献

1767

赞扬

特约版主

帖子
583
软币
4524
在线时间
275 小时
注册时间
2019-2-21
发表于 2020-11-9 09:49:25 | 显示全部楼层 |阅读模式
Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
默认情况下,ListView的分页功能处于禁用状态。
入门指南
要启用分页,请实例化单独的pager控件并将其绑定到相同的DataSource。
[HTML] 纯文本查看 复制代码
<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>

高级配置
当绑定到ListView的项目数大于预期时,pager将控制显示的项目。
1. 创建一个用于渲染的目标元素,通常将其放置在ListView附近。
[HTML] 纯文本查看 复制代码
<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>

2. 通过其pageable属性更新ListView配置,以声明该小部件支持分页并初始化pager。
[HTML] 纯文本查看 复制代码
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://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())
});

下面的示例演示了建议方法的完整实现。
[HTML] 纯文本查看 复制代码
<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="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"
}
}
});

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

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



回复

使用道具 举报

Archiver|手机版|小黑屋|开发者网 ( 苏ICP备08004430号-2 )
版权所有:南京韵文教育信息咨询有限公司

GMT+8, 2024-3-29 10:16

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表