JavaScript-Datenraster für Millionen von Zeilen [geschlossen]

Ich muss dem Benutzer eine große Anzahl von Datenzeilen (dh Millionen von Zeilen) in einem Raster mithilfe von JavaScript präsentieren.

Der Benutzer sollte nicht Seiten sehen oder nur begrenzte Datenmengen gleichzeitig anzeigen.

Vielmehr sollte es so aussehen, als ob alle Daten verfügbar sind.

Anstatt die Daten auf einmal herunterzuladen, werden kleine Blöcke heruntergeladen, sobald der Benutzer zu ihnen kommt (dh durch Scrollen durch das Raster).

Die Zeilen werden nicht über dieses Frontend bearbeitet, daher sind schreibgeschützte Raster zulässig.

Welche in JavaScript geschriebenen Datenraster gibt es für diese Art von nahtlosem Paging?

( Haftungsausschluss: Ich bin der Autor von SlickGrid )

UPDATE Dies wurde jetzt in SlickGrid implementiert .

Unter http://github.com/mleibman/SlickGrid/issues#issue/22 finden Sie eine fortlaufende Diskussion darüber, wie SlickGrid mit einer größeren Anzahl von Zeilen funktioniert.

Das Problem ist, dass SlickGrid die Bildlaufleiste selbst nicht virtualisiert - die Höhe des scrollbaren Bereichs wird auf die Gesamthöhe aller Zeilen festgelegt. Die Zeilen werden weiterhin hinzugefügt und entfernt, während der Benutzer einen Bildlauf durchführt, der Bildlauf selbst wird jedoch vom Browser ausgeführt. Dies ermöglicht es, sehr schnell und dennoch reibungslos zu sein (Onscroll-Ereignisse sind notorisch langsam). Die Einschränkung besteht darin, dass die CSS-Engines der Browser Fehler / Einschränkungen aufweisen, die die potenzielle Höhe eines Elements begrenzen. Für IE sind das zufällig 0x123456 oder 1193046 Pixel. Für andere Browser ist es höher.

Es gibt eine experimentelle Problemumgehung im Zweig "Largenum-Fix", die diese Grenze erheblich erhöht, indem der scrollbare Bereich mit "Seiten" gefüllt wird, die auf 1 M Pixel Höhe eingestellt sind, und dann die relative Positionierung innerhalb dieser Seiten verwendet wird. Da die Höhenbeschränkung in der CSS-Engine anders und deutlich niedriger zu sein scheint als in der eigentlichen Layout-Engine, ergibt sich eine viel höhere Obergrenze.

Ich bin immer noch auf der Suche nach einer Möglichkeit, eine unbegrenzte Anzahl von Zeilen zu erreichen, ohne den Leistungsvorteil aufzugeben, den SlickGrid derzeit gegenüber anderen Implementierungen bietet.

Rüdiger, können Sie näher erläutern, wie Sie das gelöst haben?

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

" SlickGrid verwendet virtuelles Rendering, damit Sie problemlos mit Hunderttausenden von Elementen arbeiten können, ohne die Leistung zu beeinträchtigen. Tatsächlich gibt es keinen Unterschied in der Leistung zwischen der Arbeit mit einem Raster mit 10 Zeilen und 100'000 Zeilen. "

Einige Highlights:

• Adaptives virtuelles Scrollen (Hunderttausende von Zeilen verarbeiten)
• Extrem schnelle Rendergeschwindigkeit
• Hintergrund-Post-Rendering für reichere Zellen
• Konfigurierbar und anpassbar
• Vollständige Tastaturnavigation
• Spaltengröße ändern / neu anordnen / anzeigen / ausblenden
• Autososizing & Force-Fit
• Steckbare Zellenformatierer und -editoren
• Unterstützung für das Bearbeiten und Erstellen neuer Zeilen. "von mleibman

Es ist kostenlos (MIT-Lizenz). Es verwendet jQuery.

Die besten Grids sind meiner Meinung nach unten:

• Flexigrid: http://flexigrid.info/
• jQuery Grid: http://www.trirand.com/blog/
• jqGridView: http://plugins.jquery.com/project/jqGridView
• jqxGrid: http://www.jqwidgets.com/
• Ingrid: 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

Meine besten 3 Optionen sind jqGrid, jqxGrid und DataTables. Sie können mit Tausenden von Zeilen arbeiten und die Virtualisierung unterstützen.

Ich will keinen Flammenkrieg beginnen, aber wenn Ihre Forscher Menschen sind, kennen Sie sie nicht so gut, wie Sie denken. Nur weil sie über Petabyte an Daten verfügen, können sie nicht einmal Millionen von Datensätzen auf sinnvolle Weise anzeigen. Sie könnten sagen, sie wollen Millionen von Schallplatten sehen, aber das ist einfach albern. Lassen Sie Ihre klügsten Forscher einige grundlegende Berechnungen durchführen: Angenommen, sie verbringen 1 Sekunde damit, jeden Datensatz anzuzeigen. Bei dieser Geschwindigkeit dauert es 1000000 Sekunden, was mehr als sechs Wochen entspricht (von 40 Stunden Arbeitswochen ohne Pausen für Essen oder Toilette).

Denken sie (oder Sie) ernsthaft, dass eine Person (die auf das Gitter schaut) diese Art von Konzentration aufbringen kann? Erhalten sie in dieser Sekunde wirklich viel zu tun, oder filtern sie (wahrscheinlicher) das heraus, was sie nicht wollen? Ich vermute, dass sie Ihnen nach dem Anzeigen einer Teilmenge mit "angemessener Größe" einen Filter beschreiben könnten, der diese Datensätze automatisch herausfiltert.

Wie auch paxdiablo und Sleeper Smith und Lasse V Karlsen angedeutet haben, haben Sie (und sie) die Anforderungen nicht durchdacht. Nachdem Sie SlickGrid gefunden haben, wurde mir die Notwendigkeit dieser Filter sofort klar.

Ich kann mit ziemlich guter Sicherheit sagen, dass Sie dem Benutzer nicht unbedingt Millionen von Datenzeilen anzeigen müssen.

Es gibt keinen Benutzer auf der Welt, der in der Lage ist, diesen Datensatz zu erfassen oder zu verwalten. Selbst wenn Sie es technisch schaffen, ihn abzurufen, werden Sie kein bekanntes Problem für diesen Benutzer lösen.

Stattdessen würde ich mich darauf konzentrieren, warum der Benutzer die Daten sehen möchte. Der Benutzer möchte die Daten nicht nur sehen, um sie zu sehen. In der Regel wird eine Frage gestellt. Wenn Sie sich stattdessen darauf konzentrieren, diese Fragen zu beantworten, sind Sie etwas viel näher, das ein tatsächliches Problem löst.

Ich empfehle das Ext JS Grid mit der Funktion "Gepufferte Ansicht".

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

(Haftungsausschluss: Ich bin der Autor von w2ui)

Ich habe kürzlich einen Artikel über die Implementierung eines JavaScript-Rasters mit 1 Million Datensätzen geschrieben ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records ). Ich entdeckte, dass es letztendlich drei Einschränkungen gibt, die verhindern, dass es höher geht:

1. Die Höhe des Div hat eine Grenze (kann durch virtuelles Scrollen überwunden werden)
2. Vorgänge wie Sortieren und Suchen werden nach etwa 1 Million Datensätzen langsam
3. Der Arbeitsspeicher ist begrenzt, da die Daten im JavaScript-Array gespeichert sind

Ich habe das Raster mit 1 Million Datensätzen (außer IE) getestet und es funktioniert gut. Demos finden Sie Demos und Beispiele.

dojox.grid.DataGrid bietet eine JS-Abstraktion für Daten, sodass Sie sie mit den bereitgestellten dojo.data-Speichern an verschiedene Backends anschließen oder Ihre eigenen schreiben können. Sie benötigen natürlich eine, die den Direktzugriff für so viele Datensätze unterstützt. DataGrid bietet auch vollen Zugriff.

Bearbeiten Sie also hier einen Link zu Matthew Russells Artikel , der das gewünschte Beispiel liefern soll und Millionen von Datensätzen mit dojox.grid anzeigt. Beachten Sie, dass die alte Version des Rasters verwendet wird, die Konzepte jedoch dieselben sind. Es gab nur einige inkompatible API-Verbesserungen.

Oh, und es ist völlig kostenlos Open Source.

Ich habe das jQuery Grid Plugin verwendet , es war schön.

Demos

Hier sind einige Optimierungen, die Sie anwenden können, um die Dinge zu beschleunigen. Ich denke nur laut nach.

Da die Anzahl der Zeilen in Millionenhöhe liegen kann, benötigen Sie ein Caching-System nur für die JSON-Daten vom Server. Ich kann mir nicht vorstellen, dass jemand alle X Millionen Artikel herunterladen möchte, aber wenn dies der Fall wäre, wäre dies ein Problem. Dieser kleine Test in Chrome für ein Array mit mehr als 20 Millionen Ganzzahlen stürzt auf meinem Computer ständig ab.

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

Sie können LRU oder einen anderen Caching-Algorithmus verwenden und eine Obergrenze dafür festlegen, wie viele Daten Sie zwischenspeichern möchten.

Für die Tabellenzellen selbst halte ich das Erstellen / Zerstören von DOM-Knoten für teuer. Stattdessen können Sie einfach die X-Anzahl von Zellen vordefinieren und die JSON-Daten in diese Zellen einfügen, wenn der Benutzer zu einer neuen Position blättert. Die Bildlaufleiste hat praktisch keine direkte Beziehung dazu, wie viel Platz (Höhe) erforderlich ist, um den gesamten Datensatz darzustellen. Sie können die Höhe des Tabellencontainers beliebig festlegen, z. B. 5000 Pixel, und diese der Gesamtzahl der Zeilen zuordnen. Wenn die Containerhöhe beispielsweise 5000 Pixel beträgt und insgesamt 10 Millionen Zeilen vorhanden sind, gibt das starting row ≈ (scroll.top/5000) * 10MWo scroll.topden Bildlaufabstand vom oberen Rand des Containers an. Kleine Demo hier .

Um zu erkennen, wann weitere Daten angefordert werden müssen, sollte ein Objekt idealerweise als Vermittler fungieren, der auf Bildlaufereignisse wartet. Dieses Objekt verfolgt, wie schnell der Benutzer einen Bildlauf durchführt, und stellt eine Datenanforderung für die entsprechenden Zeilen, wenn es so aussieht, als würde der Benutzer langsamer oder vollständig angehalten. Das Abrufen von Daten auf diese Weise bedeutet, dass Ihre Daten fragmentiert werden. Daher sollte der Cache unter diesem Gesichtspunkt gestaltet werden.

Auch die Browserbeschränkungen für maximal ausgehende Verbindungen können eine wichtige Rolle spielen. Ein Benutzer kann zu einer bestimmten Position scrollen, die eine AJAX-Anforderung auslöst, aber bevor dies abgeschlossen ist, kann der Benutzer zu einem anderen Teil scrollen. Wenn der Server nicht ausreichend reagiert, werden die Anforderungen in die Warteschlange gestellt und die Anwendung reagiert nicht mehr. Sie können einen Anforderungsmanager verwenden, über den alle Anforderungen weitergeleitet werden, und ausstehende Anforderungen abbrechen, um Speicherplatz zu schaffen.

Ich weiß, dass es eine alte Frage ist, aber immer noch. Es gibt auch dhtmlxGrid , das Millionen von Zeilen verarbeiten kann. Es gibt eine Demo mit 50.000 Zeilen, aber die Anzahl der Zeilen, die im Raster geladen / verarbeitet werden können, ist unbegrenzt.

Haftungsausschluss: Ich bin vom DHTMLX-Team.

Ich schlage vor, Sie lesen dies

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

Haftungshinweis: i stark verwenden YUI Datatable für eine lange Zeit ohne keine Kopfschmerzen . Es ist kraftvoll und stabil. Für Ihre Anforderungen können Sie eine ScrollingDataTable verwenden , die unterstützt

• X-Scrolling
• Y-Scrollen
• xy-scrolling
• Ein leistungsstarker Ereignismechanismus

Ich denke, Sie möchten ein tableScrollEvent . Seine API sagt

Wird ausgelöst, wenn eine DataTable mit festem Bildlauf einen Bildlauf hat.

Da jede DataTable eine DataSource verwendet, können Sie ihre Daten über tableScrollEvent zusammen mit der Größe der Renderschleife überwachen, um Ihre ScrollingDataTable entsprechend Ihren Anforderungen zu füllen .

Render Loop Größe sagt

In Fällen, in denen Ihre DataTable die Gesamtheit eines sehr großen Datensatzes anzeigen muss, kann die renderLoopSize-Konfiguration die Verwaltung des Browser-DOM-Renderings unterstützen, damit der UI-Thread nicht für sehr große Tabellen gesperrt wird . Jeder Wert größer als 0 bewirkt, dass das DOM-Rendering in setTimeout () -Ketten ausgeführt wird, die die angegebene Anzahl von Zeilen in jeder Schleife rendern. Der ideale Wert sollte pro Implementierung ermittelt werden, da es keine festen Regeln gibt, sondern nur allgemeine Richtlinien:

• Standardmäßig ist renderLoopSize 0, sodass alle Zeilen in einer einzigen Schleife gerendert werden. Eine renderLoopSize> 0 erhöht den Overhead.
• Wenn Ihr Datensatz groß genug ist (Anzahl der Zeilen X Anzahl der Spalten X Formatierungskomplexität), dass Benutzer beim visuellen Rendern eine Latenz erleben und / oder das Skript hängen bleibt, sollten Sie eine renderLoopSize festlegen .
• Eine renderLoopSize unter 50 ist es wahrscheinlich nicht wert. Eine renderLoopSize> 100 ist wahrscheinlich besser.
• Ein Datensatz wird wahrscheinlich nicht als groß genug angesehen, es sei denn, er enthält Hunderte und Hunderte von Zeilen.
• Wenn die Zeilen renderLoopSize> 0 und <total vorhanden sind, wird die Tabelle in einer Schleife gerendert (wie renderLoopSize = 0), es werden jedoch auch Funktionen wie das Zeilen-Striping nach dem Rendern ausgelöst, die von einem separaten setTimeout-Thread verarbeitet werden.

Zum Beispiel

// 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> ist nur eine einzelne DataSource . Dies kann ein JSON-, JSFunction-, XML- und sogar ein einzelnes HTML-Element sein

Hier sehen Sie ein einfaches Tutorial, das von mir bereitgestellt wurde. Beachten Sie, dass kein anderes DATA_TABLE-Pluglin Single- und Dual-Click gleichzeitig unterstützt. YUI DataTable ermöglicht es Ihnen. Darüber hinaus können Sie es auch mit JQuery ohne Kopfschmerzen verwenden

Einige Beispiele können Sie sehen

• Listenpunkt

Fühlen Sie sich frei, Fragen zu YUI DataTable zu stellen.

Grüße,

Ich verstehe den Punkt irgendwie nicht, für jqGrid können Sie die virtuelle Bildlauffunktion verwenden:

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

Andererseits können Millionen von Zeilen mit Filterung ausgeführt werden:

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

Ich verstehe den Punkt "als ob es keine Seiten gäbe" wirklich nicht, ich meine ... es gibt keine Möglichkeit, 1.000.000 Zeilen gleichzeitig im Browser anzuzeigen - das sind 10 MB HTML Raw, ich sehe es irgendwie nicht warum Benutzer die Seiten nicht sehen möchten.

Wie auch immer...

Der beste Ansatz, den ich mir vorstellen kann, ist das Laden des Datenblocks im JSON-Format für jeden Bildlauf oder eine bestimmte Grenze, bevor der Bildlauf endet. json kann leicht in Objekte konvertiert werden und daher können Tabellenzeilen leicht unauffällig erstellt werden

Ich kann Open Rico nur empfehlen . Am Anfang ist es schwierig zu implementieren, aber wenn Sie es einmal greifen, werden Sie nie mehr zurückblicken.

Ich weiß, dass diese Frage einige Jahre alt ist, aber jqgrid unterstützt jetzt das virtuelle Scrollen:

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

aber mit deaktivierter Paginierung

Ich schlage vor, Sigma Grid, Sigma Grid hat Paging-Funktionen eingebettet, die Millionen von Zeilen unterstützen könnten. Außerdem benötigen Sie möglicherweise ein Remote-Paging, um dies zu tun. Siehe die Demo http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

Schauen Sie sich dGrid an:

https://dgrid.io/

Ich bin damit einverstanden, dass Benutzer NIEMALS Millionen von Datenzeilen gleichzeitig anzeigen müssen, aber dGrid kann sie schnell anzeigen (jeweils auf einem Bildschirm).

Kochen Sie nicht den Ozean, um eine Tasse Tee zu machen.