Ui Grid Angular JS : Експортирайте всички видими данни, когато използвате вградена пагинация

Работя върху уебсайт, използвайки angularJS и UI Grid. Показвам някои данни, които получавам от моя бекенд, с мрежа на потребителския интерфейс. Тъй като имам много данни, използвам paganation на мрежата на потребителския интерфейс. Мога да филтрирам и скривам колони.

Когато се опитам да „експортирам всички видими данни“, се експортира само текущата страница.

Може да е нормално, тъй като други страници не се виждат, но бих искал да намеря решение за експортиране на всички мои филтрирани данни, а не само на текущата страница.

Не мога да намеря нещо подобно в 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="/bg//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.

Уведомете ме, ако имате допълнителни въпроси.

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