在剑道UI网格中的PageSizes

Question

当我们设置pageSizes : true时，每页的项目始终会显示5,10,20等选项。

我想根据网格中显示的行数动态显示它。使用[5,10,15,20]等自定义设置将更改选项5,10,15,20，但我想动态使用它。

例如：如果总行数为50，则itemsper页面中的选项应为10,20,30,40,50。进行过滤后，行数可能会更改为20，然后相应的项目数 页面应更改为5,10,15,20。

是否可以在Kendo UI网格中执行此操作？

Answer 1

是您可以在进行过滤后动态更改PageSize

首先，您需要捕获过滤器事件并更改该事件中的网格页面大小。

修改

查看以下脚本

<input id="ddPageSize" />
<div id="grid"/>
<script>
        var data_10plus = [
                    { text: "10", value: "10" },
                    { text: "20", value: "20" },
                    { text: "30", value: "30" },
                    { text: "40", value: "40" },
                    { text: "50", value: "50" }
                ];
        var data_5plus = [
                    { text: "5", value: "5" },
                    { text: "10", value: "10" },
                    { text: "15", value: "15" },
                    { text: "20", value: "20" }
                ];
 $(document).ready(function () {

    var grid = $("#grid").kendoGrid({  //your grid
     ..
     ..
    }).data("kendoGrid");

    $("#ddPageSize").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data_10plus,
                index: 0,
                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value()));
                }
     });

    grid.dataSource.originalFilter = grid.dataSource.filter;

    grid.dataSource.filter = function () {   // Replace the original filter function. 
      var result = grid.dataSource.originalFilter.apply(this, arguments);
      if (arguments.length > 0) {
         this.trigger("afterfilter", arguments);
      }
      return result;
     }

    grid.dataSource.bind('afterfilter', function (e) {   
      var count = $("#grid").data("kendoGrid").dataSource.total();
      if (count < 20){
         $("#grid").data("kendoGrid").dataSource.pageSize(parseInt("5"));
         $("#ddPageSize").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data_5plus,
                index: 0,
                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value()));
                }
            });
       }
      else{
         $("#grid").data("kendoGrid").dataSource.pageSize(parseInt("10"));
         $("#ddPageSize").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data_10plus,
                index: 0,
                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value()));
                }
            });
      }
     });

 });
 </script>

我希望这可以帮到你

Answer 2

 pageable: {
           refresh: true,
           pageSizes: true,
           buttonCount: 5
           }

将此内容添加到您的 kendo网格ajax代码中。 该代码为您提供了一个选项，可以自动设置要显示的记录数量和分页次数。