KendoUI Grid 服务器分页答案

【问题标题】：KendoUI Grid server paginationKendoUI Grid 服务器分页
【发布时间】：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 可观察数组中。我怎样才能做到这一点？

提前谢谢你。

【问题讨论】：

标签： javascript grid knockout.js kendo-ui

【解决方案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);

【讨论】：