Угловой UI-сетка кнопки внешнего экспорта

Question

Я новичок работает с угловым UI-GRID и мне нужно создать внешние кнопки для экспортирующих функции, таких как экспорт PDF и CSV экспорт аналогичного to this image. У вас есть идеи, как я могу это сделать?

Также мне нужна кнопка «Печать», но я не вижу ее в документации. Есть ли поведение печати для этой сетки?

Спасибо, Эрнесто

Answer 1

Взглянув на ui-grid.exporter source code (это будет конкретно рассмотрен экспорт PDF, который начинается в ~ строке 972, но вы можете применить его к использованию CSV случае), вы хотели бы создать внешнюю кнопку в ваш html, затем привяжите функцию uiGridExporterServicepdfExport() к кнопке через ng-click. Для кода функция pdfExport принимает три параметра: grid, rowTypes и colTypes. Чтобы получить объект сетки, используйте $scope.gridApi.grid, а для последних двух вам нужно установить константы - uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED или uiGridExporterConstants.VISIBLE - в зависимости от того, что вы хотите экспортировать. Убедитесь, что вы ввели uiGridExporterService и uiGridExporterConstants в свой модуль.

Отъезд this plunker Я адаптирован из документов ui-grid. Соответствующие биты:

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

Надеюсь, что это поможет!

Answer 2

1. это в разделе 206 экспорта данных из документации сударь, экспорт кнопка в правом верхнем углу, конечно, вы можете настроить кнопку. Но ваш главный вопрос не в этом.
2. Насколько я знаю, он еще не добавлен в функцию ui-grid, но это возможно, если вы хотите погрузиться, и если вы конвертируете в pdf или csv, там есть кнопка печати справа (вверху справа). Если вы действительно этого хотите, то на вашей странице может помочь this.

Answer 3

Убедитесь, что для параметра enableGridMenu установлено значение false.

и внутри GridOptions сделать что-то вроде этого:

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

      }, 

, а затем вы должны использовать экспорт CSV или exportpdf функции, как это.

vm.exportCsv = function() { 
      var grid = vm.gridApi.grid; 
      var rowTypes = uiGridExporterConstants.ALL; 
      var colTypes = uiGridExporterConstants.ALL; 
      uiGridExporterService.csvExport(grid, rowTypes, colTypes); 
     }; 

и в вашем представлении html вам необходимо вызвать эту функцию exportcsv(), как показано ниже.

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