javascript - Angular ui 网格， "Export all data as csv"的更改行为

Question

我有一个包含大量列定义的 uigrid，这些列定义最初没有填充数据，因为数据集会太大。相反，我会在列可见性更改时获取请求的列数据。

这会导致内置的 csv 导出器出现问题。当有人选择“将所有数据导出为 csv”时，他们会得到许多空列。

我想做的是将内置 csv 菜单项的默认行为更改为使用 uiGridExporterConstants.VISIBLE。

我打算像这样滚动我自己的菜单项:

  $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”仅导出可见列。

Answer 1

我最终不得不像这样使用 gridApi.core.addToGridMenu:

    $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 Visible to CSV',
                        order: 2,
                        action: function ($event) {
                            var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                            $scope.gridApi.exporter.csvExport(uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE, myElement);
                        }
                    }]);
                }, 0, 1);

                $scope.gridApi.selection.on.rowSelectionChanged($scope, function () { //for single row selection
                    if (gridApi.grid.selection.selectedCount > 0 && !selectionMenuAdded) { //only add menu item if something is selected and if the menu item doesn't already exist
                        selectionMenuAdded = true;
                        gridApi.core.addToGridMenu(gridApi.grid, [{
                            title: 'Export Selected to CSV',
                            order: 3,
                            id: 'uiSel',
                            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) { //create the inner data object array
                                                if (e !== '$$hashKey') {
                                                    var selectObj = { value: entry[e] };
                                                    innerData.push(selectObj);
                                                }
                                            }
                                            selectionData.push(innerData); //push the inner object value array to the larger array as required by formatAsCsv
                                        });
                                        var csvContent = uiExporter.formatAsCsv(exportColumnHeaders, selectionData, grid.options.exporterCsvColumnSeparator);
                                        uiExporter.downloadFile($scope.gridOptions.exporterCsvFilename, csvContent, grid.options.exporterOlderExcelCompatibility);
                                    });
                                }
                            }
                        }]);
                    } else if (gridApi.grid.selection.selectedCount === 0 && selectionMenuAdded) {
                        selectionMenuAdded = false;
                        gridApi.core.removeFromGridMenu(gridApi.grid, 'uiSel');
                    }
                });

                $scope.gridApi.selection.on.rowSelectionChangedBatch($scope, function () {
                    if (gridApi.grid.selection.selectedCount > 0 && !selectionMenuAdded) {
                        selectionMenuAdded = true;
                        gridApi.core.addToGridMenu(gridApi.grid, [{
                            title: 'Export Selected to CSV',
                            order: 3,
                            id: 'uiSel',
                            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);
                                    });
                                }
                            }
                        }]);
                    } else if (gridApi.grid.selection.selectedCount === 0 && selectionMenuAdded) {
                        selectionMenuAdded = false;
                        gridApi.core.removeFromGridMenu(gridApi.grid, 'uiSel');
                    }
                });
          }
    }

一定要注入(inject) uiGridExporterConstants 和 uiGridExporterService。