仮想スクロールの検索実装

Question

私はこの質問のためのコードを作成する必要はありません。 私はangularjsを扱い、特定のデータグリッドを作成したいと思います。 このデータグリッドは、大量のデータ（100万以上）を表示できます。だから私はバンドルでデータを取得します。 私の問題は、ページセレクタや無限のスクロールをしたくないということですが、仮想スクロールが必要です。単純な解決策は、スクロールバーの高さを計算することです。行の高さで掛ける行の合計に依存します。しかし、最近私は新しい課題があります。行の高さはデータに依存し、スクロールの高さを計算するための "標準"行の高さを定義することはできません。

私はインターネットで検索しますが、問題はページセレクタでのみ解決されるようです。だから、この目標を達成するためのアイデアはありますか？または私の反省に基づいて任意の参照、実装？

ご協力いただきありがとうございます。私の質問がはっきりしていることを願っています。

PS：いいですか？あなたは、標準の行の高さを定義する必要はありません

Answer 1

私はag-gridについてはわかりませんが、剣道のグリッドはあなたの目的に役立ちます。 http://demos.telerik.com/kendo-ui/grid/virtualization-local-data

遠隔データ - - http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data 以下は剣道

ローカルデータに仮想スクロールを使用して、より多くのデータをロードするためのリンクです。

HTMLツリーグリッドも良い、チェックアウトthis http://htmltreegrid.com/Home/Demo パフォーマンスはどちらも似ているようです。 HTMLツリーグリッドには、異なる目的のグリッドもあります。しかし、このグリッドをさらにカスタマイズすると、パフォーマンスが低下する

Answer 2

...あなたは、動的に行の高さを測定することができます。..

HTMLのTABLE：

<input type="button" onclick="rowHeights();" value="Row Heights"> 
    <table id="rowHeight" border="1"> 
     <tr> 
      <td> 
       Column One<br /> 
       Big Column 
      </td> 

      <td> 
       Column Two 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Second row column 1 
      </td> 
     </tr> 
    </table> 

はJavaScript：

function rowHeights() { 
     var tbl = document.getElementById('rowHeight').rows; 
     alert("First Row Height: " + tbl[0].offsetHeight); 
     alert("Second Row Height: " + tbl[1].offsetHeight); 
     //all row height 
     var allrowHeight = 0; 
     for (var i = 0; i < tbl.length; i++) { 
      allrowHeight += tbl[i].offsetHeight; 
     } 
     alert("Total Row Height: " + allrowHeight); 
    } 

私は願っていますこれはあなたを助けるでしょう。 JsFiddle：https://jsfiddle.net/x1Luxb5a/

Answer 3

Silvinusは、この概念に見てみましょう：

仮想ページング/無限スクロール

仮想ページングは​​何に応じて、サーバー から遅延ロード行にグリッドを可能にスクロール位置はグリッドの位置です。

グリッドが開始時の合計ページ数を知っている場合、 がサーバーからロードされていなくても、スクロール はデータセット全体と一致するサイズになります。

グリッドが開始時にいくつのページを認識しない場合、スクロールは最後の行に達するまで に自動的に拡張されます。この機能は、無限スクロールとして他のグリッドで知られている です。

注：ページネーションと仮想ページングは​​、同じ問題の異なる解決策です。両方を同時に適用することはできません。

例： https://www.ag-grid.com/angular-grid-virtual-paging/virtualPaging.html

参考： https://www.ag-grid.com/angular-grid-virtual-paging/

Answer 4

あなたは約それを計算する必要があります。レコードの保存中に行の高さが類似しているか、バックエンドにあるかを推定し、レコードの保存中に行の高さを概算し、データベースに保存します（たとえば、テキストの長さに基づいて）。そして、データを読み込むと、すべての高さを合計してサーバーから取得できます。