如何在 Kendo UI Grid 中为不同的页面设置不同的页面大小

Posted 2023-05-07

【中文标题】如何在 Kendo UI Grid 中为不同的页面设置不同的页面大小

【英文标题】：How to set different page size to different pages In Kendo UI Grid

【发布时间】：2016-07-23 14:29:11

【问题描述】：

您好，我对 Kendo UI Grid 分页有一个要求。

如何展示

第一页中的 X 项/行 第二页 X+1 项/行 第 3 页中的 X-1 项/行

我尝试了下面的代码但没有成功，由于最新的查询选择，它将每页显示 2 个项目。

$("div[kendo-grid]").data().kendoGrid.dataSource.query( pageSize: 3, page: 1 ); $("div[kendo-grid]").data().kendoGrid.dataSource.query( pageSize: 4, page: 2 ); $("div[kendo-grid]").data().kendoGrid.dataSource.query( pageSize: 2, page: 3 );

【问题讨论】：

您是否尝试为您的网格提供不同的 id 以进行 jQuery 选择？否则你只是改变所有的网格

您好，我的文档中只有一个网格。

对不起，我误会了这个问题，我认为这有点开箱即用。

【参考方案1】：

您应该使用 dataBound 事件来捕捉页面变化。

var page = $("#grid").data("kendoGrid").dataSource.page();

会给你当前页面。

要更改页面大小，您可以使用以下内容：

if (page == 2)
       var grid = $("#grid").data("kendoGrid");
       grid.dataSource.pageSize(5);
       grid.refresh();

【讨论】：

这与 $("div[kendo-grid]").data().kendoGrid.dataSource.query( pageSize: 2, page: 3 );

相同

我正在寻找解决方案，如何在运行时/动态的不同页面上设置不同的 pageSize。为什么我需要这个？当有更多行然后网格高度时，我不应该显示网格滚动条。例如，我的网格高度为 400 像素，4 行/项目高度为 401 像素，那么我应该将第 4 行移动到第 2 页。这种逻辑应该适用于每个页面。

不一样，因为它使用了每次页面更改时触发的 dataBound 事件。您只需要将条件更改为 if (yourGridHeight