UI-Design-Herausforderung für diese Situation

Question

Screenshot Mockup:http://tinypic.com/r/y2qex/5

Problem: Ich habe eine Tabelle, die 53 Spalten; eine für jede Woche des Jahres, plus eins mit dem Benutzernamen. Je nach Anzahl der Benutzer für jeden Bereich werden zwischen 10 und 80 Zeilen angezeigt.

Die Anwender müssen für jede Woche ein „Flag“ gesetzt werden, wie Jahresurlaub, Ausbildung usw.

Im Moment habe ich eine Tabelle, die in jeder Zelle ein Auswahlfeld hat. Das Problem ist, dass es für 5 Zeilen funktioniert, aber sobald ich anfange, mehr als 20 Zeilen zu bekommen, öffnet der Browser die Seite nicht, weil es einfach zu viele Auswahlfelder gibt.

Welche neuen Auswahlen ausgewählt werden, muss abgefragt werden können, damit ich sie in meiner DB speichern kann.

Was ich suche sind einige allgemeine Ideen (d. H. Kein spezifischer Code), wie ich dieses Problem besser lösen kann. Sobald ich eine gute Idee habe, werde ich eine genaue Codierung ausarbeiten.

Meine Ideen so weit: - Machen Sie alle Zellen nur Text, mit der aktuellen Auswahl, dann haben eine ‚Bearbeiten‘ Option neben jedem Benutzer, die ihre Reihe als modales Fenster öffnet, die editierte werden kann - Nehmen Sie alle Zellen ein "onClick" -Ereignis haben, was dazu führt, dass beim Klicken eine Dropdown-Liste erzeugt wird

Aber ich würde gerne hören, wie andere Leute dieses Problem angehen/lösen könnten?

Answer 1

Wenn die Optionen für viele Auswahlfelder gleich sind, können Sie einen Datenlistener für alle verwenden, dies wäre leistungsfähiger, und ich schätze, Sie können mehr pro Seite haben. Leider ist dies eine HTML 5-Funktion, daher wäre es nicht rückwärtskompatibel mit allen Browsern.

http://www.w3schools.com/html5/tag_datalist.asp

Other than that, könnten Sie pagenating Tisch betrachten, wenn es über eine bestimmte Anzahl von Spalten wird. Oder wie ein Tumrum-Ding, bei dem mehr Spalten über Ajax geladen werden, wenn sie weit genug nach rechts scrollen. Deine Idee sollte auch funktionieren.

Answer 2

Vielleicht möchten Sie mit einem Kalender-Funktion aussehen, ich bin sicher, es gibt eine Tonne Javascript-Kalender da draußen. Ich hatte in letzter Zeit auch viel Erfolg mit DataTables. Sie können DataTables + jEditable verwenden, um einen Klick zu erstellen, um die Tabellendarstellung zu bearbeiten. Wenn Sie darauf klicken, wird ein Auswahlfeld angezeigt, ansonsten wird jedoch nur Text angezeigt.

Answer 3

Vielleicht könnten Sie ein einzelnes verstecktes Auswahlfeld auf der Seite haben und es in einer Zelle anzeigen, wenn Sie darauf klicken, und das Ergebnis des Klicks verarbeiten, indem Sie ein Datenattribut in die Zelle schreiben und vielleicht gleichzeitig XHR machen?

Sie könnten auch nur ein paar versteckte Formularelemente haben, aber das wäre ekelhaft.

Implementierungsweise könnten Sie es mit einem einzelnen Ereignishandler tun, der an die Tabelle angehängt ist, wobei jede Zelle Datenattribute hat, die den Namen und die Woche repräsentieren.

Wie auch immer, sollte dies performant sein, obwohl es eine zusätzliche 20 oder so Zeilen von js erfordern würde.

Answer 4

Vielleicht für Sie so etwas wie dies funktionieren könnte:

var td=document.getElementsByTagName('td'); 
for(var i=0; i<td.length; i++) 
{ 
    td[i].id='cellID_'+i; 
    td[i].onclick=function() 
    { 
     //make menu appear on this element id 
    } 
}