it-swarm.com.de

Alternative UI-Muster für einen großen, flachen Baum

In unserer App kann AdminUsers mit Editions verknüpft werden, die Teil eines Kurs sind.

Ein Kurs wäre so etwas wie Ruby 101 und eine Edition wäre Französisch - Online oder Englisch - Klassenzimmer. So könnte ein AdminUser mit den Online-Programmierausgaben verknüpft werden, und ein anderer könnte mit den französischen Ausgaben umgehen.

Wir haben versucht, diese Konfiguration mithilfe eines Baums zu implementieren, wobei die erste Ebene der Kurs und die zweite Ebene die Edition ist. Wie erwartet können Sie einen Kurs abhaken und alle Editionen abhaken, oder Sie können eine einzelne Edition abhaken. Großartig.

Tree view

Das Problem tritt auf, wenn es 500 Kurse mit jeweils 6 Ausgaben gibt. Der Baum wird unhandlich und langsam (einfach aufgrund der Lautstärke), selbst mit einem Filter und anderen Auswahloptionen. Selbst das Ändern der Baumstruktur (mehr Ebenen oder etwas anderes) würde das Geschwindigkeitsproblem nicht ändern, da es immer noch einige tausend Knoten gibt.

Gibt es ein alternatives Muster für die Anzeige dieser Art von Daten/Assoziationen mit so vielen Daten? Der Hauptanwendungsfall ist, dass der Client alle anhand einiger Kriterien auswählen möchte ("alle englischen Klassenausgaben"), aber auch spezifische individuelle für diese albernen Ausgaben.

Vielleicht nur eine Liste mit einer automatischen Vervollständigung zum Hinzufügen? Aber wenn sie Zugriff auf viele Editionen haben, ist die Liste wieder riesig. Vielleicht können wir das nicht vermeiden.

Keiner von uns beherrscht U [XI] -bezogene Dinge sehr gut, daher gehen uns die Ideen aus.

14
Daniel Huckstep

Ist das wirklich ein Baum? Es scheint eher ein Datenraster zu sein.

Wenn die Menge der möglichen 'Editionen' klein ist - klingt wie sechs - warum sollte man sie dann als Baum anzeigen?

Zeigen Sie sie als Tabelle mit:

  1. eine Zeile pro Produkt und eine Spalte pro Ausgabe.
  2. Zeigen Sie ein Kontrollkästchen oder ein anderes Steuerelement an, wenn diese Edition für dieses Produkt verfügbar ist, oder eine leere Zelle, wenn dies nicht der Fall ist.
  3. Wenn Sie "verwandte" Editionen haben (z. B. French/Online und French/Classroom) eine geteilte "französische" Spalte mit Kontrollkästchen Online und Classroom enthalten.
  4. Lassen Sie den Benutzer Spalten herausfiltern, die ihm egal sind.

Ja, große Tabellen (oder gefälschte Tabellen mit CSS) können ebenfalls langsam sein, jedoch nicht so langsam wie die meisten Baumimplementierungen.

5
Alex Feinman

Die Wurzel Ihrer Probleme liegt in der Verwendung eines Baums zum Durchsuchen einer großen Datenmenge. Es ist einfach kein gutes Mittel zum Durchsuchen und Auswählen großer Volumes.

Verwenden Sie stattdessen (als Grundstruktur) etwas wie Miller Columns , das die Struktur in benachbarte Spalten aufteilt, wie es im Mac OS X Finder seit Version 10.0 am besten verwendet wird.

Weitere Informationen finden Sie unter Finder auf Wikipedia ; ein Video auf YouTube des Windows UltraExplorer oder diese sehr schnelle Demo um 1: 13s in ein Video über Finder Basics von Apple.

enter image description here

4
Roger Attrill

Ich denke, das Design, das Sie haben, sieht einigermaßen brauchbar aus, wenn der Filter gut funktioniert und Sie die Leistung verbessern können.

Das Leistungsproblem sollte technisch nicht zu schwer zu beheben sein, obwohl Sie Ihre vorhandene Baumkomponente wahrscheinlich nicht verwenden können. Ich vermute, es werden alle visuellen Elemente im Voraus erstellt und dann ausgeblendet.

Das ist der einfachste Ansatz für eine kleine Liste, aber diese Elemente sind mit viel Aufwand verbunden. Für eine große Liste ist es besser, eine einfache Speicherstruktur für die gesamten Daten zu verwenden und die visuellen Elemente erst zu erstellen, nachdem die vollständige Liste in eine viel kürzere Liste gefiltert wurde.

12.000 HTML-Elemente mit Stilen, Bildern und Ereignishandlern sind besonders für den Internet Explorer von großer Bedeutung. 3000 kleine Objekte in einem Array sind nichts.

2
Tom Clarkson

Ich habe vor 2 Tagen genau das Gleiche gedacht. Ich habe diese Lösung gefunden: Eine Mischung aus iPod-Drilldown-Menü + Checkbox-Liste

enter image description here

2
Marc D

Klingt vielleicht seltsam, aber vielleicht liegt das Problem in dieser festen Hierarchie. Ich verstehe, dass die Hierarchie in der physischen Welt in die vorgegebene Richtung weist, aber was würde passieren, wenn Sie ein Dropdown-Menü haben, das "Nach Kurs organisieren" oder "Nach Editionen organisieren" (Sortieren, Gruppieren, was auch immer) sagen kann. Es kann Ihnen helfen, herumzuspringen, den Blickwinkel bei Bedarf zu ändern und zurückzuschalten. Das in Kombination mit Filtern und alle auswählen könnte funktionieren ... obwohl es kompliziert klingt, selbst wenn ich lese, was ich geschrieben habe ...

1

Warum nicht einfach ein Such-/Filterfeld verwenden, ohne standardmäßig Optionen anzuzeigen? Verwenden Sie die automatische Vervollständigung, damit der Benutzer eine Vorstellung davon hat, was er eingeben soll, und laden Sie dann gleichzeitig dynamisch die entsprechenden Optionen in einen Baum. Verwenden Sie grundsätzlich dasselbe Muster wie bei der Sofort-Suche von Google.

Wenn ein Benutzer dann mehrere Auswahlen in verschiedenen Kategorien treffen muss, behalten Sie die Bäume für die ausgewählten Elemente auf dem Bildschirm bei und führen Sie das dynamische Laden darunter durch. Sie können eine Animation erstellen, in der die markierten Bäume nach oben (über der Sucheingabe) oder zur Seite verschoben werden, damit der Benutzer weiß, dass sie nicht verloren gegangen sind. Alternativ können Sie auch kurz die Hintergründe hervorheben und eine Benachrichtigung mit der Aufschrift "Auswahl gespeichert" verwenden.

0
Virtuosi Media