angulaire ui-grid boutons d'exportation externe

Question

Je suis nouveau travailler avec l'interface utilisateur-GRID angulaire et je dois créer des boutons externes pour les fonctions d'exportation comme PDF export et CSV Export similaires to this image. Avez-vous une idée de comment je peux le faire?

J'ai aussi besoin d'un bouton Imprimer mais je ne le vois pas dans la documentation. Y a-t-il un comportement d'impression pour cette grille?

Merci, Ernesto

Answer 1

Jeter un oeil à la ui-grid.exporter source code (ce sera spécifiquement répondre à l'exportation pdf, qui commence à ~ ligne 972, mais vous pouvez l'appliquer au cas d'utilisation csv aussi bien), vous voulez créer un bouton externe votre code html, puis liez la fonction pdfExport()uiGridExporterService au bouton via ng-click. Par le code, la fonction pdfExport prend trois paramètres: grid, rowTypes et colTypes. Pour obtenir l'objet de grille, utilisez $scope.gridApi.grid et les deux derniers vous devez définir sur des constantes - uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED ou uiGridExporterConstants.VISIBLE - en fonction de ce que vous souhaitez exporter. Assurez-vous d'injecter uiGridExporterService et uiGridExporterConstants dans votre module.

Découvrez this plunker Je me suis adapté à partir des documents ui-grid. Les bits pertinents:

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

Espérons que ça aide!

Answer 2

1. il est sur la section 206 de l'exportation des données de la documentation Monsieur, l'exportation du bouton est sur le coin supérieur droit, vous pouvez bien sûr personnaliser le bouton. Mais votre question principale n'est pas à ce sujet. Pour autant que je sache, il n'est pas encore ajouté à la fonction ui-grid, mais c'est possible si vous voulez plonger, et si vous convertissez en pdf ou csv il y a un bouton d'impression là (en haut à droite). Si vous le voulez vraiment sur votre page this pourrait vous aider.

Answer 3

Assurez-vous de définir enableGridMenu sur false.

et à l'intérieur des GridOptions faire quelque chose comme ceci:

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

      }, 

et vous devez utiliser les fonctions de csv d'exportation ou ExportPDF comme celui-ci. À l'intérieur de votre vue html, vous devez appeler cette fonction exportcsv() comme indiqué ci-dessous.

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