如何根据屏幕大小更改 kendo mvc grid PageSize？答案

【问题标题】：How to change kendo mvc grid PageSize according to screen size?如何根据屏幕大小更改 kendo mvc grid PageSize？
【发布时间】：2020-04-19 08:38:47
【问题描述】：

我想知道，你们有动态改变PageSize的解决方案吗？

如果我扩展我的问题，我想以 10 个元素默认显示我的网格，但是当我想在大屏幕上显示它时，我想以 20 或 30 个元素显示？

有解决办法吗？

【问题讨论】：

标签： c# asp.net-mvc kendo-ui kendo-asp.net-mvc

【解决方案1】：

有两种情况，pageSize 的初始集（按窗口高度）和窗口调整大小集pageSize。

页面加载时，获取窗口大小并根据高度设置pageSize：

var pageSize = 10;
var windowHeight = $(window).height();

console.log(windowHeight)

switch(true) {
  case windowHeight < 500:
    pageSize = 5;
    break;
  case windowHeight < 600:
    pageSize = 10;
    break;
  case windowHeight < 700:
    pageSize = 15;
    break;
} 

$("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: {
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Water", category: "Beverages" },
        { productName: "Juice", category: "Beverages" },
        { productName: "Decaffeinated Coffee", category: "Beverages" },
        { productName: "Iced Tea", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" },
        { productName: "Eggs", category: "Food" },
        { productName: "Bacon", category: "Food" },
        { productName: "Chips", category: "Food" },
        { productName: "Fish", category: "Food" }
      ],
      pageSize: pageSize
    },
    pageable: {
      pageSizes: true
    }
  });

如果您手动调整窗口大小，则跟踪调整大小事件并更改网格页面大小：

  $(window).resize(function() {
    var windowHeight = $(window).height();

    console.log(windowHeight)

    switch(windowHeight) {
      case 440:
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.pageSize(5);
        grid.refresh();
        break;
      case 590:
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.pageSize(10);
        grid.refresh();
        break;
      case 700:
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.pageSize(15);
        grid.refresh();
        break;
      }
  });

示例：Page size by height

注意：我不是 C# 或 asp.net 或 kendo for asp 的用户，所以我不完全确定这是否适用于您的情况。此外，这是一个强大的示例，您需要根据您的情况对其进行调整

【讨论】：