kendo-ui - KendoUI：单击按钮后将网格数据重置为第一页

Question

我有以下情况：

在我的页面中，我有一个绑定到数据源的网格（带有分页）。当我单击“提取”按钮时，网格会被填充（通过 Web 服务读取分页数据）。然后我通过网格分页选择“第 2 页”。再次调用 Web 服务以返回数据。

现在：我想再次单击“提取”，以重新加载并在第一页上显示数据。我不确定哪个是最好的方法。

我想只调用一次服务（使用输入参数）并重置网格中的分页索引。

我现在正在使用以下代码：

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");
    grid.dataSource.read( {parameter: "value"} );
    grid.dataSource.page(1);
});

但它实际上对服务进行了两次调用。

Answer 1

如果您正在执行服务器端分页，这应该足够了，grid.dataSource.page(1)因为这将read完全按照您已经意识到的那样调用。

Answer 2

出于某种原因，如果页面设置为 1 并且您再次将其设置为 1，它将执行读取。如果它不是 1 并且您将其设置为 1，它只会转到该页面而不进行读取。因此，要回答您的问题，您可以使用以下代码：

if (grid.dataSource.page() != 1) {
   grid.dataSource.page(1);
}
grid.dataSource.read( {parameter: "value"} );

Answer 3

要仅执行单个请求，您应该使用 dataSource 的查询方法。它允许您创建过滤器/页面/排序等不同方法的组合。

例如：

dataSource.query({ page: 5, pageSize: 20, sort: { field: "orderId", dir: "asc" } });

Answer 4

使用 DataSource.query() 方法传递页码和您的自定义输入参数：

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");
    grid.dataSource.query( { page: 1, parameter: "value"} );
});

如果您使用服务器端分页和排序，那么您可能还需要包含该信息：

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");

    var queryParams = {
        page: 1,
        pageSize: grid.dataSource.pageSize(),
        sort: grid.dataSource.sort(),
        group: grid.dataSource.group(),
        filter: grid.dataSource.filter(),
        parameter: "value"
    };

    grid.dataSource.query(queryParams);
});

Answer 5

为您的 Kendo 网格 DataSource 读取操作定义一个 parameterMap，这将进入传输元素，如下所示。然后调用 grid.dataSource.page(1)，这将调用 read 并且你应该被排序。

   new kendo.data.DataSource({      
transport: {
                   read: {
                          // ur read
                          },
           parameterMap: function (o, operation) {
                         var output = null;
                         switch (operation) {
                                    case "create":
                                    break;
                                case "read":
                                    output =  {parameter: "value"};
                                    break;
                                case "update":
                                    break;
                                case "destroy":
                                    break;
                        }
                     return output;             }}});