it-swarm.com.de

JavaScript-Datenraster für Millionen von Zeilen

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

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

Es sollte vielmehr so ​​aussehen, als ob alle Daten verfügbar wären.

Anstatt die Daten auf einmal herunterzuladen, werden kleine Teile heruntergeladen, sobald der Benutzer zu ihnen gelangt (dh durch Scrollen durch das Raster).

Die Zeilen werden nicht über dieses Front-End bearbeitet, sodass schreibgeschützte Raster zulässig sind.

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

222
Rudiger

( Haftungsausschluss: Ich bin der Autor von SlickGrid )

[~ # ~] Update [~ # ~] Dies wurde nun in SlickGrid implementiert.

In http://github.com/mleibman/SlickGrid/issues#issue/22 finden Sie weitere Informationen dazu, wie SlickGrid mit einer größeren Anzahl von Zeilen funktioniert.

Das Problem ist, dass SlickGrid die Bildlaufleiste selbst nicht virtualisiert - die Höhe des bildlauffähigen 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 eigentliche Bildlauf wird jedoch vom Browser ausgeführt. Das erlaubt es, sehr schnell und dennoch reibungslos zu sein (Onscroll-Ereignisse sind notorisch langsam). Die Einschränkung besteht darin, dass die CSS-Engines des Browsers Bugs/Limits enthalten, 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" aufgefüllt wird, die auf eine Höhe von 1 Mio. Pixel festgelegt 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 auf den Leistungsvorteil zu verzichten, den SlickGrid derzeit gegenüber anderen Implementierungen bietet.

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

190
Tin

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

" SlickGrid verwendet virtuelles Rendering, damit Sie problemlos mit Hunderttausenden von Elementen arbeiten können, ohne dass die Leistung beeinträchtigt wird. 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 Zeilen verarbeiten)
  • Extrem schnelle Rendergeschwindigkeit
  • Hintergrund nach dem Rendern für reichere Zellen
  • Konfigurierbar & anpassbar
  • Vollständige Tastaturnavigation
  • Spaltengröße ändern/neu anordnen/anzeigen/verbergen
  • Automatische Spaltengröße und Kraftanpassung
  • Steckbare Zellformatierer & Editoren
  • Unterstützung für das Bearbeiten und Erstellen neuer Zeilen. "von mleibman

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

84
Andras Vass

Die besten Grids sind meiner Meinung nach unten:

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

35
scripto

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

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

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

Ich kann mit ziemlicher 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 auf warum konzentrieren, wenn der Benutzer die Daten sehen möchte. Der Benutzer möchte die Daten nicht nur sehen, um die Daten zu sehen. In der Regel wird eine Frage gestellt. Wenn Sie sich stattdessen auf die Beantwortung dieser Fragen konzentrieren, sind Sie etwas näher, das ein tatsächliches Problem löst.

Ich empfehle das Ext JS Grid mit der Buffered View-Funktion.

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

7
richardtallent

(Haftungsausschluss: Ich bin der Autor von w2ui)

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

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

Ich habe das Grid mit 1 Million Datensätzen (außer IE) getestet und es funktioniert gut. Siehe Artikel für Demos und Beispiele.

6
vitmalina

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 erstellen können. Sie benötigen offensichtlich einen, der den Direktzugriff für diese vielen Datensätze unterstützt. DataGrid bietet auch volle Zugänglichkeit.

Bearbeiten Sie also hier einen Link zu Matthew Russells Artikel , der das benötigte Beispiel liefern sollte und mit dojox.grid Millionen von Datensätzen anzeigt. Beachten Sie, dass die alte Version des Rasters verwendet wird, die Konzepte jedoch identisch sind. Es wurden nur einige inkompatible API-Verbesserungen vorgenommen.

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

6
peller

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

Da die Anzahl der Zeilen Millionen betragen kann, benötigen Sie ein Cachesystem 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 es ein Problem. Dieser kleiner Test on Chrome für ein Array mit mehr als 20 Millionen Ganzzahlen stürzt ständig auf meinem Computer 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 für die Datenmenge festlegen, die Sie zwischenspeichern möchten.

Für die Tabellenzellen selbst denke ich, dass das Konstruieren/Zerstören von DOM-Knoten teuer sein kann. Stattdessen können Sie einfach die X-Anzahl der Zellen vordefinieren und die JSON-Daten in diese Zellen einfügen, wenn der Benutzer einen Bildlauf zu einer neuen Position durchführt. 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. 5000px, und diese der Gesamtzahl der Zeilen zuordnen. Wenn die Containerhöhe beispielsweise 5000 Pixel beträgt und insgesamt 10 Millionen Zeilen vorhanden sind, steht starting row ≈ (scroll.top/5000) * 10M wobei scroll.top Für den Bildlaufabstand vom oberen Rand des Containers. Kleine Demo hier .

Um zu erkennen, wann weitere Daten angefordert werden müssen, sollte ein Objekt idealerweise als Vermittler fungieren, der Bildlaufereignisse abhört. 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 ob der Benutzer langsamer wird oder vollständig angehalten hat. Wenn Sie Daten auf diese Weise abrufen, bedeutet dies, dass Ihre Daten fragmentiert werden. Daher sollte der Cache unter diesem Gesichtspunkt entworfen werden.

Auch die Browserlimits 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. Vorher kann er jedoch zu einem anderen Teil scrollen. Wenn der Server nicht ausreichend reagiert, werden die Anforderungen in die Warteschlange gestellt Die Anwendung reagiert nicht mehr. Sie können einen Anforderungsmanager verwenden, über den alle Anforderungen weitergeleitet werden, und ausstehende Anforderungen abbrechen, um Speicherplatz freizugeben.

4
Anurag

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

Demos

4
Amr Elgarhy

Ich weiß, dass es eine alte Frage ist, aber 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.

4
Paul

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" nicht wirklich, ich meine ... es gibt keine Möglichkeit, 1.000.000 Zeilen gleichzeitig im Browser anzuzeigen - das sind 10 MB HTML-Rohdaten, was ich irgendwie nicht sehe warum Benutzer die Seiten nicht sehen möchten.

Sowieso...

3
user125775
3
ant

Haftungsausschluss: i stark use YUI DataTable lange ohne Kopfschmerzen . Es ist kraftvoll und stabil. Für Ihre Bedürfnisse können Sie eine ScrollingDataTable verwenden, die unterstützt

  • x-Scrolling
  • y-Scrolling
  • xy-scrolling
  • Ein leistungsstarker Event-Mechanismus

Für das, was Sie brauchen, denke ich, dass Sie wollen, ist ein tableScrollEvent. Die API sagt

Wird ausgelöst, wenn ein fester Bildlauf in DataTable ausgeführt wird.

Da jede DataTable eine DataSource verwendet, können Sie ihre Daten überwachen durch tableScrollEvent zusammen mit der Render-Loop-Größe , um Ihre ScrollingDataTable entsprechend Ihren Anforderungen auszufüllen.

Render-Loop-Größe sagt

In Fällen, in denen Ihre Datentabelle die Gesamtheit eines sehr großen Datensatzes anzeigen muss, kann die renderLoopSize-Konfiguration beim Verwalten des Browser-DOM-Renderings helfen, damit der UI-Thread nicht auf sehr großen Tabellen blockiert 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 festgelegt 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 Ihre Datenmenge groß genug ist (Anzahl der Zeilen X Anzahl der Spalten X Komplexität der Formatierung), dass Benutzer beim visuellen Rendern eine Latenz haben und/oder das Skript hängen bleibt, Überlegen Sie, ob Sie a festlegen renderLoopSize .
  • 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 sind, wird die Tabelle in einer Schleife gerendert (wie bei renderLoopSize = 0), aber es werden auch Funktionen wie das Zeilen-Striping nach dem Rendern von einem separaten setTimeout-Thread behandelt.

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 . Es kann sich um ein JSON-, JSFunction-, XML- und sogar ein einzelnes HTML-Element handeln

Hier sehen Sie ein einfaches Tutorial, das ich zur Verfügung gestellt habe. Beachten Sie, dass das Plug-in no other DATA_TABLE Single- und Dual-Click gleichzeitig unterstützt. YUI DataTable ermöglicht es Ihnen. Und mehr, Sie können es auch mit JQuery ohne Kopfschmerzen verwenden

Einige Beispiele können Sie sehen

Sie können jederzeit weitere Fragen zu YUI DataTable stellen.

grüße,

3
Arthur Ronald

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

2
coder

Ich weiß, dass diese Frage ein paar 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

1
sksallaj

Ich würde empfehlen Open Rico. Es ist anfangs schwierig zu implementieren, aber wenn Sie es einmal haben, werden Sie nie mehr zurückblicken.

1
mosid

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. Schauen Sie sich die Demo an http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

0
Bussy

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 (bildschirmfüllend).

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

0
ColemanTO