0

KO-gridを使用していますが、すべてのデータが正常に読み込まれているようです。現在、ページネーションの部分に取り組んでいますが、正しく機能していないようです。はい、下部のページネーションコントロールを行っていますが、ページサイズを決定できるようになると、うまくいかないようです。ページサイズは、に記載されている構成の詳細に応じて2つのオプションによって決まります。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のKoGridwikiの例へのリンクは次のとおりです。

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

HTMLページのソースを表示すると、スクロールしなくてもビューモデル宣言の先頭が表示される可能性があります（もちろん、画面の解像度によって異なります）。とにかく、これは30行目あたりから始まります。

pageSizeビューモデルに名前付きのオブザーバブルがあり、50に設定されていることに注意してください。

少し下にスクロールすると、、、という名前の関数が表示され、filterデータのフィルタリング、データの並べ替え、現在のページのデータセットの作成が行われます。sortgetPagedDataAsync

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グリッドにデータを表示するために使用される監視可能な配列に渡されます。

この例でのグリッドの宣言は次のとおりです。

<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私は休暇中ですが、あなたの最新のフィドルを覗くためにダウンタイムがありました。

最新のフィドルにあるものをフォークし、ページングを機能させるために次の変更を加えました。

オブザーバブルの宣言では、値pageSizeを2に、値を7に変更しました。JSでは、関数 のvar totalServerItemsの宣言を変更して、オブザーバブル配列を取得しました。datagetPagedDataAsyncPrizefillfilmentstatuses

JSコードの最後の行で、最初のパラメーターを50から2に変更しました。jsFiddleツールバーで、最初のドロップダウンを「onLoad」から「nowrap（body）」に変更しました。

HTMLでのkoGridの宣言で、次のオプション/パラメーターを追加しました。

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

totalServerItemsページ設定はJSの変更のみで機能していましたが、koGrid宣言にオプションを追加するまで、ページングツール（前、次など）はアクティブではありませんでした。

繰り返しになりますが、ご不明な点がございましたらお知らせください。

于 2012-09-21T18:42:55.973 に答える