KendoUI Grid 服务器分页

Posted 2023-05-07

【中文标题】KendoUI Grid 服务器分页

【英文标题】：KendoUI Grid server pagination

【发布时间】：2012-07-18 06:50:35

【问题描述】：

我正在使用 KendoUI Grid 在启用了 KnockoutJS MVVM 的应用程序中显示我的数据。由于 MVVM 是客户端的体系结构，我正在维护一个 knockoutjs 可观察数组并将数据从服务器加载到该数组。

self.loadForGrid = function() 
    $.ajax(
        url: "api/matchingservicewebapi/GetAllMatchItemForClient/1",
        type: 'GET',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) 
            console.log(data);
            $.each(data, function (i, obj) 
                self.users.push(self.items.push( BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id ));

            );
            window.alert('User(s) loaded successfully');
        ,
        statusCode: 
            401: function (jqXHR, textStatus, errorThrown) 
                alert('Error loading users2');
            
        
    );
;

这很好用。但我想为我的网格实现分页。我可以像这样在客户端做到这一点。这是我的视图模型代码。

self.items = ko.observableArray([]);

ko.bindingHandlers.kendoGrid.options = 
    groupable: true,
    scrollable: true,
    sortable: true,
    pageable: 
        pageSizes: [5, 10, 15]
    
;

这是我在 html 文件中的绑定（我使用了 Knockout-Kendo.js）。

<div data-bind="kendoGrid: items"> </div>

但我想要的是启用服务器分页。这意味着当我转到下一页（当我转到第 2 页时）时，我希望将数据（比如说第 2 页的数据）再次加载到我的 knockoutjs 可观察数组中。我怎样才能做到这一点？

提前谢谢你。

【参考方案1】：

您需要将其绑定到 kendo.data.DataSource 并指定传输，而不是将 kendoGrid 绑定到项目。

参考：http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

例如：

为您的加载方法添加分页和“成功”参数。这将直接来自 DataSource 上的 read 方法。

选项：您可以使用可观察数组或其内容调用成功方法。我在使用 observable 数组时遇到了内联编辑的异常，我发现使用 observable 数组的内容后网格更加稳定。

self.loadForGrid = function(pageIndex, success) 
    /* Consider adding an argument for page size to the api call. */
    $.ajax(
        url: "api/matchingservicewebapi/GetAllMatchItemForClient/" + pageIndex,
        type: 'GET',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) 
            console.log(data);
            $.each(data, function (i, obj) 
                self.users.push(self.items.push( BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id ));

            );

            /* Invoke the dataSource.read success method. */
            success(self.items());

            window.alert('User(s) loaded successfully');
        ,
        statusCode: 
            401: function (jqXHR, textStatus, errorThrown) 
                alert('Error loading users2');
            
        
    );
;

创建您的数据源，本质上是您读取的包装器。

self.gridDataSource = new kendo.data.DataSource(
    transport: 
        read: function(options)  self.loadForGrid(options.data.page, options.success); 
    ,
    pageSize: 20,  // options.data.pageSize
    page: 1, // options.data.page
    serverPaging: true
);

绑定到您的数据源。

<div data-bind="kendoGrid: gridDataSource"> </div>

之后，如果需要以编程方式更改页面，可以调用 dataSource 上的 page 方法：

self.gridDataSource.page(4);