user-interface - mockup - ui design tool



GUI-Muster zum Bearbeiten von Daten mit vielen-zu-viele-Beziehungen (3)

Ich stoße oft in eine Situation, in der ich eine GUI entwickeln muss, um Daten zu bearbeiten, die eine: m-Beziehung haben. Ich suche nach benutzerfreundlichen GUI-Ideen.

[table1]
   |
  /|\
[table2]
  \|/
   |
[table3]

Normalerweise ähnelt die GUI etwa so:

Grid that shows all items from table1

Table3 item hinzufügen ... (zeigt modales Fenster mit table3-Elementen)

Grid that shows all items from table3

Nachdem der Benutzer ein table3-Objekt ausgewählt hat, füge ich eine neue Zeile zu table2 hinzu und aktualisiere die Raster.

Nachteile:

  • Sie können table3-Elemente nur zu Tabelle1 hinzufügen und nicht umgekehrt;
  • Sie können nur Tabelle1 Elemente durchsuchen und verwandte Tabelle3 Elemente anzeigen;
  • Ich brauche ein gefiltertes Raster von table3-Elementen und ein ähnliches, um neue Elemente auszuwählen.

Meine Frage:

Kennt jemand eine bessere Methode zum visuellen Durchsuchen und Bearbeiten von Daten mit einer Beziehung::? Oder irgendwelche netten Muster, die ich von vorhandenen Softwarepaketen "stehlen" könnte?

https://ffff65535.com


Das ist eine alte Frage, aber als ich gerade jetzt das gleiche Problem hatte, kam ich auf Folgendes:

  1. 2 nebeneinander liegende Gitter, die die Objekte Tabelle1 und Tabelle3 anzeigen, ggf. mit Paging.
  2. Beide Gitter haben eine obere Symbolleiste, die das Filtern nach einem Wert aus der gegenüberliegenden Tabelle ermöglicht. Abhängig von Ihren Daten und Ihrem GUI-Framework kann es sich um ein Drop-Down-Kombinationsraster oder um eine Auto-Vervollständigen-Texteingabe handeln.
  3. Beide Gitter haben Kontrollkästchen (letzte oder erste Spalte)
  4. Beide Raster enthalten eine Inline-Schaltfläche / Aktion für jede Zeile, um das andere Raster für dieses Element automatisch zu filtern.
  5. Zu einem bestimmten Zeitpunkt wird nur ein Raster als "aktiv" oder "Master" angezeigt / markiert (um dem Benutzer zu verdeutlichen, welche Seite der Beziehung er / sie betrachtet / kontrolliert).

Wenn Sie ein Objekt im Raster1 auswählen, wird Raster1 aktiviert und alle Elemente im anderen Raster sind mit Kontrollkästchen versehen, wenn sie mit dem ausgewählten Objekt verknüpft sind.

Umgekehrt, wenn Sie ein Objekt in grid2 (table3) auswählen, wird grid2 aktiv, alle Kontrollkästchen in grid2 sind leer (oder abgeblendet) und Kontrollkästchen in grid1 zeigen eine Verknüpfung mit dem ausgewählten Objekt an.

Der Filterteil wird basierend auf der in Schritt 4 beschriebenen Inline-Schaltfläche vereinfacht.

Ich glaube, dass diese Lösung alle Ihre Anforderungen erfüllen würde.


Hier ist eine mögliche Lösung, in Form einer Mitarbeiter-zu-Projekte m: m-Beziehung gegeben. Jeder Mitarbeiter kann an vielen Projekten arbeiten, jedes Projekt kann viele Mitarbeiter einbeziehen.

Von links nach rechts zeigen Sie Folgendes an:

Ein Fenster mit den Details des derzeit ausgewählten Mitarbeiters.

Eine Liste aller Mitarbeiter, wobei jeder Eintrag in der Liste den Namen des Mitarbeiters als klickbaren Link oder als Schaltfläche anzeigt (um Details im Detailbereich anzuzeigen). Am Anfang der Liste befindet sich eine Umschalttaste, mit der die Projektliste nur für die mit dem aktuell ausgewählten Mitarbeiter verknüpften Projekte gefiltert wird. Am unteren Ende der Liste befindet sich eine Schaltfläche zum Hinzufügen eines neuen Mitarbeiters, der ein leeres Detailfenster anzeigt, das für die Eingabe bereit ist.

Ein vertikaler Bereich in der Mitte mit einem einzigen "Link" -Knopf, der es dem Benutzer ermöglicht, den aktuell ausgewählten Mitarbeiter mit dem aktuell ausgewählten Projekt zu verknüpfen. Ein Klick auf diese Schaltfläche öffnet einen Dialog, in dem der Benutzer die Details des Links eingeben kann (dh wie lange der Mitarbeiter zugewiesen ist, welche Rolle der Mitarbeiter spielt usw.).

Eine Liste aller Projekte, wobei jeder Eintrag in der Liste den Namen des Projekts als klickbaren Link oder als Schaltfläche anzeigt (um Details im Detailbereich anzuzeigen). Am Anfang der Liste befindet sich eine Umschalttaste, mit der die Mitarbeiterliste nur für die ausgewählten Projekte gefiltert wird. Am unteren Ende der Liste befindet sich eine Schaltfläche zum Hinzufügen eines neuen Projekts, in der ein leeres Detailfenster angezeigt wird, das für die Eingabe bereitsteht.

Ein Fenster mit den Details des aktuell ausgewählten Projekts.

Offensichtlich müssten Sie die Größe der Detailfenster einschränken, indem Sie nur die Details anzeigen, die für die m: m-Beziehung relevant sind. Sie können sogar eine Schaltfläche im Detailfenster hinzufügen, um ein detaillierteres Popup-Fenster zu öffnen, oder Sie können das Detailfenster ganz weglassen, wenn Sie hauptsächlich an der Verwaltung der Links interessiert sind. Diese Benutzeroberfläche würde auf Wide-Aspect-Bildschirmen sehr gut funktionieren.

HTH! Klay


Lösung 1

Wenn die Datensätze nicht zu groß sind, verwenden Sie eine Tabelle und erlauben Sie Benutzern, in Zellen Zellen zu setzen (Tabelle 1 ist X-Achse und Tabelle 3 ist Y-Achse).

Sie können dies wahrscheinlich für größere table1 / 3-Datensätze tun, solange Sie Benutzern erlauben, zu filtern oder auf andere Weise einzuschränken, welche Werte auf der x- und y-Achse angezeigt werden.

Lösung 2

Um von dieser Seite zu zitieren, "Eine Viele-zu-Viele-Beziehung ist wirklich zwei Eins-zu-viele-Beziehungen mit einer Verbindungs- / Verbindungstabelle".

So können Sie als eine Lösung einfach Ihre eigene Lösung wählen und Ihre ersten 2 Nachteile beheben, indem Sie Bildschirme / Dialoge für Tabelle 1 => 3 sowie 3 => 1 verwenden.

Keine perfekte Lösung, aber mindestens die benötigte Funktionalität

Lösung 3

Ähnlich wie Ihre eigene Lösung:

  1. Zeigen Sie eine Tabelle basierend auf Tabelle1 an mit:

    B. Spalte1 enthält Tabelle1 Elemente

    C. Spalte2 enthält eine Liste aller Elemente aus Tabelle3, die bereits mit diesem Element aus Tabelle1 verknüpft sind.

    Die Liste kann horizontal sein, wenn normalerweise nur wenige Elemente zugeordnet sind, oder vertikal (scrollbar), wenn horizontal zu breit.

    Der wichtige Teil ist, dass jedes angezeigte Element aus Tabelle 3 ein "Löschen" -Symbol (x) daneben hat, um das Entfernen schnell zu ermöglichen.

  2. Wählen Sie, aus welchem ​​Element aus Tabelle1 Sie Zuordnungen hinzufügen möchten.

    Es gibt 2 Möglichkeiten, dies zu tun - entweder fügen Sie ein Kontrollkästchen zu jeder Zeile in Ihrer Tabelle, und haben eine Schaltfläche mit der Bezeichnung "fügen Sie Beziehungen zu ausgewählten Zeilen hinzu" (Formulierung muss verbessert werden), oder einfach eine 3. Spalte in der Tabelle enthalten Schaltfläche / Link zum Hinzufügen von Beziehungen zu dieser einzelnen Zeile.

    Ersteres ist eine gute Idee, wenn der Benutzer wahrscheinlich häufig genau denselben Satz von Elementen aus table3 zu mehreren Zeilen aus table1 hinzufügt.

  3. Wenn Sie auf die Schaltfläche "Hinzufügen" / "Hinzufügen" klicken, wird eine filterbare Auswahlliste mit mehreren Elementen aus Tabelle 3 mit der Schaltfläche "Ausgewählt hinzufügen" angezeigt.

  4. Wie in Ihrer Lösung (siehe meine Nummer 2), ist dies a-symmetrisch. Sie sollten daher eine Spiegel-UI implementieren, um bei Bedarf von Tabelle 3 auf Tabelle 1 zu mappen.





many-to-many