ag-grid-community：サーバーサイドページネーションの無限行モデル、コミュニティ無料バージョンagGrid-サーバーサイドページネーションのように機能しない
私はこれを理解して実装するのに十分な時間を費やしましたが、ドキュメントがあまり明確に書かれていないか、いくつかの基本的なことを理解していないようです。
ag-grid-community 22.1.1を使用すると、多くのバックエンドコードを変更できないため、バックエンドでの変更の提案は機能しません。彼らが説明したように、私が見ることができる最良のオプションは無限行モデルです。ag-gridの公式ドキュメント
上の図のように、バックエンドAPIが遅く、データを返すのが遅い場合、制御外の外部APIを呼び出すと、応答が遅くなるため、あまり役に立ちません。
- グリッドは、200秒で500レコードを返すバックエンドAPIを呼び出します。
- ユーザーは、画面にデータが表示されるまで3分以上待つ必要があります。
- 実装後に
cacheBlockSize50の場合、サーバーに50レコードを送信するように依頼すると、グリッド上のデータを確認するための応答が速くなり、次にクリックすると次の50がフェッチされ、各ブロックの時間が長くなると考えた無限行モデルに基づいています。 20秒になります。 - しかし、そのようには機能していません。バックエンドのhttp呼び出しは、すべてのレコードが返されるのを待ってから、グリッドのレンダリングを開始して結果を表示するだけなので、データを表示するには200秒待つ必要があります。では、この無限スクロールをサーバー側と呼ぶ意味は何ですか？
- また、Chrome開発ツールでカーソルが最初に0から50まで移動し、次に50から100まで移動するのを見ることができたので、私の実装は正しいです。
回答
多くのバックエンドコードを変更することはできないと書いたので、このようなことができるかどうかはわかりませんが、少なくともでdatasourceオブジェクトを定義する必要がありますgetRows()。このコールバックは、グリッドがサーバーから新しい行をフェッチしようとするたびに呼び出され、ここに表示されているパラメーターを受け取ります。
このコールバックが発生したらPromise、params.startRowパラメータを使用してデータを取得する関数を呼び出す必要があります。params.endRowまたは、またはのいずれかを呼び出す必要がありますcacheBlockSize。
フェッチが成功した場合は、を呼び出しますsuccessCallback(rowsRetrievedOnThisFetch, lastRow)。ここで、lastRowはすべてのデータがグリッド内にある場合のデータの最後の行のインデックスです。すべてのデータはまだグリッド内ではない場合、セットはlastRow等しいundefined、nullまたは-1。
後で、500行すべてがロードされたら、を設定lastRow = 500して呼び出すことができますsuccessCallback(rowsRetrievedOnThisFetch, 500)。
これは、一度にすべてではなくブロックでデータをフェッチできる場合に機能します。フェッチ関数を呼び出すたびに、データベースからフェッチする行の範囲を指定する必要があります。ただし、APIがこれをサポートしている場合にのみそれを行うことができます。
また、無限行モデルを使用する場合、グリッドはそれ自体で行をフィルタリングまたはソートしません。サーバー側のフィルタリングと並べ替えを使用する場合は、起動時にクエリでparams.filterModelとをparams.sortModelそれぞれ渡す必要がありますgetRows()。
更新
この例を見てください： https://plnkr.co/edit/pqBAS1cnjKiBoqeQ。500行を50のバッチでロードします。下にスクロールするたびに、500行すべてがグリッドに入るまで次の50行がロードされます。