Question

您好我正在使用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>

JS

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

}]);

此处隐藏了列性别。但是当我点击导出可见数据为csv / pdf时，我也希望导出这个隐藏列。

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

代码隐藏默认＆＃34;导出可见数据......＆＃34;菜单选项由ui-grid-exporter模块添加并添加新选项。 action函数调用export方法，为列类型指定uiGridExporterConstants.ALL而不是uiGridExporterConstants.VISIBLE。

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

1 个答案: