it-swarm.com.de

Wie kann man Schaltflächen / Balken neben einer Tabelle mit dynamischer Größe anordnen?

Ich habe eine Datentabelle mit einer dynamischen Anzahl von Zeilen. Es könnte keine, eine oder Hunderte haben. Die Breite ist auf der Webseite festgelegt und hat eine feste Anzahl von Spalten: 9. Außerdem habe ich derzeit fünf Aktionsschaltflächen, darunter zwei, mit denen alle Zeilen ausgewählt oder abgewählt werden, eine Aktualisierung, ein Löschen und eine weitere Aktion. Außerdem verwende ich jQuery 1.6.4, sodass mir viele Funktionen für Dom und Interaktionen zur Verfügung stehen.

Meine Frage ist, wie die Schaltflächen für den Benutzer am besten gestaltet werden können. Derzeit sind die Schaltflächen auf der linken Seite der Seite vertikal gestapelt und in der Mitte der Seite zentriert. Ich habe mich jedoch gefragt, ob es eine bessere Möglichkeit gibt, sie zu gruppieren.

Es sieht für mich klobig aus, aber ich bin mir nicht sicher, welche anderen Designs ein besseres Layout wären.

Hier ist ein Bild, aber ignorieren Sie die Kontrollkästchen, die Schaltfläche und das Dropdown-Menü in der Tabelle selbst. Es handelt sich nur um Daten in der realen Tabelle.

enter image description here

6
user9533

Ich habe persönlich keine Studien darüber gesehen oder gefunden, welche Platzierung von Aktionen, die Interaktionen mit einem Datenraster steuern, tatsächlich besser ist. Meine persönliche Meinung ist, die Steuerelemente immer oben im Raster zu gruppieren und so zu positionieren, dass sie im selben Kontext wie das Raster zu sein scheinen. Dies sollte angesichts der begrenzten Anzahl von Aktionen, die Sie ausführen, in Ordnung sein.

Stellen Sie sich das als eine weitere Symbolleiste für die Interaktion mit einem Inhaltsbereich vor. Berücksichtigen Sie auch die Tatsache, dass Sie gerade beim Schreiben Ihrer Frage eine verwendet haben.

Für Ihr spezifisches Szenario würde ich sofort versuchen, die Schaltflächen Alle auswählen und Auswahl aufheben zu entfernen. Konventionell würde ich erwarten, dass dies über ein Kontrollkästchen im Raster möglich ist. Ich würde auch die Schaltfläche aktualisieren Als Symbol oben rechts im Raster platzieren - im Grunde genommen in der Kopfzeile. Alles in allem würde ich Folgendes in Betracht ziehen:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

4
GotDibbs

Es scheint, dass die Tische den gesamten Platz benötigen, den sie bekommen können. Ich würde die Schaltflächen als schwebende Ebene platzieren und ausblenden und nur eine halbtransparente Menüschaltfläche entweder oben oder seitlich auf dem Bildschirm anzeigen. Mouseover sollte das vollständige Menü anzeigen und wieder oben auf der Tabelle schweben. Dies funktioniert auch auf Touchscreens.

3
frankd