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?
Antworten:
( 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?
quelle
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:
Es ist kostenlos (MIT-Lizenz). Es verwendet jQuery.
quelle
data.length = Math.min(131000, parseInt(resp.total));
... Und natürlich die aus einem Grund fest codierte :(data
Arrays zu machen. Es ist ein Kludge, aber ich habe die Antworten, die einbigdata
Array füllen, und die kleineren ziehendata
aus dembigdata
Array. Der Rest des Programms verwendet das kleinere Datenarray, mit Ausnahme der Bildlaufleistenmessung und einiger anderer Stellen, die jetzt für eine große Anzahl von Zeilen unbegrenzt sind. Alles in allem war es viel einfacher als meine eigenen zu schreiben.Die besten Grids sind meiner Meinung nach unten:
Meine besten 3 Optionen sind jqGrid, jqxGrid und DataTables. Sie können mit Tausenden von Zeilen arbeiten und die Virtualisierung unterstützen.
quelle
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.
quelle
Ctrl+F
. Die Alternative (Paging, Website-Suche) ist viel schlimmer. Schauen Sie sich einfach StackOverflow an, wenn Sie versuchen, durch Fragen oder Antworten zu scrollen, Reddit, um durch den Kommentarverlauf eines Benutzers zu scrollen. Sortieren und sofortige Suche bieten eine Leistung, die Windows Explorer bietet, aber Websites fehlen.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.
quelle
Ich empfehle das Ext JS Grid mit der Funktion "Gepufferte Ansicht".
http://www.extjs.com/deploy/dev/examples/grid/buffer.html
quelle
(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:
Ich habe das Raster mit 1 Million Datensätzen (außer IE) getestet und es funktioniert gut. Demos finden Sie Demos und Beispiele.
quelle
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.
quelle
Ich habe das jQuery Grid Plugin verwendet , es war schön.
Demos
quelle
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.
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) * 10M
Woscroll.top
den 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.
quelle
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.
quelle
Ich schlage vor, Sie lesen dies
http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/
quelle
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
Ich denke, Sie möchten ein tableScrollEvent . Seine API sagt
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
Zum Beispiel
<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
Fühlen Sie sich frei, Fragen zu YUI DataTable zu stellen.
Grüße,
quelle
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...
quelle
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
quelle
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.
quelle
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
quelle
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
quelle
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.
quelle