Question

我们在out project项目中使用Angular UI Grid。我需要将当前日期放在文件名中并导出CSV数据。我现在在“导出”按钮上执行的操作点击：

$scope.exportCSV = function () {
     $scope.gridOptions.exporterCsvFilename = getDate() + ".csv";
     $scope.gridApi.exporter.csvExport("all", "visible");
};

问题是文件名只配置一次，在下次点击时不会改变。如何重新设置文件名？

Answer 1

如果我没有在onRegisterApi（）之前的初始gridOptions中包含它，我能够修改导出文件名。

    $scope.gridOptions = {
        // exporterCsvFilename: 'Do not set here',
        exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        columnDefs: [
            { field: 'Category' },
            { field: 'Description' },
            { field: 'RateCode' }
        ],
    };

之后我可以用这样的javascript设置它：

    $scope.gridOptions.exporterCsvFilename = 'Custom_' + $scope.selectedVersion.VersionNumber + '_2017-06-29.csv';

Answer 2

另一种解决方案是在设置文件名后使用 gridApi.core.notifyDataChange 告诉网格选项数据已更新。这样我们就可以使用 csvExport() 等，而不是像接受的答案那样再次重写整个函数。

她是修改后的 excel 和 csv 导出菜单的示例：

angular.module('app').controller('GridCrtl', ['$scope', '$filter', 'uiGridExporterService', 'uiGridExporterConstants', function ($scope, $filter, uiGridExporterService, uiGridExporterConstants) {

    $scope.grid = {
        exporterMenuExcel: false
        , exporterMenuCsv: false
        , exporterExcelSheetName: 'Export'
        , onRegisterApi: function(gridApiRef) {
                gridApi = gridApiRef;
        }
        , gridMenuCustomItems: [{
            {
                title: 'CSV Export (visible)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".csv"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.csvExport(gridApi.grid, uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE);
                }
                , order: 1
            }
            ,{
                title: 'CSV Export (all)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".csv"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.csvExport(gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL);
    
                }
                , order: 2
            }
            ,{
                title: 'Excel Export (visible)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".xlsx"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.excelExport(gridApi.grid, uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE);
    
                }
                , order: 3
            }
            ,{
                title: 'Excel Export (all)'
                , action: function() {
                    $scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".xlsx"
                    gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
                    uiGridExporterService.excelExport(gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL);
                }
                , order: 4
            }]
        }
    };

}]);

在Angular UI Grid中导出为CSV时更改文件名

2 个答案: