KendoUI：点击按钮后将网格数据重置为第一页

Posted 2021-04-05

我有以下场景：

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

现在：我想再次点击“Extract”，重新加载并在第一页上显示数据。我不确定哪种方式最好。

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

我现在使用以下代码：

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

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

答案

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

另一答案

出于某种原因，如果页面设置为1并再次将其设置为1，则会执行读取操作。如果它不是1而你将它设置为1，那么它将只进入该页面而不进行读取。所以要回答你的问题，你可以使用这个代码：

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

另一答案

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

例如：

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

另一答案

使用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);
});

另一答案

为您的Kendo网格DataSource读取操作定义一个parameterMap，它进入transport元素，如下所示。然后调用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;             }}});