Ui Grid Angular JS: экспорт всех видимых данных при использовании встроенной нумерации страниц

Я работаю над веб-сайтом, используя angularJS и UI Grid. Я показываю некоторые данные, которые я получаю от моего бэкэнда, с сеткой пользовательского интерфейса. Поскольку у меня много данных, я использую паганацию сетки пользовательского интерфейса. Я могу фильтровать и скрывать столбцы.

Когда я пытаюсь «экспортировать все видимые данные», экспортируется только текущая страница.

Это может быть нормально, поскольку другие страницы не видны, но я хотел бы найти решение для экспорта всех моих отфильтрованных данных, а не только текущей страницы.

Я не могу найти что-то подобное в Ui Grid Docs

Спасибо


pagination angularjs export angular-ui-grid
person Sonny Jayet    schedule 10.03.2017    source источник
comment
Помог ли мой ответ ниже? Вам нужно было что-нибудь еще?   -  person Tim Harker    schedule 13.03.2017
comment
Привет, спасибо за ответ, я еще не пробовал. Я студент, работаю неполный рабочий день, я не работаю каждый день :( . Я скажу вам, если это сработало!   -  person Sonny Jayet    schedule 13.03.2017
comment
Я конечно понимаю, приятель. Рад видеть вас в онлайн-сообществе Stack Overflow. Вы идете по правильному пути, если хотите делать это на предприятии каждый день :). Дайте мне знать, как это происходит, когда у вас есть шанс. Рад помочь!   -  person Tim Harker    schedule 14.03.2017
comment
Я попытался использовать ваш код с некоторыми корректировками, чтобы заставить его работать в моем коде (замена gridoption + я не использую $scope), и все в порядке. Большое спасибо :) . Теперь я попытаюсь также получить экспорт в формате pdf и попытаться поместить кнопку на панели меню сетки пользовательского интерфейса вместо нативных кнопок экспорта видимых данных.   -  person Sonny Jayet    schedule 15.03.2017
comment
Я обновил свой ответ, включив в него экспорт PDF и параметры пользовательского меню.   -  person Tim Harker    schedule 15.03.2017

Ответы (2)


arrow_upward
1
arrow_downward

Отвечая на ваш вопрос, вы бы экспортировали не только текущую страницу, но и все отфильтрованные данные.

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

Вот рабочий плункер, http://plnkr.co/edit/xBvc4094CIu6oGDZXZx7?p=preview.

Дайте мне знать, если у вас возникнут дополнительные вопросы.

person Tim Harker    schedule 11.03.2017
comment
Спасибо за это, мне пришлось добавить «showHeader: true» в параметры сетки, чтобы эта работа заработала. Это была единственная реальная проблема, после чего мне пришлось переработать некоторые из моих уникальных проблем с экспортом, например, форматы даты, а также некоторые программно добавленные столбцы. Но кроме этого, ваш код был потрясающим. - person Ted Herrlich; 12.03.2018

arrow_upward
0
arrow_downward

Я обнаружил, что это работает. Не понравился другой подход, когда вы используете 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;
        });
    });
}
person Hristo Evtimov    schedule 26.10.2018