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