Für die Web-UI-Gurus

Question

Ich erreichte endlich den Punkt in meiner Web-App, wo die Implementierung einfacher Anforderungen überwältigend wird. Ich schätze, es ist Zeit für ein schönes Refactoring oder einen einfachen Müll und Redo.

Hier sind die einfachen Anforderungen muss ich auf einem Tisch implementieren:

1) die Spalten sortierbar 2) einfrieren lassen Sie die 2 Kopfzeilen und ersten 3 Spalten

mich jetzt lassen erklären, warum es bekam so kompliziert. Die Tabelle ist keine einfache 2-dimensionale Tabelle. Die ersten drei Spalten sind Name, E-Mail-Adresse und Rolle, danach gibt es eine nicht definierte Anzahl von Spalten, die 3 Arten von Daten pro Tag repräsentieren. Mit anderen Worten, der Benutzer definiert, wie viele Tage er Daten haben möchte und jeder Tag wird durch 3 Spalten dargestellt, die wir Daten1, Daten2 und Daten3 nennen.

Eine ungelernten ASCII-Darstellung würde aussehen:

      01/01/1970     01/02/1970     total 
name email role data1 data2 data3 data1 data2 data3 data1 data2 data3 

toto t@t.com boss  23  test  54  10  test1 54 

Dies ist eine sehr schlechte Darstellung, aber das sollte man eine vage Vorstellung davon, was die Ausgabe aussehen sollte. Also muss ich die Daten in der ersten Zeile anzeigen, aber 3 Spalten Offset, dann die Header, wo die 3 ersten Header sind fixiert, aber die folgenden Spalten sind Wiederholungen der gleichen 3 Header, einen für jeden Tag und schließlich muss ich alle setzen die Daten an der richtigen Stelle ....

Im Moment bekomme ich dies richtig angezeigt (keine Sortierung und kein Einfrieren obwohl) mit einer JSP und eine benutzerdefinierte Datenstruktur von der Steuerung, die ich in verschiedenen durchlaufen Möglichkeiten, alle Elemente anzuzeigen.

Jetzt fangen Sie wahrscheinlich an, meine Kopfschmerzen zu verstehen ... mit so vielen Dingen, die nach Maß gemacht werden und vielleicht nicht unbedingt die richtige/effiziente Art, wie würde ich gehen, um diese neuen Funktionen hinzuzufügen? Sortieren und Einfrieren?

Ich habe einige Jquery-Datagrids und andere JavaScript-Komponenten angeschaut, aber keine von ihnen schien flexibel genug, um 2 Zeilen mit den Headern der zweiten Zeile basierend auf der ersten Zeile zu berücksichtigen.

Irgendeine Idee?

Danke.

Answer 1

Dies ist eine sehr benutzerdefinierte GUI, also würde ich eine ziemlich selbst entwickelte Lösung verwenden. Ich würde das Problem in ein paar Schritten aufteilen und den Browser für den Großteil der Arbeit verantwortlich machen (ergo JavaScript).

Zuerst möchten Sie Objekt die Daten darstellen. Basierend auf dem Problem würde ich vorschlagen, dass Sie eine dreistufige Objektstruktur haben: eine, um den Benutzer zu repräsentieren (jede Zeile in dem Beispiel); Ein untergeordnetes Array in diesem Objekt würde die Daten jedes Tages enthalten. und jedes Mitglied des Arrays wäre ein Objekt, das die vom Benutzer ausgewählten Zellen enthält. JSP wäre verantwortlich für das Schreiben dieser Datenstruktur, aber JavaScript würde es von dort nehmen. Hier ist, was die Konstrukteure aussehen würde:

function DayOfData(dateString, dataObject) { 
    this.date = Date.parse(dateString); //storing a Date is cleaner separation of presentation & data 
    this.dataCells = dataObject; 
} 
function User(name, email, role) { 
    this.name = name; //and so on 
    this.data = []; 
    this.addData = function(date, dataSet) { 
     this.data.push(new DayOfData(date, dataObject)); 
    } 
} 

Die Instanziierungen von JSP geschrieben (oder was auch immer in der mittleren Ebene ist) würde wie folgt aussehen:

var users = []; //a global to hold it all 
users[someId] = new User("foo", "foo@something.org", "boss"); 
users[someId].addData("1/1/1970", {"label 1": 23, "label 2": "test"}); 
//...and so on 

Beachten Sie die JSON-Objekt, das die Daten speichert, Zellen, die der Benutzer zur Anzeige ausgewählt hat. In diesem anonymen Objekt korreliere ich das visuelle Label mit dem Wert; Dies ist einfacher als das Erstellen eines weiteren untergeordneten Objekts, um die Beschriftung von einer eindeutigen ID zu abstrahieren.Du könntest diesen zusätzlichen Schritt machen, wenn es wirklich notwendig ist, aber es ist eine Ebene mehr in der Hierarchie, also denke ich, dass es am besten ist, die einfachere Route zu gehen.

(Natürlich würden Sie all dies richtig namespace wollen ... Ich benutze nackte globale Variablen, um die Syntax zu vereinfachen. Für ein wirklich robustes System würde ich auch private Mitglieder verwenden.)

Ich würde TrimPath in der Anzeigephase verwenden (nachdem JSP die Daten in dieser Struktur ausgeschrieben hat). Übergeben Sie einfach den Benutzer Array an eine Vorlage, die wie folgt aussehen würde (dies durch die Anzeige-Code in einer Tabelle erhalten platziert würde, nachdem TrimPath es verarbeitet):

<tbody> 
    {for user in user} 
     <tr> 
      <td>${user.name}</td> <!-- and so on --> 
      {for day in user.data} 
       {for datum in day} 
        <td>${datum}</td> 
       {/for} 
      {/for} 
     </tr> 
    {for} 
</tbody> 

Sie müssten eine leichte Variation auf, dies zu tun Muster, um die Kopfzeile zu schreiben, obwohl Sie das wahrscheinlich einfacher im serverseitigen Code tun könnten, da es kein dynamischer Teil der GUI ist. Um die Label-Zeile am oberen Ende der Tabelle "einzufrieren" (dies wird in einem THEAD-Element sein), verwende einfach CSS, um die Höhe des TBODY zu setzen, und setze dann overflow-y auf "scroll". Das sollte den gewünschten Effekt erzielen.

Um die Spalten neu zu sortieren, würden Sie das Array Benutzer (siehe Beschreibungen von Array.sort) basierend auf der Spalte, auf die der Benutzer klickt, neu sortieren. Löschen Sie dann den TBODY und verarbeiten Sie die Vorlage erneut mit TrimPath.

Das klingt kompliziert und beteiligt, aber es ist wirklich nicht. Sie möchten es vermeiden, das Layout zu ändern, daher ist die Trennung von Daten und Präsentation entscheidend. Eine Sammlung von Nur-Daten-JavaScript-Objekten, die mit TrimPath (oder ähnlichen) Templates wie oben beschrieben gekoppelt sind, erzielt ein gutes MVC-Muster und macht das Problem einfacher, indem es in diskrete Schritte unterteilt wird. Verwalten einer sortierbaren Tabelle von Daten (ganz zu schweigen von Daten, die horizontal in Hauptabteilungen gruppiert sind) - das wäre ohne gute MVC fast unmöglich.

Answer 2

Das beste UI-Framework, das ich bisher gesehen habe, ist ExtJs. Sie können besuchen: http://extjs.com/deploy/dev/examples/grid/array-grid.html, um ihr Raster in Aktion zu sehen. Es ist extrem einfach zu bedienen und zu unterstützen.