2016-06-27 7 views
0

Ich benutze Angular Ui-grid .Treating, um Multi-Level-Nesting in diesem zu erreichen. Einige haben das Problem bereits in uiGrid github angesprochen. Aber diese Lösung scheint nicht zu funktionieren.Angular Ui-Grid Multilevel Verschachtelung

Ich habe die JSON wie this geändert. Ich versuche ein verschachteltes Subgitter zu bilden.

Unter meinen Code

$scope.gridOptions = { 
    expandableRowTemplate: 'expandableRowTemplate.html', 
    enableGridMenu: true, 
    expandableRowHeight: 150, 
    paginationPageSizes: [5, 10, 15], 
    paginationPageSize: 5, 
    //subGridVariable will be available in subGrid scope 
    expandableRowScope: { 
     subGridVariable: 'subGridScopeVariable' 
    } 
    } 

    $scope.gridOptions.columnDefs = [ 
    { name: 'id', enableHiding: false }, 
    { name: 'name' }, 
    { name: 'age' }, 
    { name: 'address.city' } 
    ]; 

    $http.get('http://private-7a7085-getfriends1.apiary-mock.com/getfriends') 
    .success(function (data) { 
     for (i = 0; i < data.length; i++) { 
     //for(i = 0; i < 50; i++){ 
     data[i].subGridOptions = { 
      columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }], 
      data: data[i].friends, 
      expandableRowTemplate: 'expandableRowTemplate1.html', 
      enableGridMenu: true, 
      expandableRowHeight: 150 
     } 

     for (j = 0; j < data[i].friends.length; j++) { 
      data[i].subNestedGridOptions = { 
      columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }], 
      data: data[i].friends[j].friends 
      } 
     } 
     } 
     $scope.gridOptions.data = data; 
    }); 

und zweiten Ebene verschachtelte HTML (expandableRowTemplate1.html) ist sieht

wie
<div ui-grid="row.entity.subNestedGridOptions" style="height:150px;"></div> 

Wenn ich Daten an ui-Gitter passieren für die zweite Ebene verschachtelt Gitter, es wirft nicht definiert.

Hat jemand bisher Erfolg, um Expandable UI Grid mit mehr als 2 oder 3 Ebenen zu implementieren. Wenn ja, teilen Sie bitte Plocker oder Geige oder detaillierte Erklärung wäre wirklich hilfreich!

Antwort

0

Ich habe das jetzt funktioniert. Ich nehme an, Sie haben die richtigen Daten erstellt, um auf 3 Ebenen zu binden. Ich gehe davon aus, dass Sie auch ein Raster mit zwei Ebenen haben (die Zeilen des übergeordneten Rasters werden erweitert, um die untergeordneten Raster anzuzeigen). Hier sind die wichtigsten paar Stücke Ich habe diese Arbeit zu bekommen:

Die oberste Ebene Gitter haben die Richtlinie ui-Grid-erweiterbar im div-Tag, das es definiert. Dies befindet sich in meiner HTML-Ansicht.

Das Top-Level-Grid definiert ein expandableRowTemplate in seinen gridOptions (angularJS).

$scope.gridThreeLayer = { ........ 
expandableRowTemplate: '..your path.../expandableRowTemplate.html' } 

Die oben expandableRowTemplate Niveau Raster wird ein div-Tag enthalten, das eine andere "ui-grid" definiert und hat die Richtlinie "ui-grid-expandierbare".

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable></div> 

Das zweite Ebene Gitter hat seine subGridOptions und columnDefs on the fly gebaut, wenn die Daten in der AngularJS gebunden wird (aus einem $ http.get() für mich). Zu diesem Zeitpunkt benötigen Sie eine expandableRowTemplate Eigenschaft an dieser 2. Ebene Raster zu spezifizieren, die den 3. Ebene Raster zu erweitern und zeigen erzählt.

for (i = 0; i < response.data.length; i++) { 
response.data[i].subGridOptions = { ..... 
columnDefs: [ ............], 

data: response.data[i].IP, // note that this is my 2nd level of data objects - yours will differ 
expandableRowTemplate: 'AngularApp/Templates/MultiLevelTemplate.html 

Die expandableRowTemplate der 2. Ebene grid braucht ein div-Tag mit einem „ui-grid“ zu definieren, das Gitter Anweisen für jede Zeile eine verschachtelte Raster zu machen. Es benötigt KEINE Anweisung zum Erweitern (aber Sie können eine hinzufügen, um 4 Ebenen tiefer zu gehen). Meine heißt MultiLevelTemplate.

<div ui-grid="row.entity.subGridOptions"></div> 

Jetzt im gleichen AngularJS Block, wo Sie jede Zeile des gridOptions bauen und columnDefs on the fly, müssen Sie auf eine andere Ebene von Iterationen durch diese Ebene der Daten gehen. Dies ermöglicht Ihnen, die subGridOptions und columnDefs für das Raster der dritten Ebene zu definieren. Sie befinden sich also in der "i" -Schleife und starten eine "x" -Schleife darin. Beachten Sie, dass beim Festlegen der Datenquelle meine eigenen 3 Ebenen von Datenobjekten verwendet werden. Sie müssen Ihre eigenen dort verwenden.

for (x = 0; x < response.data[i].IP.length; x++) { 
response.data[i].IP[x].subGridOptions = { 
columnDefs: [........], 
response.data[i].IP[x].subGridOptions.data = response.data[i].IP[x].BOM; // my data 

Wenn Sie alle oben genannten tun, sollte es funktionieren richtig, wenn Ihre Daten eingestellt ist richtig.

+0

können Sie bitte Plunker für Ihr Beispiel erstellen – ShaMoh