Angular ui-grid externe Export Tasten

Question

Ich bin mit dem Angular UI-GRID arbeiten und ich brauche für die ausführenden Funktionen wie PDF-Export und CSV Export ähnliche to this image externe Tasten erstellen. Hast du eine Idee, wie kann ich das machen?

Auch ich brauche eine Schaltfläche Drucken, aber ich sehe es nicht in der Dokumentation. Gibt es ein Druckverhalten für dieses Raster?

Danke, Ernesto

Answer 1

einen Blick auf den ui-grid.exporter source code nehmen (dies wird speziell Export Adresse pdf, die bei ~ Linie beginnt 972, aber Sie können es auf den CSV-Anwendungsfall gelten auch), würden Sie einen externen Knopf zu schaffen, in html, dann binden Sie die uiGridExporterServicepdfExport() Funktion an die Schaltfläche über ng-click. Für den Code nimmt die -Funktion drei Parameter an: grid, rowTypes und colTypes. Um das Rasterobjekt zu erhalten, verwenden Sie $scope.gridApi.grid, und die letzten beiden müssen Sie auf Konstanten setzen - uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED oder uiGridExporterConstants.VISIBLE - je nachdem, was Sie exportieren möchten. Stellen Sie sicher, dass Sie uiGridExporterService und uiGridExporterConstants in Ihr Modul injizieren.

Auschecken this plunker Ich angepasst aus der UI-Grid-Dokumente. Die relevanten Bits:

<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div> 
<button ng-click="exportPdf()">PDF</button> 

$scope.exportPdf = function() { 
    var grid = $scope.gridApi.grid; 
    var rowTypes = uiGridExporterConstants.ALL; 
    var colTypes = uiGridExporterConstants.ALL; 
    uiGridExporterService.pdfExport(grid, rowTypes, colTypes); 
}; 

Hoffe, dass hilft!

Answer 2

1. es 206 Exportieren von Daten der Dokumentation sir auf Abschnitt ist, wird die Schaltfläche Export in der rechten oberen Ecke, natürlich können Sie auf die Schaltfläche anpassen. Aber deine Hauptfrage ist nicht darüber.
2. Soweit ich weiß, ist es noch nicht zu UI-Grid-Funktion hinzugefügt, aber es ist möglich, wenn Sie tauchen wollen, und wenn Sie in PDF oder CSV konvertieren, gibt es Drucktaste rechts (rechts oben). Wenn Sie es wirklich auf Ihrer Seite möchten this könnte Ihnen helfen.

Answer 3

Stellen Sie sicher, dass Sie enableGridMenu auf false setzen.

und innerhalb der GridOptions etwas tun, wie folgt aus:

'exporterCsvFilename' : 'clarification-status.csv', 
      exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")), 
      onRegisterApi: function(gridApi){ 
       vm.gridApi = gridApi; 

      }, 

und dann müssen Sie wie folgt den Export csv oder ExportPDF Funktionen nutzen.

vm.exportCsv = function() { 
      var grid = vm.gridApi.grid; 
      var rowTypes = uiGridExporterConstants.ALL; 
      var colTypes = uiGridExporterConstants.ALL; 
      uiGridExporterService.csvExport(grid, rowTypes, colTypes); 
     }; 

und innerhalb Ihrer HTML-Ansicht müssen Sie diese exportcsv() -Funktion aufrufen, wie unten gezeigt.

<img ng-src="public/images/excel-icon.png" ng-click="vm.exportCsv()" />