javascript - 在 Kendo UI 中将网格 pageSize 设置为变量

Question

使用 Kendo UI 网格构建列表。尝试设置 kendo.data.DataSource 对象的 pageSize 参数。

我最初可以将 pageSize 设置为一个变量(例如 varPageSize = 20)。我可以通过单击按钮来增加 varPageSize 变量(例如 varPageSize += 10)。但是，网格的 pageSize 没有更新。

变量赋值:

var varPageSize = 20;

网格部分代码:

dataSource = new kendo.data.DataSource({
     pageSize: varPageSize,
     ...
});

点击事件处理代码

$('#moreButton').on('click', function () {
      varPageSize += 10;

      //print to the console to monitor the value of the varPageSize variable
      console.log(varPageSize);
});

我的问题是我应该如何实现对 pageSize 参数的变量赋值，以便它可以响应前端事件进行更新。

我最初的想法是我在更新变量值后不更新网格。来自 Telerik 的 Kendo UI 论坛帖子说使用 grid.refresh(); - 但网格对象无法识别 .refresh()。我还寻找了关于该主题的其他问题，但我很难确定将哪个问题转化为我的解决方案 - 每个现有帖子都是我未使用的变体(例如 .pageSize();)

对正确方向的任何见解或插入表示赞赏。

谢谢!

Answer 1

当您设置 pageSize: varPageSize 时，您在执行时分配了 varPageSize 的不可变值。您没有分配对 varPageSize 的引用。因此，当您更改 varPageSize 时，pageSize 不会更新(这是 JavaScript 的工作方式，并非特定于 Kendo UI)。

为了做你想做的事，你需要在更改后调用dataSource.pageSize(varPageSize)，然后调用grid.refresh()来应用这个更改到网格。

参见 this fiddle举个例子。