2015-11-17 30 views
5

Ich verwende das Raster von http://ui-grid.info/ in einem Projekt. Ich habe ein hierarchisches Raster erstellt, das gut funktioniert, aber wenn ich einen Export mache, werden nur die Daten aus dem Gitter der obersten Ebene exportiert.Kann ein Subgitter im angularen UI-Raster exportiert werden

Dies ist von Entwurf und ist Standard-Funktionalität für das Raster, so dass es keinen Sinn hat, mir einen Beispielcode. Jedes Beispiel von http://ui-grid.info/docs/#/tutorial wird tun.

Gibt es eine Möglichkeit, das Untergitter (vorzugsweise sowohl das Hauptgitter UND das Untergitter zusammen, wie sie im Gitter erscheinen) zu exportieren?

+0

Haben Sie Daten-Tabellen versucht. https: //www.datatables.net/Es ist jquery basiert und Sie haben viele Erweiterungen in jq, die dies tun. Mehr, Datentabellen sind sehr reaktionsschnell. ng UI-Grid haben ihre lib unnötig unnötig kompliziert gemacht. – Gary

Antwort

3

Leider ist die Antwort nein.

Wie Sie sehen können here die Funktion getData iteriert durch alle Zeilen und dann durch alle Spalten, zusätzlich zu einer Reihe von extractedFields den Spalten die in einer Reihe von extractedRows extrahiert und aggregiert werden.

Das bedeutet, dass keine anderen Daten als die in gridOptions 'columnDef definierten Daten gelesen, konvertiert und extrahiert werden.

Standardmäßig werden Subgrid-Informationen in einer Eigenschaft der subGridOptions einer beliebigen Zeilenentität gespeichert, auf diese Eigenschaft wird jedoch nie innerhalb der Exportfunktion zugegriffen.

Die Motivation hinter diesem Verhalten ist, dass das erweiterbare Grid-Feature noch immer in einem Alpha-Stadium ist. Daher ist es nicht zwingend erforderlich, dies in anderen Features zu unterstützen.

Darüber hinaus Zugabe subgrid zu einem CSV könnte sehr schwierig sein, zu entwerfen, wenn wir eine allgemeine Lösung (zum Beispiel zur Verfügung zu stellen wollten ich glaube, nicht einmal würde es CSV-Standard kompatibel sein, wenn Sie unterschiedliche Anzahl von Spalten haben in das Hauptgitter und in Subgrids).

Das heißt, ui-Grid ist ein Open-Source-Projekt, also, wenn Sie ein funktionierendes Design im Auge haben, zögern Sie nicht, eine Diskussion über die project gitHub page zu öffnen oder, noch besser, wenn Sie eine Arbeit (und getestet) Lösung und erstellen Sie eine Pull-Anfrage, noch besser!

+0

Um die exportierte Datei nach csv-Standard zu bestätigen, belegt jedes Grid möglicherweise einen separaten csv. Die Zelle des Hauptgitters, die aus Subgrids besteht, enthält eine Verbindung zur externen CSV-Datei des Subgrid ... nur ein wenig zu teilen. – gm2008

+0

Wie denken Sie, Links könnten sein? Ich kann nicht ernsthaft an einen Standard Weg denken, um es zu tun – imbalind

1

Ich schaffte es, es zum Laufen zu bringen, obwohl, wenn ich die Zeit hätte, ich es ein bisschen besser machen würde, als was ich getan habe, indem ich wirklich einen Zweig des Codes schuf und es richtig machte, aber gegebenen Zeitbeschränkungen, was ich habe gut funktioniert.

FYI, hier ist die Art, wie ich es immer am Ende zu tun, was ich wollte:

In meinen Rasteroptionen, drehte ich die CSV-Exportoptionen im Grid-Menü aus (weil ich nur die Änderungen implementiert habe für PDF).

Ich habe eine Kopie von exporter.js erstellt, nannte es custom.exporter.js und änderte meine Referenz auf die neue Datei.

In custom.exporter.js habe ich eine Kopie der Funktion getData erstellt und getGridRows benannt. getGridRows ist das gleiche wie getData, außer dass es nur das rows-Objekt ohne all die Sachen zurückgibt, die die Spalten usw. bekommen. Im Moment kodiere ich es, um mit einem bekannten Satz von Spalten zu arbeiten, also brauche ich das alles nicht.

Ich veränderte die pdfExport Funktion wie folgt zu sein:

pdfExport: function (grid, rowTypes, colTypes) { 
       var self = this; 

       var exportData = self.getGridRows(grid, rowTypes, colTypes); 

       var docContent = []; 

       $(exportData).each(function() { 
        docContent.push(
         { 
          table: { 
           headerRows: 1, 
           widths: [70, 80, 150, 180], 
           body: [ 
           [{ text: 'Job Raised', bold: true, fillColor: 'lightgray' }, { text: 'Job Number', bold: true, fillColor: 'lightgray' }, { text: 'Client', bold: true, fillColor: 'lightgray' }, { text: 'Job Title', bold: true, fillColor: 'lightgray' }], 
           [formattedDateTime(this.entity.JobDate,false), this.entity.JobNumber, this.entity.Client, this.entity.JobTitle], 
           ] 
          } 
         }); 
        var subGridContentBody = []; 
        subGridContentBody.push([{ text: 'Defect', bold: true, fillColor: 'lightgray' }, { text: 'Vendor', bold: true, fillColor: 'lightgray' }, { text: 'Status', bold: true, fillColor: 'lightgray' }, { text: 'Sign off', bold: true, fillColor: 'lightgray' }]); 
        $(this.entity.Defects).each(function() { 
         subGridContentBody.push([this.DefectName, this.DefectVendor, this.DefectStatus, '']); 
        }); 
        docContent.push({ 
         table: { 
          headerRows: 1, 
          widths: [159, 150, 50, 121], 
          body: subGridContentBody 
         } 
        }); 
        docContent.push({ text: '', margin: 15 }); 
       }); 

       var docDefinition = { 
        content: docContent 
       } 


       if (self.isIE()) { 
        self.downloadPDF(grid.options.exporterPdfFilename, docDefinition); 
       } else { 
        pdfMake.createPdf(docDefinition).open(); 
       } 
      } 
+0

Danke für das Teilen dieses, es hat sich als sehr nützlich beim Versuch, meine eigene UI-Grid Sub-Grid-Export zu implementieren. –

+0

Eine Sache, die in dem obigen Code verbessert werden konnte, ist die Verwendung von geschachtelten Tabellen, so dass die Tabellenüberschrift der übergeordneten Klasse nicht wiederholt werden muss. Es war nicht offensichtlich, dass pdfmake diese Funktionen hatte, also habe ich hier Infos dazu gepostet: http://stackoverflow.com/questions/39454842/nested-sub-tables-with-pdfmake –