Question

我正在使用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');
            }
        }
    });
};

这很好用。但我想为我的网格实现分页。我可以像这样做客户端。这是我的viewmodel代码。

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可观察数组。我怎样才能做到这一点？

提前谢谢。

Answer 1

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

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

例如：

添加分页参数和＆＃34;成功＆＃34;你的加载方法。这将直接来自DataSource上的read方法。

选项：您可以使用observable数组或其内容调用success方法。当我使用可观察数组时，我遇到了内联编辑的异常，并且通过使用可观察数组的内容我发现网格更稳定。

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

KendoUI Grid服务器分页

1 个答案: