Umgang mit großen Raster-Datasets in JavaScript

Question

Was sind einige der besseren Lösungen für die Handhabung großer Datasets (100 KB) auf dem Client mit JavaScript. Wenn Sie über mehrspaltige Sortier- und Suchfunktionen verfügen, können Sie insbesondere das Abrufen (und Vorabholen) der Daten, das clientseitige Modell (für die Anzeige) und das Zwischenspeichern der Daten handhaben.

würde ich eine gute Lösung wäre dabei einige nachdenkliche Arbeit im Hintergrund vorstellen. Wenn die Tabelle z. B. N Elemente anzeigt, werden zunächst 2N Elemente abgerufen, die Daten für den Benutzer zurückgegeben und dann die nächsten 2N Elemente im Hintergrund abgerufen (auch wenn der Benutzer dies nicht angefordert hat). Wenn der Benutzer Such-/Sortieränderungen vornahm, würde er den anfänglichen Basisfall löschen (oder vielleicht sogar zwischenspeichern) und ähnliche Funktionen ausführen.

Können Sie die besten Lösungen, die Sie gesehen haben, teilen?

Dank

Answer 1

Es hängt davon ab, wie die Daten verwendet werden.

Für eine große Datenmenge, wo die Suchfunktion des Browsers ausreichend war, um nur gerade HTML-Tabelle Rückkehr wirksam war. Das Laden dauert einige Zeit, aber das Display reagiert auf ältere, langsamere Clients, und Sie müssen sich keine Gedanken darüber machen, dass es kaputt geht.

Wenn der Client die Sortierung und Suche, und Sie nicht die gesamte Tabelle auf einmal zeigen, habe ich den Server Tab-getrennte Tabellen über XMLHTTPRequest senden, analysierte sie im Browser mit list = String.split (' \ n ') und aktualisiert die Anzeige mit wiederholten Aufrufen von $ (' node '). innerHTML =' blah '. Die JS-Engine kann lange Strings sehr effizient speichern. Das lief viel schneller auf dem Client als DOM-Knoten anzuzeigen, zu verbergen und neu anzuordnen. Das Erstellen und Zerstören neuer DOM-Knoten im laufenden Betrieb erwies sich als sehr langsam. Jede Zeile in Felder auf Abruf aufteilen scheint zu funktionieren; Ich habe mit diesem Freiheitsgrad nicht experimentiert.

Ich habe nie versucht, den offensichtlichen & Hintergrund Trick Pre-Fetch, weil diese anderen Methoden gut genug gearbeitet.

Answer 2

eine jQuery Tabelle Plugin wie Datentabellen verwenden: http://datatables.net/

Es serverseitige Verarbeitung zum Sortieren, Filtern und Paging unterstützt. Und es enthält Pipelining Unterstützung die nächsten x Seiten von Aufzeichnungen Prefetch: http://www.datatables.net/examples/server_side/pipeline.html

Eigentlich ist das Tables Plugin funktioniert 4 verschiedene Möglichkeiten: 1. Mit einer HTML-Tabelle, so könnte man eine Reihe von HTML herabs und dann haben alle die Sortieren, Filtern und Paging arbeiten clientseitig. 2. Mit einem JavaScript-Array können Sie also ein 2D-Array senden und die Tabelle von dort erstellen lassen. 3. Ajax-Quelle - das ist nicht wirklich auf Sie anwendbar. 4. Serverseitig, wo Sie Daten im JSON-Format an eine leere Tabelle senden und von DataTables von dort übernehmen lassen.

Answer 3

Da Sie diese mit Ext JS markiert, werde ich Sie Ext.ux.LiveGrid zeigen, wenn Sie nicht schon gesehen haben. Die Quelle ist verfügbar. Sie können also nachsehen, wie sie dieses Problem behoben hat. Dies ist eine beliebte und weit verbreitete Erweiterung der Ext JS-Welt.

Mit dieser sagte, ich persönlich denke, (fast) Laden, dass viele Daten als Benutzer Erfahrung nutzlos ist. Manuelles Ziehen einer Bildlaufleiste (das Springen von Hunderten von Datensätzen pro Pixel) ist eine weitaus schlechtere Erfahrung, als einfach zu tippen, was Sie wollen. Ich würde lieber eine robuste Filterung/Suche bevorzugen, anstatt dem Benutzer so viele Daten zu präsentieren.

Was ist, wenn Sie zu Google gehen und statt einem Suchfeld, es ist nur das gesamte Internet in eine langen virtuelle Liste geladen, die Sie Ihre Website zu blättern hatten zu finden ... :)

Answer 4

SlickGrid tut genau Nach was suchst du. (Demo)

Mithilfe des AJAX-Datenspeichers kann SlickGrid Millionen von Zeilen ohne zu zucken verarbeiten.

Answer 5

Überprüfen Sie this comprehensive list von Datenraster und Tabellenkalkulationen.

Zum Filtern/Sortieren/Paginierung Zwecke können Sie sich für große Handsontable oder DataTables als eine kostenlose Alternative interessiert sein.

Wenn Sie einfach riesige Liste ohne zusätzliche Funktionen anzeigen müssen Clusterize.js sollte ausreichen.