Die beste Möglichkeit, dies in einem Formular anzuzeigen?

Question

Auf meiner Website habe ich zwei Tabellen, die mit einer Pivot-Tabelle verknüpft sind. Was ich versuche, ist, einen Benutzer die Beziehungen zwischen den beiden Tabellen aktualisieren zu lassen (Einfügen und Entfernen von Datensätzen aus der Pivot-Tabelle). Ich habe kein Problem damit in PHP, aber was mich interessiert, ist die Art, wie das Formular im Webbrowser des Benutzers angezeigt wird.

Die Art, wie ich es jetzt mache, ist eine Tabelle voller Checkboxen, wobei jede Checkbox einer Beziehung zwischen der Spaltenüberschrift und der Zeilenüberschrift entspricht (die die Datenbanktabellen darstellen). Der Benutzer kann das Kontrollkästchen aktivieren, um PHP mitzuteilen, dass ein Datensatz für diese Beziehung vorhanden sein soll (ein nicht markiertes Feld bedeutet, dass keine Beziehung besteht). Allerdings kann diese Methode ziemlich hässlich werden (Spalten, die sich außerhalb von Seitengrenzen erstrecken), wenn es ziemlich viele Spalten und ziemlich viele Zeilen gibt, und es ist ein wenig mühsam, sie zu verwenden.

Was wäre eine gute Möglichkeit, dieses Formular dem Benutzer anzuzeigen?

Answer 1

Da dies mehr über die Benutzeroberfläche der Anwendung als alles andere ist, glaube ich nicht, dass es eine einzige richtige Antwort geben wird, wie es auf eine Kombination von was funktioniert (was schwierig ist, ohne zu sein) in der Lage, Dinge zu sehen/zu spielen) und Ihre persönlichen Vorlieben.

Ein paar Progressionen würde ich durchlaufen:

• Visuelles Feedback
  Stellen Sie Tabelle interaktive durch visuelle Rückmeldung an den Benutzer. Versuchen Sie auf der grundlegendsten Ebene, den Zellen eine Farbe hinzuzufügen - eine Farbe für diejenigen, die überprüft werden. Dies ermöglicht dem Benutzer schnell zu sehen, welche Optionen "im Spiel" sind. Es kann sein, dass das Umgekehrte besser funktioniert (Hervorhebung von unmarkierten Zellen) - aber das kommt darauf an, was die Form gerade tut/beabsichtigt zu zeigen - dh wenn es wichtiger ist klarzustellen, dass der ungeprüfte Zustand schlecht ist, möchten Sie das vielleicht rot.

Die nächste Ebene besteht darin, eine dynamische Hervorhebung hinzuzufügen. Wenn die Tabelle sehr groß ist, möchten Sie möglicherweise die Zeilen- und Spaltenüberschriftenzellen hervorheben, die der Zelle unter dem Cursor entsprechen. Sie können auch die gesamte Zeile/Spalte markieren (Fadenkreuzstil), damit der Benutzer "Companion" -Zellen untersuchen kann.

• Dynamische Tabelle
  Etwas mehr beteiligt wäre ein wenig Würze zu Ihnen Tabelle hinzuzufügen. Verwenden Sie anstelle von Zeilen und Spalten von Kontrollkästchen grafische Symbole/Bilder. Sie sind viel einfacher für das Auge und ermöglichen Ihnen wahrscheinlich eine bessere Kontrolle über die Abmessungen des Tisches. Die gesamte Benutzeroberfläche könnte dann über Javascript und On-Click erfolgen - was heutzutage ziemlich einfach ist, wenn Sie etwas wie JQuery einsetzen.

• Split die Schnittstelle
  Dies basiert auf der Annahme, dass alle Kombinationen der Tabelle A & Tabelle B sind nicht eingerichtet in der Pivot-Tabelle zu beginnen - nur wenn ein Benutzer A.item zu beziehen versucht mit B.item
  Anstatt alle möglichen Kombinationen anzuzeigen, zeigen Sie nur diejenigen an, die aktiv sind (haben Sie einen Eintrag in der Pivot-Tabelle). Stellen Sie dem Benutzer dann ein zweites Formular (wahrscheinlich zwei Dropdown-Listen) zur Verfügung, mit dem er einen Datensatz aus der ersten Tabelle mit der zweiten verknüpfen kann.

• Filter die Schnittstelle
  Geben Sie den Benutzer die Möglichkeit, die Schnittstelle zu filtern - von einem des Tisch nur die Beziehungen zwischen einem einzelnen Datensatz zu zeigen. Dies hätte den Effekt, dass Sie Ihre Tabelle auf eine einzelne Spalte beschränken, was die Anpassung im Design etwas einfacher macht.

Allerdings würde ich immer noch erlauben, die Benutzer auf die „Großansicht“ aller Datensätze zu erhalten, da, je nachdem, was Sie tun, wie Blick sehr nützlich sein kann, um schnell Querverweis viele Datensätze .

Answer 2

Vielleicht ein Datenraster verwenden? Diese sind sehr leistungsstark:

• jQuery TableFilter (klicken Sie auf „Go“)
• ExtJS Grid Filter (klicken Sie auf einen kleinen Pfeil nach unten ▼, die in der Nähe der Spaltenname erscheint)

Es kann eine zeitaufwendig Aufgabe Mach es durch Ajax, obwohl.