角UI电网的＆QUOT改变行为，导出所有数据为CSV＆QUOT; [英] Angular ui grid, change behavior of "Export all data as csv"

问题描述

我有一个包含了大量的未最初填充数据列定义，因为数据集将是过大的uigrid。相反，我得到的请求的列数据时，该列能见度的变化。

I have a uigrid that contains a large number of column definitions that aren't initially filled with data because the data set would be too large. Instead, I get the requested column data when the column visibility changes.

这导致与内置的CSV出口的问题。当有人选择导出所有数据为CSV他们得到无数的空列。

This causes an issue with the built in csv exporter. When someone chooses to "Export all data as csv" they get numerous empty columns.

我愿做其更改内置的CSV菜单项的默认行为使用uiGridExporterConstants.VISIBLE。

What I would like to do it change the default behavior of the built in csv menu items to use uiGridExporterConstants.VISIBLE.

我要推出自己的菜单项，像这样：

I was going to roll my own menu items like so:

  $scope.gridOptions.exporterMenuCsv = false; //Rolling our own menu items to exclude invisible columns
  $scope.gridOptions.gridMenuCustomItems = [
      {
          title: 'Export All to CSV',
          action: function ($event) {
              var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
              $scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE, myElement );
          }
      },{
          title: 'Export Selected to CSV',
          action: function ($event) {
              var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
              $scope.gridApi.exporter.csvExport( uiGridExporterConstants.SELECTED, uiGridExporterConstants.VISIBLE, myElement );
          }
      },{
          title: 'Export Visible to CSV',
          action: function ($event) {
              var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
              $scope.gridApi.exporter.csvExport( uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE, myElement );
          }
      }
  ];

但仅出现的第一个项目。也许我不得不使用addToGridMenu，但我不知道。理想情况下，我想留在原地的默认项，但只是所有数据导出为CSV只导出可见列。

But only the first item appears. Maybe I have to use addToGridMenu, but I'm not sure. Ideally, I'd like to leave the default items in place, but just have "export all data as csv" only export the visible columns.

推荐答案

我最后不得不使用gridApi.core.addToGridMenu像这样：

I ended up having to use gridApi.core.addToGridMenu like so:

$scope.gridOptions = {
        exporterCsvLinkElement: angular.element(document.querySelectorAll('.custom-csv-link-location')),
        onRegisterApi: function(gridApi){
            $scope.gridApi = gridApi;

            $interval( function() {
                gridApi.core.addToGridMenu( gridApi.grid, [{
                    title: 'Export All to CSV',
                    order: 1,
                    action: function ($event) {
                        var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                        $scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE, myElement );
                    }
                }]);
                gridApi.core.addToGridMenu( gridApi.grid, [{
                    title: 'Export Selected to CSV',
                    order: 2,
                    action: function ($event) {
                        if(gridApi.grid.selection.selectedCount > 0){
                            var uiExporter = uiGridExporterService;
                            var grid = $scope.gridApi.grid;
                            uiExporter.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() {
                                var exportColumnHeaders = uiExporter.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
                                var selectionData = [];
                                gridApi.selection.getSelectedRows().forEach(function (entry) {
                                    var innerData = [];
                                    for (var e in entry){
                                        if (e !== '$$hashKey') {
                                            var selectObj = {value:entry[e]};
                                            innerData.push(selectObj);
                                        }
                                    }
                                    selectionData.push(innerData);
                                });
                                var csvContent = uiExporter.formatAsCsv(exportColumnHeaders, selectionData, grid.options.exporterCsvColumnSeparator);
                                uiExporter.downloadFile($scope.gridOptions.exporterCsvFilename, csvContent, grid.options.exporterOlderExcelCompatibility);
                            });
                        }
                    }
                }]);
                gridApi.core.addToGridMenu( gridApi.grid, [{
                    title: 'Export Visible to CSV',
                    order: 3,
                    action: function ($event) {
                        var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                        $scope.gridApi.exporter.csvExport( uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE, myElement );
                    }
                }]);
            }, 0, 1);
      }
}

请务必注入uiGridExporterConstants和uiGridExporterService。

Be sure to inject uiGridExporterConstants and uiGridExporterService.

这篇关于角UI电网的＆QUOT改变行为，导出所有数据为CSV＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！