在 ag-grid 中为单元格渲染器导出数据

Question

我正在使用 ag-grid，并且我的列定义如下：

{
    headerName: "Color",
    valueGetter: function (params) {
        return JSON.parse(params.data.color).name;
    },
    field: 'color',
    cellRenderer: function (params) {
        if (angular.isDefined(params.data) && angular.isDefined(params.data.color)) {
            var color = JSON.parse(params.data.color);
            return '<div style="width: 50px; height: 18px; background-color:' + color.htmlValue + ';"></div>';
        }
    },
    suppressMenu: true,
    suppressSorting: true
}

当我以 CSV 格式导出网格时，颜色列未定义，这是一个单元格渲染器，我为此搜索了解决方案，并在官方文档中找到了这个：

将使用原始值，而不是单元格渲染器的结果， 意思：

• 将不使用单元格渲染器。
• 将使用值获取器。
• 将不使用单元格格式化程序（改用 processCellCallback）。

如您所见，我已经在使用 valueGetter，但在导出的颜色列数据中总是未定义。

我该如何解决这个问题？

Answer 1

您可以在导出为 CSV 时使用 processCellCallback 来解决它。这样您就可以准确地查看和控制要导出的内容。

除了列定义之外，您还可以将其他参数传递给您的网格选项。

来自 ag-grid 文档：What gets exported

• 将使用原始值，而不是单元格渲染器的结果， 意思：

  • ...
  • 将不使用单元格格式化程序（改用 processCellCallback）。

因此，假设您在名为columnDefs 的变量中定义了列。现在你把它传给你的gridOptions。

const gridOptions = {
  columnDefs: columnDefs,
}

后一个代码应该可以工作。因此，现在您要处理在上下文菜单上单击CSV Export（如果可以的话，您也可以使用自定义按钮来完成）。

导出为 CSV：

现在您必须将提供的 getContextMenuItems 函数添加到您的 gridOptions 对象。欲了解更多信息：Configuring the Context Menu

const gridOptions = {
  columnDefs: columnDefs,
  getContextMenuItems() {
    return [
      {
        name: 'CSV Export',
        action: function(params) {
          gridOptions.api.exportDataAsCsv({
            processCellCallback: function(cell) {
              // Manipulate the value however you need.
              return cell.value;
            },
          });
        },
      },
    ];
  },
};

我们的想法是获取CSV Export 并以编程方式在action 中添加您需要发生的事情。在操作上，您需要从gridOptions.api 调用exportDataAsCsv 函数。现在（我知道这是大量信息）您拥有的选项之一是包含您的 processCellCallback 函数，您可以在其中确保传递单元格值。这样做非常有用，因为您可以根据需要操纵值（例如，将 $ 符号添加到应该是金钱的数字）。

自定义按钮：

如果您需要自定义按钮，无需多言。您唯一需要做的就是确保在触发 onclick 事件时调用 gridOptions.api 上的 exportDataAsCsv。

类似：

onClick() {
  gridOptions.api.exportDataAsCsv({
    processCellCallback: ...
  });
}

Answer 2

正如另一个答案所提到的，ag-grid 文档特别声明“不会使用单元渲染器”： https://www.ag-grid.com/javascript-grid-excel/#what-gets-exported

我做了一个解决方法，从 processCellCallback 函数调用 cellRenderer，如下所示：

processCellCallback: function (cell) {
    var cellVal = cell.value;
    if(_.get(cell, 'column.colDef.cellRenderer')) {
        cellVal = cell.column.colDef.cellRenderer({value: cell.value});
    }
    return cellVal;
}      

Answer 3

聚会迟到了，但我最近也遇到了同样的不便，因为有四列需要 cellRenderer，所以缺少原始值，并且根据文档，这些值不会被使用。在我的示例中，我需要插入 in_progress、complete、unanswered 和 needs_review 的原始值

gridApi.exportDataAsExcel({
  ...
  processCellCallback: (params) => processCells(params)
});


const processCells = (cell) =>  {
    let cellVal = cell.value;
    const { 
      in_progress, 
      complete, 
      unanswered, 
      needs_review 
    } = cell.node.data.percentageStatus; // raw data source

    if(!cell.value){ // for the 4 cols this was always undefined
      switch(cell.column.colId){
        case "in_progress":
          cellVal = in_progress;
          break;
        case "completed":
          cellVal = complete;
          break;
        case "unanswered":
          cellVal = unanswered;
          break;
        case "needs_review":
          cellVal = needs_review;
          break;
        default:
          cellVal = "n/a";
      }
    }
    return cellVal;
  } 

Answer 4

这就是我解决这个问题的方法：

当我调用导出函数时，cellRenderer 函数中的参数 arg 与加载网格时不一样，当我们导出时，参数 arg 看起来像这样：

{export:true, value: "{...}"}

value 是字段键中的值，所以在 cellRenderer 函数中我必须这样做：

if(angular.isDefined(params.export)){
    return JSON.parse(params.value.slice(1, -1)).name;
}

请注意，总是添加双引号，这看起来很奇怪，所以当我们在字段中有一个字符串值时，params.value 将如下所示：""theStringValue""，这就是我使用params.value.slice(1, -1) 的原因。