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

  1. 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).
  2. 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

Neue, aktualisierte JSFiddle.

Kommentar zu dem Problem - Öffnen
Ich kann auch hinzufügen, dass ich versucht habe auf der Suche nach ähnlichen Fragen hier auf StackOverflow... angularjs-outer-ng-repeat-not-to-register-watches-on-inner-ng-repeat - Scheint ähnlich, aber wenn ich es richtig verstehe, ist das innere ng-repeat wird immer das tun, wiederholen Sie und haben Sie alle inneren "für-alle" äußeren in den DOM... Kommentarautor: Pixic
Ich denke ich habe eine Lösung gefunden, die funktionieren könnte. In control-and-directive-use-with-angularjs gibt es eine ähnliche problem Beschreibung, wo wollte ist die Funktionalität nach unten schieben und die bekommen wir einige Daten in den edit-Modus. Die ähnlichkeit liegt in einer ng-repeat Schiebetüren, die unten eine Richtlinie, die steuert, über ein Attribut. Ich denke, ich könnte versuchen, das gleiche tun, aber statt übergeben die "id" der Zeile und dann die entsprechenden JSON-Daten an Kind-Bereich und dann in eine Tabelle in die Schieberegler. Funktionieren könnte vielleicht. Kommentarautor: Pixic
Ich hatte ein sehr ähnliches problem (in Bezug auf Ihre Schritt 2), wenn ich verstehe dein problem richtig. Es ist eine vernünftige Lösung gibt, dass ich am Ende mit: stackoverflow.com/questions/15545852/... Kommentarautor: marko
Sieht aus wie Sie wollte die gleiche Lösung. Jedoch nicht der DOM gefüllt mit einer Menge von Daten aus dem verschachtelten ng-repeat? (Ich will nicht gerade, es zu verbergen, in die DOM. Sollte davon ausgeschlossen werden, da mein Modul ist zwar Recht schwer mit allen Arten von filtern, Diagrammen und der multi-level-Tabellen. Ich erwarte, dass ein Benutzer bis zu 2k "speichert" und für eine "leere Suche "filter", dann für jede Filiale brechen und in der Lage sein zu zeigen, sehr lange Datum-Intervall, das heißt, es könnte 2k (stores) * 30 Zeilen (Tage) für einen Monat Datum Intervall. Will nicht alle in den DOM. Nur Last days (level2), wenn Sie auf klicken. Kommentarautor: Pixic
Yep, ich endete damit, ein Ruf und einsetzen dom, wenn nötig. Ich nehme das Risiko, dass der Benutzer nicht dort sitzen und auf 2k Zeilen, obwohl :). Ich denke ich habe einen "detail"-Richtlinie oder sowas, aber ich glaube nicht, dass das notwendig ist. Kommentarautor: marko

InformationsquelleAutor der Frage Pixic | 2013-07-09

Schreibe einen Kommentar