Erweiterbare Zeilen mit verschachtelten erweiterbaren Werten?

Question

Meine Daten enthalten eine Spalte mit dem Wert im JSON-Format. Ich möchte zwei Dinge erreichen:

1. Erweitern Sie jede Zeile, so dass ihre Werte aufgelistet sind.
2. einen bestimmten Wert erweitern so, wenn sein Wert im JSON-Format ist, werden die Schlüssel/Werte auch von Element in der Liste in einer verschachtelten Liste präsentiert werden 1.

Zum Beispiel:

Dies sind 3 verschiedene Ergebnisse:

Und dies ist das erste Ergebnis erweitert:

Ich würde Ihre Hilfe zu schätzen wissen.

Answer 1

Ich habe gerade Ag-Grid zum ersten Mal implementiert und habe einen ähnlichen Anwendungsfall wie oben. Da ich nur die kostenlose Version habe, folgte ich dem Datei-Browser-Beispiel, das geschachtelte Zeilen implementiert, indem die Daten vor dem Grid (d. H. Eine Model -> ViewModel-Umwandlung) gestaltet werden.

Die Form das Gitter muss, ist so ziemlich die Standard-Darstellung von hierarchischen Daten, Sie benötigen nur einen Array ‚Kinder‘ der verschachtelten Daten (das aus dem Filebrowser Beispiel genommen):

{ 
     folder: true, 
     name: 'D:', 
     children: [ 
      {name: 'Game of Thrones s05e01.avi', size: '1034 mb', type: 'Movie', dateModified: '13/03/2014 10:14'}, 
      {name: 'The Knick s01e01', size: '523 mb', type: 'Text Document', dateModified: '27/11/2012 04:12'}, 
      {name: 'musicbackup1.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'}, 
      {name: 'musicbackup2.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'} 
     ] 
    } 

Hinweis , können Sie nicht verschachtelte Spalten vor der Spalte haben, die die verschachtelten Zeilen (eine Eltern-Kind-Darstellung) umschaltet.

Informationen zum Umwandeln Ihrer JSON-Eigenschaften in ein Array von Schlüssel/Wert-Paaren finden Sie in diesem StackOverflow-Artikel Convert object's properties and values to array of key value pairs.

Die Schritte verschachtelten Reihen zu ermöglichen, zu nehmen sind:

1. cellrenderer Eigenschaft auf die Spalte defn hinzufügen, die die verschachtelten Zellen öffnen geht. Möglicherweise denken Sie, dass Sie auch die cellRendererParams-Eigenschaft benötigen, aber das ist nur das Hinzufügen von Nicht-Text-Inhalt in die Zelle.

   { headerName: "Name", field: "name", width: 250, 
       cellRenderer: 'group' 
   }, 
   

2. Implement getNodeChildDetails im gridOptions Struktur. Beachten Sie, dass "Datei" unten die Knotendaten sind, und "Datei.Folder" ist ein Flag für die Daten (nicht für die Anzeige), das diese Funktion anweist, wenn verschachtelte Zeilen angezeigt werden sollen.

   getNodeChildDetails: function(file) { 
       if (file.folder) { 
        return { 
         group: true, 
         children: file.children, 
         expanded: file.open 
        }; 
       } else { 
        return null; 
       } 
   }, 
   

3. hinzufügen ein Symbol der gridOptions Struktur widersprechen.

   icons: { 
       groupExpanded: '<i class="fa fa-minus-square-o"/>', 
       groupContracted: '<i class="fa fa-plus-square-o"/>' 
   }, 
   

Ein möglicher Fehler

Ich versuchte getRowHeight Funktion (in gridOptions), aber sofort der verschachtelte Reihe Toggle zu implementieren aufgehört zu arbeiten. Wenn ich die Ursache finden kann, werde ich es später hier veröffentlichen.