3

我正在使用 ng-grid 并且某些列应用了过滤器。但是，当我现在导出到 CSV 时，显示的值没有过滤器：json 中的记录可能像这样：

{"service_date":"2014-02-10T00:00:00.000Z",
 "service_code":"someJob3",
 "price":1234.56}

但在网格中显示为：

Service Date |Service Desc | Price
-------------------------------------
Feb 10,2014  |Some Job 3   | $1,234.56

我希望当我得到一个提取时，它看起来好像应用了过滤器，但唯一的 csv 插件似乎没有调用单元过滤器，而是简单地以原始形式返回值。如何调用过滤器？

4

4 回答 4

3

我发现了一个适用于 ui-grid（ng-grid 的替代版本）的解决方案，它比 Matt Welch 必须为 ng-grid 2.0 开发的插件解决方法简单得多。

exporterFieldCallback您可以在 gridOptions中指定一个，然后根据col.name. 对于我的用例，我有用户 ID，我需要交叉引用数组索引。我为表格构建了一个 cellFilter，但它显然没有反映在导出的 CSV 中，直到我像这样添加 exporterFieldCallback：

$scope.gridOptions = {
    ...

    exporterFieldCallback: function( grid, row, col, input ) {
        if( col.name == 'account_executive_id' || col.name == 'account_manager_id' ) {
            return adminUsers.getUserName(input);
        } else {
            return input;
        }
    },
    ...
}

回调需要网格、行、列和输入变量，然后您可以在其中执行任何操作以返回您需要导出的任何值。如果有一个“使用网格中显示的内容”标志会很好，但这仍然是一个非常简单的解决方案，即使它似乎没有记录。

于 2015-02-28T07:47:48.643 回答
1

我知道这个问题已经有几个月了，但我一直在寻找同样的东西，并想我会记录下我是如何解决这个问题的。

旁注：我看到ng-grid-wysiwyg-export.js插件文件夹中有一个插件，但我没有找到关于它使用的示例或文档，也没有花时间弄清楚，因为......

我确实发现playground.htmlng-grid plugins 文件夹中有一个文件，其中包含 CSV 插件的示例。它演示了如何使用columnOverrides功能，您可以通过opts参数将其传递给插件构造函数：

$scope.myData = [ 
    {hasThing: false,  obj: {a:5, b:6}, name: "Moroni", age: 50, ln: 'sdf'},
    {hasThing:  true,  obj: {a:6, b:7}, ln: "Tiasdfsdfnd", age: 43}
];

var csvOpts = { columnOverrides: { obj: function(o) { return o.a + '|' +  o.b; } } };

$scope.gridOptionsBig = {
    data: 'myData',
    plugins: [new ngGridCsvExportPlugin(csvOpts)],
    showFooter: true
};

因此，对于上述问题中的示例，您可以为要应用过滤器的每一列定义覆盖函数，如下所示：

var csvOpts = { 
    columnOverrides: {
        service_date: function(d) { return $filter('date')(d); },
        service_code: function(c) { return $filter('myCustomCamelCaseFilter')(c); },
        price: function(p) { return $filter('currency')(p); }
    }
};

虽然定义这些而不是仅仅从 columnDefs 调用已经定义的 cellFilter 需要做一些额外的工作，但这种方法确实可以让您灵活地让导出的数据与屏幕上显示的数据略有不同......也许更具表现力的日期格式等

于 2014-08-04T18:24:28.590 回答
1

我为此开发了一个基于exporterFieldCallback.

我的想法是不要重复您在 中已有的过滤器表达式columnDefs，例如：

  {
    field: 'totalFileSize',
    headerCellClass: $scope.highlightFilteredHeader,
    cellFilter: "notAvailable:'N/A' | readableFileSize",
    displayName: "Total size",
    cellClass:"rightcell"
  },

当然，其中notAvailable和readableFileSize都是我定义的自定义过滤器，并且经常被 ui-grid 使用。

exporterFieldCallback: function( grid, row, col, input ) {
  if (col.cellFilter!=undefined && col.cellFilter.length !=0) {
    var filters = col.cellFilter.split('|');
    for(i =0; i<filters.length;i++) {
      var pars = filters[i].match(/[^\:"']+|'([^']*)'|'([^']*)'+/g);
      var filterName= pars[0].trim();
      var filterPar = null;
      if (pars.length ==2) {
         filterPar = pars[1].slice(1, -1);
        input = $filter(filterName)( input,filterPar);
      } else {
        input = $filter(filterName)( input );
      }
    }
  }
  return input;

}

它很差，因为我是一个 Javascript 假人，它仅适用于不接受参数或一个参数的过滤器；但可以肯定的改进，我很着急。同样在正则表达式中很可能有一些冗余

如果为该列定义了 cellFilter，它也会以编程方式再次应用。使用这个单一的通用函数，我将导出添加到所有 ui 网格的所有列。

于 2016-03-31T12:42:43.297 回答
0

基于“angelodelia”的回应。这是我的修改版本。这适用于具有多个参数的多个过滤器。

 exporterFieldCallback: function (grid, row, col, input) {
            if (col.cellFilter) { // check if any filter is applied on the column
                var filters = col.cellFilter.split('|'); // get all the filters applied
                angular.forEach(filters, function (filter) {
                    var filterName = filter.split(':')[0]; // fetch filter name
                    var filterParams = filter.split(':').splice(1); //fetch all the filter parameters
                    filterParams.unshift(input); // insert the input element to the filter parameters list
                    var filterFn = $filter(filterName); // filter function
                    // call the filter, with multiple filter parameters. 
                    //'Apply' will call the function and pass the array elements as individual parameters to that function.
                    input = filterFn.apply(this, filterParams); 
                })
                return input;
            }
            else
                return input;
        }

这个通用函数将帮助导出在 UI Grid 中显示的数据（在应用过滤器之后）。

于 2017-03-10T10:06:23.923 回答