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

请务必注入uiGridExporterConstants和uiGridExporterService。

Angular ui grid，更改“将所有数据导出为csv”的行为

1 个答案: