0

我正在使用 KO-grid，它似乎可以很好地加载所有数据。现在，我正在处理分页部分，它似乎无法正常工作。是的，我在底部进行了分页控制，但是当涉及到能够决定页面大小时，它似乎不起作用。根据给出的配置细节，页面大小由两个选项驱动https://github.com/ericmbarnard/KoGrid/wiki/Configuration

1.pageSizes:[5,10, 25] - 似乎显示选项，但是当我将选择从 5 更改为 10 时，它似乎对这些选项起作用。2.pagesize ://somenumber -- 破坏代码。

我在 jsfiddle 上有它的工作模型：http: //jsfiddle.net/sf4p3/46/

有什么建议么？

4

1 回答 1

2

好吧，KoGrid 中的分页似乎并没有像您希望的那样发挥作用。

这是 GitHub 上 KoGrid wiki 示例的链接：

http://ericmbarnard.github.com/KoGrid/examples/Complex-Server-Side-Paging.html

在查看 HTML 页面的源代码时，可能会看到视图模型声明的开头而无需滚动（当然取决于屏幕分辨率）。无论如何，这从第 30 行开始。

pageSize请注意，在视图模型中有一个名为 observable ，它被设置为 50。

向下滚动一点，应该会看到名为filter、sort和的函数，getPagedDataAsync用于过滤数据、对数据进行排序以及为当前页面创建数据集。

这是该getPagedDataAsync函数的代码：

this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) {
    setTimeout(function () {
        var data = window.getExampleData();
        var filteredData = filter(data(), filterInfo);
        var sortedData = sort(filteredData, sortInfo);
        var pagedData = sortedData.slice((page - 1) * pageSize, page * pageSize);
        self.myObsArray(pagedData);
    }, 0);
};

在没有查看视图模型其余部分的详细信息的情况下，通过阅读上面的代码应该可以看出，该函数首先检索要显示此示例页面的所有数据，然后过滤数据并对数据进行排序。

之后，对数据数组进行切片以提取当前页面要查看的数据，并将该切片传递给myObsArray用于在网格中显示数据的 observable 数组。

这是此示例中网格的声明：

<div id="sandBox" class="example" style="height: 600px; max-width: 700px;" 
    data-bind="koGrid: { 
        data: myObsArray,
        columnDefs: [ 
            { field: 'Sku', width: 140 },
            { field: 'Vendor', width: 100 },
            { field: 'SeasonCode', displayName: 'Season Code', width: 150 },
            { field: 'Mfg_Id', displayName: 'Mfg ID', width: 180 },
            { field: 'UPC', width: 170 }
        ],
        autogenerateColumns: false,
        isMultiSelect: false,
        enablePaging: true,
        useExternalFiltering: true,
        useExternalSorting: true,
        filterInfo: filterInfo,
        sortInfo: sortInfo,
        pageSize: pageSize,
        pageSizes: [25, 50, 75],
        currentPage: currentPage,
        totalServerItems: totalServerItems,
        selectedItem: selectedItem }">
</div>

希望这会有所帮助，并且您将能够解决分页问题。

无论如何，如果您有任何问题，请告诉我。

更新

@Californicated 我正在度假，但我有一些空闲时间来看看你最新的小提琴。

我分叉了您在最新小提琴中的内容，并进行了以下更改以使分页正常工作：

在 observables 的声明中，我将值更改pageSize为 2，将值totalServerItems更改为 7。在 JS 中，我更改了函数中datavar 的声明，getPagedDataAsync因此它正在检索 Prizefillfilmentstatusesobservable 数组。

在 JS 代码的最后一行，我将第一个参数从 50 更改为 2。在 jsFiddle 工具栏中，我将第一个下拉列表从“onLoad”更改为“no wrap (body)”

在 HTML 中的 koGrid 声明中，我添加了以下选项/参数：

pageSize: pageSize,
currentPage: currentPage,
totalServerItems: totalServerItems,
selectedItem: selectedItem

页面设置单独处理 JS 更改，但分页工具（上一个、下一个等）直到我添加totalServerItems在 koGrid 声明中添加选项才处于活动状态。

再次，如果您有任何问题，请告诉我。

于 2012-09-21T18:42:55.973 回答