问题
I have a uigrid that contains a large number of column definitions that aren't initially filled with data because the data set would be too large. Instead, I get the requested column data when the column visibility changes.
This causes an issue with the built in csv exporter. When someone chooses to "Export all data as csv" they get numerous empty columns.
What I would like to do it change the default behavior of the built in csv menu items to use uiGridExporterConstants.VISIBLE.
I was going to roll my own menu items like so:
$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 );
}
}
];
But only the first item appears. Maybe I have to use addToGridMenu, but I'm not sure. Ideally, I'd like to leave the default items in place, but just have "export all data as csv" only export the visible columns.
回答1:
I ended up having to use gridApi.core.addToGridMenu like so:
$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');
}
});
}
}
Be sure to inject uiGridExporterConstants and uiGridExporterService.
来源：https://stackoverflow.com/questions/34189494/angular-ui-grid-change-behavior-of-export-all-data-as-csv