javascript - 数百万行の JavaScript データグリッド

Question

JavaScript を使用して、多数のデータ行 (つまり、数百万行) をグリッドでユーザーに表示する必要があります。

ユーザーは、ページを表示したり、一度に限られた量のデータのみを表示したりしてはなりません。

むしろ、すべてのデータが利用可能であるように見えるはずです。

一度にすべてのデータをダウンロードする代わりに、ユーザーがデータにアクセスすると (つまり、グリッドをスクロールして) 小さなチャンクがダウンロードされます。

行はこのフロントエンドでは編集されないため、読み取り専用のグリッドを使用できます。

この種のシームレスなページングのために、JavaScript で記述されたどのデータグリッドが存在しますか?

score 191 · Accepted Answer

(免責事項: 私は SlickGrid の作成者です)

更新これはSlickGridに実装されました。

SlickGridを多数の行で動作させるための進行中の議論については、 http://github.com/mleibman/SlickGrid/issues#issue/22 を参照してください。

問題は、SlickGrid がスクロールバー自体を仮想化しないことです。スクロール可能な領域の高さは、すべての行の合計の高さに設定されます。ユーザーがスクロールすると、行は引き続き追加および削除されますが、スクロール自体はブラウザーによって行われます。これにより、非常に高速でありながらスムーズになります (onscroll イベントは非常に遅いことで知られています)。警告は、要素の潜在的な高さを制限するブラウザーの CSS エンジンにバグ/制限があることです。IE の場合、0x123456 または 1193046 ピクセルになります。他のブラウザの場合はもっと高くなります。

"largenum-fix" ブランチには実験的な回避策があり、スクロール可能な領域に 1M ピクセルの高さに設定された "ページ" を配置し、それらのページ内の相対位置を使用することで、その制限を大幅に引き上げます。CSS エンジンの高さ制限は実際のレイアウトエンジンとは異なり、大幅に低いように見えるため、上限がはるかに高くなります。

SlickGrid が現在他の実装よりも保持しているパフォーマンスの優位性をあきらめることなく、無制限の数の行を取得する方法をまだ探しています。

リュディガー、これをどのように解決したか詳しく説明してもらえますか?

score 84 · Accepted Answer

https://github.com/mleibman/SlickGrid/wiki

" SlickGrid は仮想レンダリングを利用して、何十万ものアイテムをパフォーマンスを低下させることなく簡単に操作できるようにします。実際、10 行のグリッドと 100,000 行のグリッドで作業する場合、パフォーマンスに違いはありません。 "

いくつかのハイライト:

適応仮想スクロール (数十万行を処理)
非常に高速なレンダリング速度
豊富なセルのバックグラウンドポストレンダリング
構成可能およびカスタマイズ可能
フルキーボードナビゲーション
列のサイズ変更/並べ替え/表示/非表示
列の自動サイズ調整と強制適合
プラグイン可能なセルフォーマッタとエディタ
新しい行の編集と作成のサポート。」ムライブマン

無料です（MITライセンス）。jQueryを使用しています。

score 38 · Accepted Answer

私の意見で最高のグリッドは以下のとおりです。

Flexigrid： http ://flexigrid.info/
jQueryグリッド： http： //www.trirand.com/blog/
jqGridView： http: //plugins.jquery.com/project/jqGridView
jqxGrid： https ://www.jqwidgets.com/
イングリッド： http： //reconstrukt.com/ingrid/
SlickGrid http://github.com/mleibman/SlickGrid

DataTables http://www.datatables.net/index

ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows
Smart.Grid https://www.htmlelements.com/demos/grid/overview/

私のベスト3のオプションは、jqGrid、jqxGrid、DataTablesです。何千もの行を処理し、仮想化をサポートできます。

score 14 · Accepted Answer

何百万行ものデータをユーザーに表示する必要はないということは、かなり確実に言えます。

そのデータセットを理解または管理できるユーザーは世界中にいないため、技術的にデータセットを取得できたとしても、そのユーザーの既知の問題を解決することはできません。

代わりに、ユーザーがデータを見たい理由に焦点を当てます。ユーザーは、データを見るためだけにデータを見たくはありません。通常、質問があります。代わりにそれらの質問に答えることに焦点を合わせるならば、あなたは実際の問題を解決する何かにはるかに近づくでしょう。

score 7 · Accepted Answer

Buffered View 機能を備えた Ext JS Grid をお勧めします。

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

score 7 · Accepted Answer

(免責事項: 私は w2ui の作成者です)

最近、100 万レコードの JavaScript グリッドを実装する方法に関する記事を書きました ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records )。最終的には、それを高くすることを妨げる3つの制限があることを発見しました。

div の高さには制限があります (仮想スクロールで克服できます)
約 100 万レコードを超えると、並べ替えや検索などの操作が遅くなり始める
データは JavaScript 配列に格納されるため、RAM は制限されます

100 万件のレコード (IE を除く) でグリッドをテストしましたが、パフォーマンスは良好です。デモと例については、記事を参照してください。

score 6 · Accepted Answer

dojox.grid.DataGridはデータの JS 抽象化を提供するため、提供された dojo.data ストアを使用してさまざまなバックエンドに接続したり、独自のデータを作成したりできます。この数のレコードに対するランダムアクセスをサポートするものが明らかに必要になります。DataGrid は、完全なアクセシビリティも提供します。

編集して、dojox.grid で何百万ものレコードを表示する、必要な例を提供するMatthew Russell の記事へのリンクをここに示します。古いバージョンのグリッドを使用していることに注意してください。ただし、概念は同じです。互換性のない API の改善がいくつかあるだけです。

ああ、それは完全に無料のオープンソースです。

score 4 · Accepted Answer

以下に、処理を高速化するために適用できる最適化をいくつか示します。大声で考えているだけです。

行数は数百万になる可能性があるため、サーバーからの JSON データ専用のキャッシュシステムが必要になります。X 百万のアイテムをすべてダウンロードしたいと思う人がいるとは想像できませんが、もしそうなら、それは問題になるでしょう。2,000 万以上の整数の配列に対する Chrome でのこの小さなテストは、私のマシンで頻繁にクラッシュします。

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);

LRUまたはその他のキャッシュアルゴリズムを使用して、キャッシュするデータ量に上限を設けることができます。

テーブルセル自体については、DOM ノードの構築/破棄にはコストがかかる可能性があると思います。代わりに、X 個のセルを事前に定義し、ユーザーが新しい位置にスクロールするたびに、JSON データをこれらのセルに挿入することができます。スクロールバーは、データセット全体を表すために必要なスペース (高さ) と実質的に直接的な関係はありません。テーブルコンテナーの高さを 5000px などに任意に設定し、それを行の総数にマップすることができます。たとえば、コンテナーの高さが 5000px で合計 10M 行ある場合、starting row ≈ (scroll.top/5000) * 10Mwherescroll.topはコンテナーの上部からのスクロール距離を表します。ここに小さなデモがあります。

より多くのデータを要求するタイミングを検出するには、理想的には、オブジェクトがスクロールイベントをリッスンするメディエーターとして機能する必要があります。このオブジェクトは、ユーザーのスクロールの速さを追跡し、ユーザーのスクロールが遅くなったり、完全に停止したりすると、対応する行のデータ要求を行います。この方法でデータを取得すると、データが断片化されることになるため、キャッシュはそれを考慮して設計する必要があります。

また、最大発信接続数に対するブラウザーの制限も重要な役割を果たします。ユーザーは、AJAX 要求を開始する特定の位置までスクロールできますが、それが完了する前に、ユーザーは他の部分にスクロールできます。サーバーの応答が不十分な場合、要求はキューに入れられ、アプリケーションは応答していないように見えます。すべてのリクエストがルーティングされるリクエストマネージャーを使用すると、保留中のリクエストをキャンセルしてスペースを作ることができます。

score 4 · Accepted Answer

4

jQuery Grid Pluginを使用しましたが、よかったです。

デモ

于 2010-03-08T16:51:25.670 に答える

score 4 · Accepted Answer

私はそれが古い質問であることを知っていますが、それでも..何百万行も処理できるdhtmlxGridもあります。50,000 行のデモがありますが、グリッドにロード/処理できる行数は無制限です。

免責事項: 私は DHTMLX チームの一員です。

score 3 · Accepted Answer

これを読むことをお勧めします

http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/

score 3 · Accepted Answer

私はちょっと要点を理解できません。jqGridの場合、仮想スクロール機能を使用できます。

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

しかし、繰り返しになりますが、フィルタリングを使用して何百万もの行を実行できます。

http://www.trirand.net/aspnetmvc/grid/performancelinq

「ページがないかのように」という点は本当にわかりません。つまり、ブラウザで一度に1,000,000行を表示する方法はありません。これは10MBのHTML生であり、ちょっとわかりません。ユーザーがページを見たくない理由。

ともかく...

score 3 · Accepted Answer

免責事項：私は長い間頭痛のないYUI DataTableを頻繁に使用しています。パワフルで安定しています。必要に応じて、サポートする ScrollingDataTableを使用できます。

Xスクロール
yスクロール
xyスクロール
強力なイベントメカニズム

必要なものについては、tableScrollEventが必要だと思います。そのAPIは言う

固定スクロールの DataTable にスクロールがある場合に発生します。

各 DataTable は DataSource を使用するため、必要に応じて ScrollingDataTable を設定するために、tableScrollEventとレンダリングループサイズを介してそのデータを監視できます。

レンダーループサイズは言う

DataTable が非常に大きなデータセット全体を表示する必要がある場合、renderLoopSize 構成を使用すると、UI スレッドが非常に大きなテーブルでロックされないようにブラウザー DOM レンダリングを管理できます。0 より大きい値を指定すると、各ループで指定された行数をレンダリングする setTimeout() チェーンで DOM レンダリングが実行されます。厳格な規則はなく、一般的なガイドラインのみがあるため、理想的な値は実装ごとに決定する必要があります。

デフォルトでは renderLoopSize は 0 であるため、すべての行が単一のループでレンダリングされます。renderLoopSize > 0 はオーバーヘッドを追加するため、慎重に使用してください。
データセットが十分に大きく(行数 X 列数 X 書式設定の複雑さ)、ユーザーがビジュアルレンダリングで遅延を経験したり、スクリプトがハングしたりする場合は、 renderLoopSize の設定を検討してください。
50 未満の renderLoopSize はおそらく価値がありません。renderLoopSize > 100 の方が良いでしょう。
何百もの行がない限り、データセットはおそらく十分な大きさとは見なされません。
renderLoopSize > 0 かつ < total rows を持つと、テーブルが 1 つのループでレンダリングされますが (renderLoopSize = 0 と同じ)、別の setTimeout スレッドから処理されるレンダリング後の行ストライピングなどの機能もトリガーされます。

例えば

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

<WHERE_DOES_THE_DATA_COME_FROM> は単一のDataSourceです。JSON、JSFunction、XML、さらには単一の HTML 要素にすることもできます

ここでは、私が提供する簡単なチュートリアルを見ることができます。シングルクリックとデュアルクリックを同時にサポートする DATA_TABLE プラグインは他にないことに注意してください。YUI DataTable で可能になります。さらに、JQuery でも問題なく使用できます。

いくつかの例を見ることができます

リスト項目

YUI DataTable について他に知りたいことがあれば、遠慮なく質問してください。

よろしく、

score 2 · Accepted Answer

私が考えることができる最善のアプローチは、スクロールが終了する前に、すべてのスクロールまたは制限のためにjson形式でデータのチャンクをロードすることです。json は簡単にオブジェクトに変換できるため、目立たないようにテーブルの行を簡単に作成できます

score 1 · Accepted Answer

Openricoを強くお勧めします。最初に実装するのは難しいですが、一度それをつかむと、決して振り返ることはありません。

score 1 · Accepted Answer

この質問は数年前のものですが、jqgrid は仮想スクロールをサポートするようになりました。

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

ただし、ページネーションは無効になっています

score 0 · Accepted Answer

シグマグリッドをお勧めします。シグマグリッドには、数百万行をサポートできるページング機能が組み込まれています。また、それを行うにはリモートページングが必要になる場合があります。デモを参照してくださいhttp://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

javascript - 数百万行の JavaScript データ グリッド

19 に答える 19

Related

Reference

javascript - 数百万行の JavaScript データグリッド