Ui Grid Angular JS: Exporter toutes les données visibles lors de l'utilisation de la pagination intégrée

Question

Je travaille sur un site Web en utilisant angularJS et UI Grid. J'affiche certaines données que je reçois de mon backend, avec ui grid. Depuis que j'ai beaucoup de données, j'utilise la pagination de grille ui. Je peux filtrer et masquer les colonnes. Lorsque j'essaie d '«exporter toutes les données visibles», seule la page en cours est exportée.

Cela peut être normal puisque les autres pages ne sont pas visibles, mais je voudrais trouver une solution pour exporter toutes mes données filtrées, et pas seulement la page actuelle.

Je ne peux pas trouver quelque chose comme ça dans Ui Grille Docs

Merci

Answer 1

En réponse à votre question, voici comment vous exporter non seulement votre page en cours, mais toutes vos données filtrées.

var app = angular.module('app', ['ui.grid', 'ui.grid.pagination', 'ui.grid.exporter']); 
 
app.controller('MainCtrl', ['$scope', 'uiGridExporterService', 'uiGridExporterConstants', 
 
    function($scope, uiGridExporterService, uiGridExporterConstants) { 
 
    $scope.export = function() { 
 
     var exportData = []; 
 
     var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : []; 
 
     angular.forEach($scope.gridApi.grid.rows, function(row) { 
 
     if (row.visible) { 
 
      var values = []; 
 
      angular.forEach(exportColumnHeaders, function(column) { 
 
      var value = row.entity[column.name]; 
 
      values.push({ 
 
       value: value 
 
      }); 
 
      }); 
 
      exportData.push(values); 
 
     } 
 
     }); 
 
     var csvContent = uiGridExporterService.formatAsCsv(exportColumnHeaders, exportData, ','); 
 
     uiGridExporterService.downloadFile($scope.gridOptions.exporterCsvFilename, csvContent, $scope.gridOptions.exporterOlderExcelCompatibility); 
 
    }; 
 
    $scope.gridOptions = { 
 
     enableFiltering: true, 
 
     paginationPageSizes: [5, 10, 15], 
 
     paginationPageSize: 5, 
 
     exporterCsvFilename: 'filteredData.csv', 
 
     onRegisterApi: function(gridApi) { 
 
     $scope.gridApi = gridApi; 
 
     }, 
 
     columnDefs: [{name: 'FirstName'}, {name: 'LastName'}, {name: 'Job'}], 
 
     data: [{"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}, 
 
      {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}] 
 
    }; 
 
    } 
 
]);

button { 
 
    margin-bottom: 10px; 
 
} 
 

 
div[ui-grid] { 
 
    height: 280px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" /> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <button ng-click="export()">Export Filtered &amp; Paged Grid</button> 
 
    <div ui-grid="gridOptions" ui-grid-pagination ui-grid-exporter class="grid"></div> 
 
</div>

MISE À JOUR: exportation PDF, et les options de menu de grille personnalisées.

Code pour décider PDF ou CSV export:

var content; 
if (format=="csv") { 
    content = uiGridExporterService.formatAsCsv(exportColumnHeaders, exportData, ','); 
    uiGridExporterService.downloadFile($scope.gridOptions.exporterCsvFilename, content, $scope.gridOptions.exporterOlderExcelCompatibility); 
} else { 
    content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData); 
    pdfMake.createPdf(content).open(); 
} 

Grille code d'option pour masquer les options de menu existantes et ajouter des options de menu personnalisées.

enableGridMenu: true, 
exporterMenuCsv: false, 
exporterMenuPdf: false, 
gridMenuCustomItems: [{ 
    title: 'CSV Export (Filtered & Paged Grid)', 
    action: function() { 
    $scope.export('csv'); 
    }, 
    order: 210 
}, { 
    title: 'PDF Export (Filtered & Paged Grid)', 
    action: function() { 
    $scope.export('pdf'); 
    }, 
    order: 250 
}], 

Voici un Plunker fonctionnel, http://plnkr.co/edit/xBvc4094CIu6oGDZXZx7?p=preview. Informez-moi si vous avez d'autres questions.