Angular UI 网格：当用户选择导出可见数据时导出隐藏列答案

【问题标题】：Angular UI grid : export hidden columns when user selects Export Visible dataAngular UI 网格：当用户选择导出可见数据时导出隐藏列
【发布时间】：2017-11-14 03:10:00
【问题描述】：

您好，我正在使用 Angular UI 网格。我有 3 列。其中一列被隐藏。当用户单击将可见数据导出为 CSV 或将可见数据导出为 Pdf 时，也需要导出隐藏列。我怎样才能做到这一点？

这是 plunkr 的链接 http://plnkr.co/edit/Vwq7azXtx0GV7idvrSvq?p=preview

HTML: 这是我的代码

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
</div>

<script src="app.js"></script>
  </body>
</html> 
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'gender', visible: false},
      { field: 'company' }
    ],
    enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
  });

}]);

这里的性别列是隐藏的。但是，当我点击 Export Visible data as csv/pdf 时，我希望这个隐藏的列也能被导出。

【问题讨论】：

为什么不在菜单中选择“Export all data as csv”而不是“Export visible data as csv”？跨度>
我希望这两个选项都返回隐藏的列值。导出所有数据以及导出可见数据必须导出我的隐藏列
显然与选项尝试冲突
是的。但这能做到吗？

标签： javascript angularjs angular-ui-grid

【解决方案1】：

我有同样的要求，并且能够通过以下方式完成。

$scope.gridOptions = {
    exporterMenuCsv: true,
    exporterMenuPdf: true,
    exporterMenuVisibleData: false, // suppress default menu options

    columnDefs: [
        // define columns
    ],

    onRegisterApi: function (gridApi) {
        const grid = gridApi.grid;

        // add our own export visible data menu option
        // we want to export all columns, not just visible ones
        // add a small delay because the addToGridMenu function
        // may not be defined yet when this code is executed
        $timeout( function() {
            grid.api.core.addToGridMenu(grid, [
                {
                    title: i18nService.getSafeText('gridMenu.exporterVisibleAsCsv'),
                    action: function ($event) {
                        grid.api.exporter.csvExport(uiGridExporterConstants.VISIBLE, uiGridExporterConstants.ALL);
                    },
                    shown: function () {
                        return grid.options.exporterMenuCsv;
                    },
                    order: grid.options.exporterMenuItemOrder + 1
                },
                {
                    title: i18nService.getSafeText('gridMenu.exporterVisibleAsPdf'),
                    action: function ($event) {
                        grid.api.exporter.pdfExport(uiGridExporterConstants.VISIBLE, uiGridExporterConstants.ALL);
                    },
                    shown: function () {
                        return grid.options.exporterMenuPdf;
                    },
                    order: grid.options.exporterMenuItemOrder + 4
                }
            ]);
        }, 200 );
    }
}

代码隐藏了 ui-grid-exporter 模块添加的默认“导出可见数据...”菜单选项并添加了新选项。操作函数调用导出方法，指定 uiGridExporterConstants.ALL 而不是 uiGridExporterConstants.VISIBLE 作为列类型。

【讨论】：