angularjs 调用单元格筛选器Ng-grid导出

piv4azn7  于 2022-11-28  发布在  Angular
关注(0)|答案(5)|浏览(214)

我正在使用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插件似乎不调用单元格过滤器,并简单地返回原始形式的值。我如何调用过滤器?

inkz8wg9

inkz8wg91#

我发现了一个与ui-grid(ng-grid的替代版本)一起工作的解决方案,它比Matt Welch为ng-grid 2. 0开发的插件解决方案简单得多。
您可以在gridOptions中指定一个exporterFieldCallback,然后根据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;
        }
    },
    ...
}

回调需要网格、行、列和输入变量,然后您可以在其中执行任何操作以返回您需要导出的任何值。如果有一个“使用网格中显示的内容”标志就好了,但这仍然是一个相当简单的解决方案,即使它看起来没有文档记录。

pw9qyyiw

pw9qyyiw2#

我知道这个问题是几个月前的,但我一直在寻找同样的东西,并认为我会记录我如何解决这个问题。
边注:我看到有一个ng-grid-wysiwyg-export.js插件在插件文件夹,但我没有发现它的使用的例子或文档,并没有花时间去弄清楚,因为...
我 * 确实 * 发现ng-grid plugins文件夹中有一个playground.html文件,其中包含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需要一点额外的工作,但是这种方法确实为您提供了灵活性,使导出的数据与屏幕上显示的数据略有不同......也许是更具表现力的日期格式,等等。

dly7yett

dly7yett3#

我为此开发了一个基于exporterFieldCallback的解决方案。
我的想法是不要重复columnDefs中已有的过滤器表达式,例如:

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

其中,notAvailablereadableFileSize都是由我定义的定制过滤器,并且由UI网格定期使用。

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,它将接受该cellFilter,并以编程方式再次应用它。使用这个通用函数,我将export添加到所有ui网格的ALL列中。

bmp9r5qi

bmp9r5qi4#

基于来自“angeloderia”的响应。这是我修改的版本。这将适用于多个参数的多个过滤器。

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网格中显示的数据(应用过滤器后)。

v1l68za4

v1l68za45#

试试这个:

gridOptions.exporterFieldApplyFilters = true;

相关问题