Warum verschachtelte ng-Grid-Höhe nicht funktioniert?
Ich habe ein verschachteltes ng-Gitter.
%Vor%Siehe Plunker Ich muss das gesamte verschachtelte Datenraster auf einen Blick zeigen. Ich muss die ng-Grid-Daten auf einen Blick zeigen (ohne Vertical scroll). Die verschachtelte Rasterhöhe funktioniert jedoch nicht. Mein Wunschgitter ist wie folgt ....
2 Antworten
ng-grid wurde nicht für verschachtelte Raster entworfen: Oder sogar dynamische Höhe Zelle für Zelle
Wenn Sie die ng-grid-Vorlage ui-grid.html sehen, sehen Sie, dass die Größe in Pixeln festgelegt ist:
siehe github
Diese CSS -Klasse ist in die Vorlage eingebettet, sodass kein Platz zum Überschreiben in "auto" bleibt. Da Gitter mit Div's und nicht mit Tables erstellt werden, sind Tabellenbeziehungen zwischen Zeilen und Spalten schwierig, wenn jedes cell-div frei ist, sein eigenes Verhalten zu bestimmen. Daher sind verschachtelte Grids eine echte Herausforderung.
Sie CAN erhalten den gewünschten Effekt mit einem Hack, der verschachtelten Gittern ähnelt :
siehe plnkr
Reduziertes Gitter
Hinweis: Die Caret-Einträge wurden hinzugefügt, um anzuzeigen, dass die übergeordneten Zeilen erweiterbar sind. Ich habe keine Logik hinzugefügt, um Einträge für Elternzeilen auszublenden, die keine Kinder haben.
Erweitertes Gitter
siehe plnkr
Ändern Sie Ihren JSon , um eine Spalte für Test, Name und Ergebnis einzubeziehen. Verwenden Sie Spalten für Testnamen oder Student-Namen / Scores. Verwenden Sie die Eltern-ID für Kinder und geben Sie den Eltern IDs:
%Vor% In Grid-Optionen legen Sie rowTemplate fest, um die ng-show -Direktive für die untergeordneten Elemente im Feld expanded
Fügen Sie eine ToggleSubReport-Funktion hinzu, um die Anzeige der eingebetteten Daten zu verwalten
%Vor%siehe plnkr
:
:
Folge für Amin Uddin (Original Poster)
1) Verschachtelte Raster sind nicht möglich:
Das war deine Hauptfrage und dein Ziel. Das ist es, worauf Sie ein Kopfgeld setzen. Aber wie Sie sehen können von github Quelle für Rasterzeilenhöhe (in Pixel definiert) und Antworten von ng-Grid Mitwirkenden, dies ist noch keine Option vorstellen. Die Zellenhöhe von NG-Grid ist nicht wirklich dynamisch, weil ng-grid um die übereinstimmenden divs Zeilen herum entworfen wurde statt eines table (das natürlich Zeilen und Zeilenzellen natürlicher gestalten kann).
2) Ein Sub-Grid der Art, wie ich es gezeigt habe, kann wirklich ausgeklügelte Master-Child-Beziehungen aufnehmen: Sie können Arrays zusammenführen, bevor Sie diese serialisieren (oder parsen JSON Strings zu Arrays, dann füge sie zusammen). Sie müssen die Felder, die ich für Master-Detail verwendet habe, neu definieren von der einfallslosen id/parentid I, die ich verwendet habe, zur PK/FK der 2 Listen.
Es ist nur hack das Beispiel für jede Zeile haben die gleichen sub rowcount.
%Vor% %Vor%Bearbeiten: Wenn die Hauptreihe eine andere Unterreihenanzahl hat, funktioniert sie nicht. Ich habe nur eine Idee. Muss ui-grid fork sein und auf Autohöhe umgestalten. Das offizielle UI-Grid ist design fixed height bei gridTemplate.html und benutzt absolute top position.
Tags und Links javascript angularjs ng-grid