Mehrstufige Tabellen (innerhalb eines anderen, wenn angeklickt)
Szenario
Können sagen, ich bin Eigentümer eines großen Unternehmens mit vielen Filialen. Je nachdem, welche Rolle (Platz in der Organisation) habe ich in der Firma bin, werde ich anderen Zugang zu Daten. Es wird verschiedene Module und für diese konkrete Frage gibt es eine, wo die Benutzer zugreifen können, gehen Sie durch die täglichen Kosten und Umsatz.
(Wenn das legal ist oder nicht...egal, es ist nur ein Beispiel.)
Dem Benutzer dadurch erhalten Sie alle Daten über REST-APIs von back-End (Java-Anwendung) mit allen Daten für alle Filialen der Benutzer Zugriff hat. Der Benutzer sollte dann in der Lage sein, die Daten zu filtern, indem Sie verschiedene filter-Kombinationen. Die meisten relevant für meine Frage ist das Datum Intervall von Tagen.
Gibt es einige Diagramme zeigen Daten, die auf verschiedenen Ebenen und unten gibt es eine Tabelle wo ich will, der multi-level-Tabellen, daher meine Frage.
Bisher getan
- Habe ich zunächst Akkordeons, haben die Läden auf der Akkordeon-Gruppe, - Stufe und dann die nächste Stufe der Daten in einer Tabelle, in der Ziehharmonika-Körper. (Nur hart-codierte Daten im moment.) Das problem hier war, dass nach einer überschrift ist ein string, und nach einiger Diskussion hatten wir das Gefühl, das war keine gute Lösung, da die Position würde darin bestehen, Teile der Daten, die in einer Tabelle hätte getrennten Spalten. Es wäre daher schwierig sein, "columnize" die überschrift Daten übereinstimmen horizontal die verschiedenen "Speicher" (zwischen den Akkordeon-überschriften), wenn zusammengebrochen (und natürlich noch mehr chaotisch, wenn eine oder mehrere Akkordeon erweitert werden).
- Ersetzte ich die Akkordeons mit Tisch und ng-repeat. Erfolgreich aufgefüllt, die erste Tabelle mit Daten aus der Bildmarke-API mit JSON-Daten sowie bekam i18next arbeiten für die überschriften.
JSON
{
"metadata":{
"storesInTotal":"25",
"storesInRepresentation":"2"
},
"storedata":[
{
"store" : {
"storeId" : "1000",
"storeName" : "Store 1",
"storePhone" : "+46 31 1234567",
"storeAddress": "Some street 1",
"storeCity" : "Gothenburg"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "100000",
"salesTotal" : "150000",
"revenueTotal" : "50000",
"averageEmployees" : "3.5",
"averageEmployeesHours" : "26.5",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "25000",
"sales" : "15000",
"revenue" : "4000",
"employees" : "3",
"employeesHoursSum" : "24"
},
{
"date" : "2013-07-02",
"cost" : "25000",
"sales" : "16000",
"revenue" : "5000",
"employees" : "4",
"employeesHoursSum" : "29"
}
]
}
},
{
"store" : {
"storeId" : "2000",
"storeName" : "Store 2",
"storePhone" : "+46 8 9876543",
"storeAddress": "Big street 100",
"storeCity" : "Stockholm"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "170000",
"salesTotal" : "250000",
"revenueTotal" : "80000",
"averageEmployees" : "4.5",
"averageEmployeesHours" : "35",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "85000",
"sales" : "120000",
"revenue" : "35000",
"employees" : "5",
"employeesHoursSum" : "38"
},
{
"date" : "2013-07-02",
"cost" : "85000",
"sales" : "130000",
"revenue" : "45000",
"employees" : "4",
"employeesHoursSum" : "32"
}
]
}
}
],
"_links":{
"self":{
"href":"/storedata/between/2013-07-01/2013-07-02"
}
}
}
Visuelles Beispiel - JSFiddle
Überprüfen Sie die Werte in das Ergebnis-frame, oben Links in der Ecke. Versuchen Sie zum Beispiel, die Reihe mit der Speicher-ID 2000, dann 3000 und dann 3000 wieder zu sehen, wie sich die Werte ändern.
Aktuelle update von mein JSFiddle
Wollte Funktionalität
Wenn eine Zeile angeklickt wird (siehe JSFiddle), ich will eine Richtlinie oder etwas ausgelöst, gehen Sie und Holen Sie den zugrunde liegenden Daten (dayData) für den store geklickt und zeigen Sie alle Tage in der Datum-Intervall. I. e erweitern Sie die Zeile, und darunter eine neue Tabelle unter der angeklickten Zeile, die Sie auch verwenden sollten, ng-repeat, um alle Daten angezeigt, die ähnlich dem bereits existierenden, aber inline.
Frage
Also ich habe ja schon die Funktion des $ - index und auch die spezifischen Daten aus der angeklickten Zeile.
Welche Art von Richtlinie oder eine andere Lösung brauche ich zusätzlich, um die "Daten, wenn Zeile angeklickt" und präsentiert in einer Tabelle unter der angeklickten Zeile?
Ich nicht wollen, dass es in der DOM-die ganze Zeit, da es vielleicht viele dayData für jedes Geschäft und viele Geschäfte. (Und Paginierung später, aber auch so nicht in der DOM-die ganze Zeit.)
Dies bedeutet, dass ich in der Lage sein, um HINZUZUFÜGEN, wenn Sie auf eine Zeile, und wenn Sie die gleiche oder eine andere ENTFERNEN sich von den zuvor geklickt.
BEARBEITEN
InformationsquelleAutor der Frage Pixic | 2013-07-09
Du musst angemeldet sein, um einen Kommentar abzugeben.
War die Forderung, nicht füllen den DOM mit allen second-level-Tabellen und ich kam mit einer Lösung für Sie.
Zuerst habe ich versucht, erstellen Sie eine benutzerdefinierte Richtlinie, und ich habe es zum einfügen einer Zeile an der richtigen Stelle (unterhalb der angeklickten Zeile) und erstellt eine zweite Ebene Tabelle mit Header, aber konnte Sie nicht bekommen, es zu füllen mit Zeilen mit ng-repeat.
Da konnte ich keine Lösung finden, die arbeitete voll, ging ich zurück zu dem, was ich bereits geschaffen hatte, mit ng-show und suchte nach einer Lösung, wie es...und gibt es ein.
Anstelle der Verwendung von ng-show/ng-hide, Angular hat eine Richtlinie namens ng-switch.
In Stufe eins
...und dann in der zweiten Ebene, d.h. die zweite tr
, in dem Sie die zweite Ebene der ng-repeat.
Hier ist eine neue JSFiddle.
Untersuchen Elemente, und Sie werden sehen, dass es ein Kommentar ist Platzhalter für jedes "zusammengebrochen" level-2-Tabelle.
UPDATE (2014-09-29)
Auf Wunsch auch die Erweiterung und die einstürzung der Stufe 3, hier ist eine neue JSFIDDLE.
HINWEIS! - Diese Lösung haben alle Informationen, die in der DOM-zu allen Zeiten, also nicht als die frühere Lösung, die nur Hinzugefügt, eine notation, wo die Informationen sollten auf Anfrage Hinzugefügt werden.
(Kann ich nicht nehmen Kredit dieser eine aber, da mein Freund Axel Gabel mine und dann Hinzugefügt die Funktionalität.)
InformationsquelleAutor der Antwort Pixic
Ich denke, dass eine bessere Lösung ist die Verwendung der ng-repeat-start-und ng-repeat-end-Richtlinien über die tr-Elemente eher als die Verwendung von ng-repeat auf der tbody (in diesem Fall rechtfertigen nicht mehr als ein einziger tbody).
Haben einen Blick hier:
PLNKR
InformationsquelleAutor der Antwort Alon Segal
Habe ich nicht genug Ruf noch zu kommentieren, also bin ich nach oben in einer Antwort mit einer zusätzlichen Funktionalität, die Frage, die ich über gekommen sind. Ich verwendet Pixic Struktur erfolgreich wie ich mag, der DOM ist nicht verschmutzt mit der second-level-Daten/Tabellen, bis Sie angezeigt werden und es ist alles perfekt funktioniert.
Bis ich gebeten wurde, zu erlauben, dynamische Sortierung der top-level-Tabelle. Kein problem - ich kann die Sortierung der top-level-Tabelle. Das problem ist, ich habe nicht in der Lage zu kommen mit ein Weg, um den second-level-Tabelle (dh versteckt ) synchronisiert, und "verschieben" mit der Art der top-level-Tabelle. Dies ist ein Anzeige-Problem nur. Die zugrunde liegenden Daten korrekt verbunden mit dem top-level, aber das display ist mehr als versaut es zeigt die ursprünglichen "indiziert" - Reihe, wie die zweite Ebene der Tabellen nicht neu Sortieren mit der übergeordneten Zeile.
Das einzige, was ich mit oben kommen kann ist dynamisches einfügen der zweiten Ebene von html-Code aus dem controller auf den ausbau einer Reihe, aber Frage mich, ob jemand anderes hatte andere Ideen. Ich habe versucht, ng-repeat-start-und ng-repeat-end (auf einer versteckten Dritten tr-Tags, um alle Elemente zu denken, die zu halten, sollten alle Elemente in der tbody zusammen, und auf eine versteckte tbody), aber das hat nicht funktioniert.
Edit:
Wie gewünscht, habe ich begonnen, eine andere Frage: Multi-level-Tabellen (innerhalb einer anderen, wenn geklickt) und die Dynamische Sortierung der Top-Level-Tabelle
InformationsquelleAutor der Antwort RobG