Kendo UI：单击按钮后将网格数据重置为第一页

Posted 2023-05-07

【中文标题】Kendo UI：单击按钮后将网格数据重置为第一页

【英文标题】：KendoUI: resetting grid data to first page after button click

【发布时间】：2012-11-10 14:58:58

【问题描述】：

我有以下场景：

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

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

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

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

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

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

【参考方案1】：

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

【讨论】：

谢谢，但如果我也想通过 te 请求发送参数？

您可以通过创建新的数据源 URL 将参数添加到 $grid.data("kendoGrid").dataSource.transport.options.read.url 属性。

【参考方案2】：

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

if (grid.dataSource.page() != 1) 
   grid.dataSource.page(1);

grid.dataSource.read( parameter: "value" );

【讨论】：

这个答案对我有用，而标记为解决方案的评论没有。

将grid.dataSource.read(parameter:"value"); 放入else 块中，以防止在页面不是1 时对您的服务器造成双重打击。

没有。如果不是第 1 页，则必须将其设置为第 1 页。这不会对服务器造成影响。只有当它为 1 时将其设置为 1 时，它才会到达服务器。如果您不先转到第 1 页，那么您最终可能会进入一个空白页面。

【参考方案3】：

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

例如：

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

【参考方案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);
);

【参考方案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;             );

【讨论】：

这是否意味着我必须在代码中全局可访问的外部对象中定义输入参数对象（我的意思是'parameter: "value"'）？我使用“read()”只是因为我可以更新 parameterMap 中的输入，只需将数据发送到其中。