嗨，我正在使用 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”时，我也希望导出此隐藏列。
最佳答案
我有同样的要求，并且能够通过以下方式完成此任务。
$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。
关于javascript - Angular UI 网格 : export hidden columns when user selects Export Visible data，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41699269/