Angular ui 网格，更改“将所有数据导出为 csv"的行为； [英] Angular ui grid, change behavior of "Export all data as csv"
问题描述
我有一个 uigrid，其中包含大量最初未填充数据的列定义，因为数据集太大.相反，当列可见性发生变化时，我会获得请求的列数据.
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.
这会导致内置 csv 导出器出现问题.当有人选择将所有数据导出为 csv"时，他们会得到许多空列.
This causes an issue with the built in csv exporter. When someone chooses to "Export all data as csv" they get numerous empty columns.
我想要做的是将内置 csv 菜单项的默认行为更改为使用 uiGridExporterConstants.VISIBLE.
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 );
}
}
];
但只出现第一项.也许我必须使用 addToGridMenu，但我不确定.理想情况下，我想保留默认项目，但只需将所有数据导出为 csv"仅导出可见列.
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.
推荐答案
我最终不得不像这样使用 gridApi.core.addToGridMenu:
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');
}
});
}
}
一定要注入 uiGridExporterConstants 和 uiGridExporterService.
Be sure to inject uiGridExporterConstants and uiGridExporterService.
这篇关于Angular ui 网格，更改“将所有数据导出为 csv"的行为；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
