Question

您好我正在使用angular的ng-grid来显示大约1000行数据。用户可以一次查看实际表格中的数据10,20或100行..但无论他们一次查看多少数据，我希望他们能够下载所有1000行的CSV

有没有办法用当前插件执行此操作？我已经苦苦挣扎了一段时间，因为插件总是转到实际的ng-grid，数据用于创建CSV。

ng-grid插件：

ngGridCsvExportPlugin = function(opts) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function(scope, grid, services) {
    self.grid = grid;
    self.scope = scope;

    function showDs() {
        var keys = [];

        for (var f in grid.config.columnDefs) { if (grid.config.columnDefs[f].field) { keys.push(grid.config.columnDefs[f].field); }}
        var csvData = '';
        function csvStringify(str) {
            if (str == null) return '';  // we want to catch anything null-ish, hence just == not ===
            if (typeof(str) === 'number') return '' + str;
            if (typeof(str) === 'boolean') return (str ? 'TRUE' : 'FALSE') ;
            if (typeof(str) === 'string') return str.replace(/"/g,'""');
            return JSON.stringify(str).replace(/"/g,'""');
        }
        function swapLastCommaForNewline(str) {
            var newStr = str.substr(0,str.length - 1);
            return newStr + "\n";
        }
        for (var k in keys) {
            csvData += '"' + csvStringify(keys[k]) + '",';
        }
        csvData = swapLastCommaForNewline(csvData);
        var gridData = grid.data;
        for (var gridRow in gridData) {
            for ( k in keys) {
                var curCellRaw;
                if (opts != null && opts.columnOverrides != null && opts.columnOverrides[keys[k]] != null) {
                  curCellRaw = opts.columnOverrides[keys[k]](gridData[gridRow][keys[k]]);
                } else {
                  curCellRaw = gridData[gridRow][keys[k]];
                }
                csvData += '"' + csvStringify(curCellRaw) + '",';
            }
            csvData = swapLastCommaForNewline(csvData);
        }
        var fp = grid.$root.find(".ngFooterPanel");
        var csvDataLinkPrevious = grid.$root.find('.ngFooterPanel .csv-data-link-span');
        if (csvDataLinkPrevious != null) {csvDataLinkPrevious.remove() ; }
        var link = "data:text/csv;charset=UTF-8," + encodeURIComponent(csvData);
        var csvDataLinkHtml = "<span class=\"csv-data-link-span\">";
        csvDataLinkHtml += "<br><a class=\"btn hidden btn-primary exportTable2CSV\" href=" + link + " download=\"Export.csv\">CSV Export</a></br></span>" ;
        fp.append(csvDataLinkHtml);
        scope.$emit("exportTable2CSVLinkReady", link);
    }

    setTimeout(showDs, 0);
    scope.catHashKeys = function() {

        showDs();

      hash = '';
      for (idx in scope.renderedRows) { hash += scope.renderedRows[idx].$$hashKey;  }
      return hash;
    };
    scope.$watch('catHashKeys()', showDs);
};
};

Answer 1

您拥有所有数据，也许您可以使用ng-csv导出csv文件。

这是一个例子。 sfiddle

HTML：

<h2>Export {{sample}}</h2>
  <div>
      <button type="button" ng-csv="getArray" filename="test.csv">Export</button>
</div>

javascript：

angular.module('csv', ['ngCsv']);

function Main($scope) {
    $scope.sample = "Sample";
    $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];                            
}

Answer 2

根据您的解释，尚不清楚什么是未定义的...... 您是否尝试通过范围而非网格访问数据？
您可能已经观察到没有这样的钩子/功能会一次导出所有数据，所以我建议用户更改页面选择只显示启用CSV导出选项后的所有记录？

ng-grid导出到CSV插件 - 即使分页也如何下载所有数据

2 个答案: