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

时间:2012-11-22 08:52:04

标签: kendo-ui kendo-grid

我有以下情况:

在我的页面中,我有一个以数据源为界的网格(带分页)。当我点击“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);
});

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

5 个答案:

答案 0 :(得分:17)

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

答案 1 :(得分:17)

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

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

答案 2 :(得分:2)

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

例如:

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

答案 3 :(得分:2)

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

答案 4 :(得分:0)

为您的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;             }}});