javascript - KendoUI 网格服务器分页

Question

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

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');
            }
        }
    });
};

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

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

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

这是我在 HTML 文件中的绑定(bind)(我使用了 Knockout-Kendo.js )。

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

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

提前谢谢你。

Answer 1

无需将 kendoGrid 绑定(bind)到项目，您需要将其绑定(bind)到 kendo.data.DataSource 并指定传输。

引用:http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

例如:

将用于分页和“成功”的参数添加到您的加载方法。这将直接来自数据源上的读取方法。

选项:您可以使用可观察数组或其内容调用成功方法。当我使用 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
});

绑定(bind)到您的数据源。

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

之后，如果您需要以编程方式更改页面，您可以调用数据源上的页面方法:

self.gridDataSource.page(4);