angolare ui-grid pulsanti di esportazione esterno

Question

Sono nuovo a lavorare con l'angolare UI-GRID e ho bisogno di creare pulsanti esterni per le funzioni di esportazione come esportazione in formato PDF e CSV Esporta simile to this image. Hai idea di come posso farlo?

Inoltre, ho bisogno di un pulsante Stampa ma non lo vedo nella documentazione. Esiste un comportamento di stampa per questa griglia?

Grazie, Ernesto

Answer 1

Dando uno sguardo alla ui-grid.exporter source code (questo sarà specificamente affrontare pdf esportazione, che inizia a ~ linea 972, ma è possibile applicarlo al caso d'uso csv pure), si vorrebbe creare un pulsante esterno in il tuo html, quindi legare la funzione pdfExport() al pulsante tramite ng-click. Per il codice, la funzione pdfExport accetta tre parametri: grid, rowTypes e colTypes. Per ottenere l'oggetto griglia, utilizzare $scope.gridApi.grid e gli ultimi due è necessario impostare su costanti - uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED o uiGridExporterConstants.VISIBLE - a seconda di ciò che si desidera esportare. Assicurati di iniettare uiGridExporterService e uiGridExporterConstants nel modulo.

Check out this plunker Ho adattato dai documenti di interfaccia utente. I bit rilevanti:

<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); 
}; 

Sperare che aiuti!

Answer 2

1. è nella sezione 206 dati esportatori del signore di documentazione, il pulsante di esportazione si trova all'angolo in alto a destra, naturalmente è possibile personalizzare il pulsante. Ma la tua domanda principale non è su di esso.
2. Per quanto ne so, non è stato ancora aggiunto alla funzione di griglia utente, ma è possibile se si desidera effettuare l'immersione e se si converte in pdf o csv è presente il pulsante di stampa (in alto a destra). Se lo vuoi veramente sulla tua pagina, this potrebbe aiutarti.

Answer 3

Assicurarsi di impostare enableGridMenu su false.

e all'interno delle GridOptions fare qualcosa di simile:

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

      }, 

e allora avete bisogno di utilizzare le funzioni di esportazione csv o exportpdf come questo.

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

e all'interno della vista html, è necessario chiamare questa funzione exportcsv() come mostrato di seguito.

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