kątowa ui-grid przyciski eksport zewnętrzny

Question

Jestem nowym pracy z kątowe UI-GRID i muszę utworzyć przyciski zewnętrzne dla eksportujących funkcje jak eksport PDF i CSV Export podobny to this image. Czy masz pojęcie, jak mogę to zrobić?

Potrzebuję również przycisku Drukuj, ale nie widzę go w dokumentacji. Czy istnieje zachowanie drukowania dla tej siatki?

Dziękuję Ernesto

Answer 1

Biorąc okiem na ui-grid.exporter source code (będzie specjalnie zajęcia eksport pdf, który rozpoczyna się w ~ linii 972, ale można zastosować go do przypadku użycia CSV, jak również), że chcesz utworzyć przycisk zewnętrznych w html, a następnie połącz funkcję uiGridExporterService z przyciskiem za pomocą ng-click. Zgodnie z kodem funkcja pdfExport przyjmuje trzy parametry: grid, rowTypes i colTypes. Aby uzyskać obiekt siatki, należy użyć $scope.gridApi.grid, a te dwa ostatnie należy ustawić na stałe - uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED lub uiGridExporterConstants.VISIBLE - w zależności od tego, co chcemy wyeksportować. Upewnij się, że wstrzyknąłeś uiGridExporterService i uiGridExporterConstants w swoim module.

Wymelduj się this plunker Zaadaptowałem z dokumentacji UI-grid. Odpowiednie bity:

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

Mam nadzieję, że pomoże!

Answer 2

1. to w sekcji 206 eksportowania danych z sir dokumentacji, eksport przycisk jest w prawym górnym rogu, oczywiście można dostosować przycisk. Ale twoje główne pytanie nie dotyczy tego.
2. O ile mi wiadomo, nie został jeszcze dodany do funkcji ui-grid, ale jest to możliwe, jeśli chcesz zanurkować, a jeśli przekonwertujesz plik pdf lub csv, zobaczysz przycisk drukowania (prawy górny róg). Jeśli naprawdę chcesz tego na swojej stronie, może ci pomóc this.

Answer 3

Upewnij się, że parametr enableGridMenu jest ustawiony na false.

i wewnątrz GridOptions zrobić coś takiego:

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

      }, 

a następnie trzeba użyć funkcji csv eksport lub exportpdf tak.

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

Wewnątrz widoku html należy wywołać funkcję exportcsv(), jak pokazano poniżej.

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