Question

我在导出数据时遇到错误，有人可以帮助我吗？

对于第一个结果，搜索数据正在导出。我用更多数据进行研究，导出只显示第一个数据。在调试时，我看到该插件只启动一次并重新启动我必须将滚动条置于限制底部。

这是我的插件和我的ng-grid的代码。

'use strict';
/*global escape: true */
/*jshint unused:false*/
function ngGridCsvExportPlugin(opts) {
  /*jshint validthis:true */
  var self = this;
  self.grid = null;
  self.scope = null;
  self.services = null;

  // Les options d'export
  opts = opts || {};

  // Classe du lien d'export a rajouter
  opts.linkClass = opts.linkClass || 'export-csv';

  // Icone bootstrap (glyphicon) du lien d'export
  opts.linkIcon = opts.linkIcon || 'glyphicon-floppy-disk';

  // Libelle du lien d'export
  opts.linkLabel = opts.linkLabel || 'Exporter sous excel';

  // Nom du fichier CSV a exporter
  opts.fileName = opts.fileName || 'Export.csv';

  /*
   A partir de la grille, on indique les niveaux à monter, pour chercher le conteneur dans lequel on va rajouter le lien d'export.

   Exemple : imaginons qu'on a ce bout HTML :
   <div class="parent">
   <div class="child1">
   ...
   <div class="box-icons"></div>
   </div>
   <div class="child2">
   <div class="ngGrid">
   </div>
   </div>

   Supposons maintenant qu'on veut rajouter notre lien dans le conteneur 'box-icons'. A partir de la grille, il faut monter deux niveaux,
   pour atteindre le "parent", et partir de ce dernier on cherche le conteneur box-icons, dans lequel on rajoute le lien d'export
   */
  opts.parentDepth = opts.parentDepth || 2;

  /*
   Conteneur dans lequel on va rajouter notre lien d'export
   */
  opts.containerPanel = opts.containerPanel || '.box-icons';

  /**
   * verifie si une chaine est vide ou nulle
   * @param str
   * @returns {boolean}
   */
  function isNullOrEmpty(str) {
    return str === undefined || str === null;
  }

  function csvStringify(str) {
    // we want to catch anything null-ish, hence just == not ===
    if (isNullOrEmpty(str)) {
      return '';
    }
    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';
  }

  function prepareGridData(grid) {
    var keys = [];
    var csvData = '';
    for (var f in grid.config.columnDefs) {
      if (grid.config.columnDefs.hasOwnProperty(f)) {
        keys.push(grid.config.columnDefs[f].field);
        csvData += '"';
        if (typeof grid.config.columnDefs[f].displayName !== 'undefined') {
          /** moved to reduce looping and capture the display name if it exists**/
          csvData += csvStringify(grid.config.columnDefs[f].displayName);
        }
        else {
          csvData += csvStringify(grid.config.columnDefs[f].field);
        }
        csvData += '";';
      }
    }
    return {keys: keys, csvData: csvData};
  }

  function prepareCsvGrid(gridData, keys, csvData) {
    for (var gridRow in gridData) {
      if (gridData.hasOwnProperty(gridRow)) {
        var rowData = '';
        for (var k in keys) {
          if (keys.hasOwnProperty(k)) {
            var curCellRaw;

            if (opts !== null && !isNullOrEmpty(opts.columnOverrides) && opts.columnOverrides[keys[k]] !== null) {
              curCellRaw = opts.columnOverrides[keys[k]](
                self.services.UtilityService.evalProperty(gridData[gridRow], keys[k]));
            } else {
              curCellRaw = self.services.UtilityService.evalProperty(gridData[gridRow], keys[k]);
            }

            rowData += '"' + csvStringify(curCellRaw) + '";';
          }
        }
        csvData += swapLastCommaForNewline(rowData);
      }
    }
    return csvData;
  }

  self.init = function (scope, grid, services) {
    self.grid = grid;
    self.scope = scope;
    self.services = services;

    function showDs() {

      var __ret = prepareGridData(grid);
      var keys = __ret.keys;
      var csvData = __ret.csvData;
      csvData = swapLastCommaForNewline(csvData);
      var gridData = grid.data;
      csvData = prepareCsvGrid(gridData, keys, csvData);

      var parent = grid.$root;
      for (var i = 0; i < opts.parentDepth; i++) {
        parent = parent.parent();
      }

      var newLinkPanel = parent.find(opts.containerPanel);
      var oldLinkPanel = parent.find(opts.containerPanel + ' .' + opts.linkClass);

      if (oldLinkPanel !== null) {
        oldLinkPanel.remove();
      }

      if (gridData.length !== 0) {
        var csvDataLinkHtml = '<a class="' + opts.linkClass + '" href="data:text/csv;charset=UTF-8,';
        // encodeURI() ou encodeURIComponent() ne supporte pas les accents
        csvDataLinkHtml += escape(csvData);
        csvDataLinkHtml += '" download="' + opts.fileName + '">';
        csvDataLinkHtml += '<span title="' + opts.linkLabel + '" class="glyphicon ' + opts.linkIcon + '"></span></a></div>';

        newLinkPanel.append(csvDataLinkHtml);
      }
    }

    setTimeout(showDs, 0);
    scope.catHashKeys = function () {
      var hash = '';
      for (var idx in scope.renderedRows) {
        if (scope.renderedRows.hasOwnProperty(idx)) {
          hash += scope.renderedRows[idx].$$hashKey;
        }
      }
      return hash;
    };
    if (opts && opts.customDataWatcher) {
      scope.$watch(opts.customDataWatcher, showDs);
    } else {
      scope.$watch(scope.catHashKeys, showDs);
    }
  };
}

ng-grid

$scope.gridLayoutPlugin = new ngGridLayoutPlugin();
$scope.gridCsvExportPlugin = new ngGridCsvExportPlugin();
// Résultat de la recherche (Liste des briefs)
$scope.searchResult = {
    data: 'briefs',
    enableRowSelection: true,
    selectedItems: $scope.selectedBriefs,
    enableCellEditOnFocus: false,
    enableColumnResize: true,
    enableColumnReordering: true,
    showFilter: true,
    multiSelect: false,
    showFooter: true,
    i18n: 'fr',
    columnDefs: [
        { field: 'requestType', displayName: 'Type demande', width: '7%' },
        { field: 'agency', displayName: 'Mandataire client', width: '11%' },
        { field: 'advertiser', displayName: 'Annonceur client', width: '11%' },
        { field: 'product', displayName: 'Produit client', width: '12%' },
        { field: 'campaignName', displayName: 'Nom campagne', width: '11%' },
        { field: 'version', displayName: 'Version', width: '4%' },
        { field: 'commercialProduct', displayName: 'PC', width: '7%' },
        { field: 'status', displayName: 'Statut', width: '7%' },
        { field: 'budget', displayName: 'Budget Net FO', width: '7%' },
        { field: 'beginDate', displayName: 'Début période', width: '6%', sortFn: $scope.sortDateForNgGrid },
        { field: 'endDate', displayName: 'Fin période', width: '6%', sortFn: $scope.sortDateForNgGrid },
        { field: 'receptionDate', displayName: 'Date réception', width: '6%', sortFn: $scope.sortDateForNgGrid }
    ],
    sortInfo: { fields: ['name'], directions: ['asc'] },
    rowTemplate: $scope.doubleClickTemplate,
    plugins: [$scope.gridLayoutPlugin, $scope.gridCsvExportPlugin]
};

Answer 1

我刚刚找到了如何重新启动插件。

我在获得搜索结果后调用init函数：

pdf.js

ng-grid-csv-export插件在数据更新后未导出正确的数据

1 个答案: