Ui 网格 Angular JS：使用内置分页时导出所有可见数据

Question

我正在使用 angularJS 和 UI 网格开发网站。我用 ui 网格显示从后端收到的一些数据。由于我有很多数据，所以我使用 ui 网格分页。我可以过滤和隐藏列。

当我尝试 "export all visible data" 时，仅导出当前页面。

这可能是正常的，因为其他页面不可见，但我想找到一个解决方案来导出我所有过滤的数据，而不仅仅是当前页面。

我在 Ui 网格文档中找不到这样的东西

谢谢

Answer 1

在回答您的问题时，这不仅是您当前页面的导出方式，也是您导出所有过滤数据的方式。

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>

更新： PDF 导出和自定义网格菜单选项。

决定 PDF 或 CSV 导出的代码：

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

用于隐藏现有菜单选项和添加自定义菜单选项的网格选项代码。

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
}],

这是一个工作的 Plunker，http://plnkr.co/edit/xBvc4094CIu6oGDZXZx7?p=preview。

如果您还有其他问题，请告诉我。

Answer 2

我发现这很管用。不喜欢使用 uiGridExporterService 的其他方法，因为它似乎只导出原始数据。

onRegisterApi: function (gridApi) {
    gridApi.core.on.rowsVisibleChanged($scope, function () {
        // match export enabled per row to visible property. This is in order to force export only of filtered data.
        gridApi.grid.rows.forEach(function (row) {
            row.exporterEnableExporting = row.visible;
        });
    });
}

Ui 网格 Angular JS：使用内置分页时导出所有可见数据

Ui Grid Angular JS : Export all Visible Data when using Built in Pagination

pagination

export

angularjs

angular-ui-grid