数百万行の JavaScript データ グリッド [終了]

StackOverflow https://stackoverflow.com/questions/2402953

質問

大量のデータ行を表示する必要があります。JavaScript を使用してグリッド内のユーザーに数百万行) を提供します。

ユーザーはページを表示したり、一度に限られた量のデータのみを表示したりするべきではありません。

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

データを一度にすべてダウンロードするのではなく、ユーザーがアクセスするたびに小さなチャンクがダウンロードされます。グリッドをスクロールして)。

行はこのフロントエンドを通じて編集されないため、読み取り専用グリッドが受け入れられます。

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

役に立ちましたか？

解決

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

アップデートこれは現在、 スリックグリッド.

参照してください http://github.com/mleibman/SlickGrid/issues#issue/22 SlickGrid をより多くの行で動作させることに関する進行中のディスカッションのため。

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

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

私は、SlickGrid が現在他の実装に対して保持しているパフォーマンスの優位性を放棄することなく、行数を無制限にする方法をまだ探しています。

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

他のヒント

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

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

いくつかのハイライト:

  • 適応型仮想スクロール (数十万行を処理)
  • 非常に速いレンダリング速度
  • よりリッチなセルのための背景ポストレンダリング
  • 構成可能かつカスタマイズ可能
  • フルキーボードナビゲーション
  • 列のサイズ変更/並べ替え/表示/非表示
  • カラムの自動サイズ調整とフォースフィット
  • プラグイン可能なセル フォーマッタとエディタ
  • 新しい行の編集と作成のサポート。" による ムリブマン

無料です (MIT ライセンス)。jQueryを使用します。

私の考える最高のグリッドは以下のとおりです。

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

私は炎の戦争を開始することを意味するものではありませんが、あなたの研究者がヒトのものであると仮定すると、あなたにもあなたが考えるようにそれらを知りません。彼らはデータののHAVE のペタバイトを理由だけで意味のある方法で、レコードの百万もの視聴それらができることはありません。彼らは、のレコードの数百万人を見てみたいが、それはただ愚かだ、彼らはを言うかもしれません。あなたの賢い研究者はいくつかの基本的な計算を行うあります：彼らは、各レコードを表示して1秒を過ごすと仮定します。そのレートでは、それが（食べ物やトイレのために、ブレークのない40時間勤務週の）以上の6週間に出て働く、1000000秒かかります。

彼ら（またはあなたが）真剣に1人（1つのグリッドを見ているが）濃度のようなものを集めることができると思いますか？彼らは本当に多く、1秒で行われ、またはそれらの（可能性が高い）です取得しているものをフィルタリングするははしたくないですか？私は、「合理的なサイズ」のサブセットを表示した後、彼らは自動的にそれらのレコードを除外するだろうあなたにフィルタを記述することができると思われます。

paxdiabloとスリーパー・スミスとラッセV Karlsenのも示唆されるように

、あなた（と彼らは）要件を通じて考えていません。アップ側では、あなたがSlickGridを見つけた今ことを、私はそれらのフィルタの必要性はすぐに明らかになったと確信しています。

私は、あなたが真剣にユーザーに数百万行のデータを表示する必要はありませんかなり良い確信を持って言うことができます。

のデータは、あなたが技術的にそれをやってのけるために管理していてもそう設定し、あなたがそのユーザーのための任意の既知の問題を解決しないであろうことを理解したり管理できるようになり、世界のユーザー決してありません。

その代わり、私はの理由のユーザーがデータを見たいに焦点を当てます。ユーザーは、単にデータを見るために、データを見たいと思っていない、頼まれて質問が通常あります。あなたの代わりにそれらの質問に答えるに焦点を当てる場合は、実際の問題を解決し、何かに非常に近いだろう。

私は、バッファView機能でのExt JSグリッドをお勧めします。

http://www.extjs.com/deploy/dev/例/グリッド/ buffer.htmlする

dojox.grid.DataGrid のあなたにそれをフックすることができますので、データのためのJSの抽象化を提供しています様々なバックエンド提供dojo.dataの店を持つか、または独自の書き込み。あなたは明らかにこの多くのレコードのためのランダムアクセスをサポートするものが必要になります。データグリッドは、フルアクセスを提供しています。

編集はので、ここでそののマシュー・ラッセルの記事へのリンクですdojox.gridで数百万レコードを表示して、あなたが必要な例を提供する必要があります。それは、グリッドの古いバージョンを使用していますが、概念は同じですが、ちょうどいくつかの互換性のないAPIの改善があったことに注意してください。

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

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

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

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

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

私は jQueryのグリッドのプラグインを使用し、それはよかった。

デモする

ここではあなたが物事をスピードアップ適用することができます最適化のカップルです。ただ、大声で考えています。

行の数は数百万人にすることができますので、

、あなただけのサーバからJSONデータのキャッシュシステムをお勧めします。私は誰もが、すべてのX百万アイテムをダウンロードしたいと想像することはできませんが、彼らがした場合、それが問題になることでしょう。この少しテストには、常に私のマシン上でクラッシュします。

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

あなたは LRUするまたはいくつかの他のキャッシュアルゴリズムを使用すると、上部に結合した可能性がありどのくらいのデータを使用すると、キャッシュに喜んでます。

テーブル細胞自身のために、私はDOMノードを破壊する/構築することは高価なことができると思います。代わりに、あなただけのこれらの細胞にJSONデータを注入し、新しい位置にX細胞の数、およびいつでもユーザーがスクロールを事前に定義することができます。スクロールバーは、事実上、データセット全体を表現するために必要なスペース（高さ）とは直接の関係を持たないだろう。あなたは、任意に、テーブルコンテナの高さを設定5000pxを言うと、行の合計数にそれをマップすることができます。例えば、容器の高さが5000pxであれば10M行starting row ≈ (scroll.top/5000) * 10Mは、容器の上部からスクロール距離を表し、次いでscroll.topの合計があります。 ここの小さなデモます。

より多くのデータを要求するときを検出するために、理想的にオブジェクトがイベントをスクロールするリッスンメディエーターとして行動しなければなりません。このオブジェクトは、ユーザーがスクロールしているどのくらいの速を追跡し、ユーザーが鈍化しているか、完全に停止しているように見えたときに、対応する行のデータ要求を行います。この方法でデータを取得すると、データが断片化されたことになるだろうので、キャッシュはこのことを念頭に置いて設計されるべきであることを意味ます。

また、最大送信接続のブラウザの制限は重要な部分を再生することができます。ユーザは、AJAXリクエストを起動します特定の位置にスクロールすることができるが、それが終了する前に、ユーザは、いくつかの他の部分にスクロールすることができます。サーバが応答しない場合には、十分な要求はキューに入れになるだろうとアプリケーションが応答しなくなります。あなたはすべての要求を送信する際に経由するリクエスト・マネージャーを使用することができ、それがスペースを作るために保留中の要求を取り消すことができます。

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

免責事項：私はDHTMLXチームから来たんだ。

。

私はあなたがこれを読むことをお勧め

<のhref = "http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/" のrel = "nofollowをnoreferrer 「> http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/ の

免責事項:私 重く 使用 YUI データテーブル 長時間頭痛が起こらずに. 。パワフルで安定しています。ニーズに応じて、 スクロールデータテーブル サポートします

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

あなたが必要とするものは、あなたが欲しいと思うのは、 テーブルスクロールイベント. 。そのAPIは次のように述べています

固定スクロール DataTable にスクロールがあるときに発生します。

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

レンダリング ループ サイズは次のようになります

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

  • デフォルトでは renderLoopSize は 0 であるため、すべての行が 1 つのループでレンダリングされます。renderLoopSize > 0 ではオーバーヘッドが増加するため、慎重に使用してください。
  • データセットが十分に大きい場合 (行数 X 列数 X 書式設定の複雑さ) ユーザーが視覚的なレンダリングで遅延を経験したり、スクリプトがハングしたりする、 renderLoopSize の設定を検討してください.
  • renderLoopSize が 50 未満の場合は、おそらく価値がありません。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> は 1 つのみです 情報元. 。JSON、JSFunction、XML、さらには単一の HTML 要素も可能です

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

いくつかの例を見てみましょう

YUI DataTable について他にご不明な点がございましたら、お気軽にご質問ください。

よろしく、

私は一種のjqGridのためにあなたが仮想スクロール機能を使用することができ、ポイントを参照してくださいに失敗します

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

しかし、その後、再び、フィルタリングと数百万行を行うことができます：

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

これは、生のHTMLの10MBです、I種類の -

私は本当に「ページがないかのように」しかし、私は意味...ブラウザで一度に1,000,000行を表示する方法はありません点を見ることができませんユーザーがページを参照してくださいしたいとは思わないでしょう理由を確認するために失敗します。

とにかく...

私は考えることができる最高のアプローチは、すべてのスクロールやスクロールが終了する前に、いくつかの制限のためにJSON形式のデータのチャンクをロードすることです。 JSONは、容易にオブジェクトに変換することができ、従って、テーブルの行は、目立たないように容易に構成することができる

私は非常の オープンリコのをお勧めします。 最初に実装するのは難しいですが、あなたはそれをつかむたら、あなたは振り返ることは決してありません。

私はこの質問は数歳ですけど、今仮想スクロールをjqgridサポートしています：

http://www.trirand.com/blog/ phpjqgrid /例/ページング/スクロール/ default.phpする

が、ページネーションを無効に

私はシグマグリッドを提案し、シグマグリッドは、数百万行をサポートできるページング機能を埋め込みました。そしてまた、あなたはそれを行うには、リモート・ページングが必要な場合があります。 デモを見ます http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details。 HTML の

dGridを見てみます：

https://dgrid.io/する

私は、ユーザーが、EVERすべてを一度に数百万行のデータを表示する必要がないことを同意するが、dGridはすぐに（一度に画面分）にそれらを表示することができます。

お茶を作るために海を沸騰させないでください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top