• Kendo UI ListView分页功能,让Web开发更轻松


    Kendo UI for jQuery R3 2020 SP1试用版下载

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

    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的分页功能处于禁用状态。

    入门指南

    要启用分页,请实例化单独的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>
    高级配置

    当绑定到ListView的项目数大于预期时,pager将控制显示的项目。

    1. 创建一个用于渲染的目标元素,通常将其放置在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="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。

    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())
    });

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

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

  • 相关阅读:
    ReactiveCocoa入门教程——第一部分【转载】
    浅谈iOS中MVVM的架构设计与团队协作【转载】
    如何使用CocoaPods安装使用及配置私有库以及管理依赖库 【原创】
    工作经验【原创】
    xcode常见报错调试【原创】
    彻底解决_OBJC_CLASS_$_某文件名", referenced from:问题(转)
    Android遇到的那些坑
    Android开发和Android Studio使用教程
    CGI是什么 搜索了这么多,大致看明白了保留下来。
    不同手机根据坐标计算控件、图片的像素,px 与 dp, sp换算公式?
  • 原文地址:https://www.cnblogs.com/AABBbaby/p/13947040.html
Copyright © 2020-2023  润新知