在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格式导出网格时,我得到了颜色列的未定义,这是一个单元格渲染器,我搜索了一个解决方案,我在官方文档中找到了这个:

将使用原始值而不是单元格渲染器的结果,这意味着:

• 不会使用Cell Renderers.
• 将使用Value Getters.
• 不使用Cell Formatters(使用processCellCallback).

正如您所看到的,我已经在使用valueGetter,但我总是在颜色列的导出数据中未定义.

我怎么解决这个问题？

Answer 1

您可以在导出为 CSV 时使用processCellCallback来解决它。通过这种方式，您可以准确地查看和控制将要导出的内容。

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

来自 ag-grid 文档：导出的内容

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

  • ...
  • 不会使用单元格格式器（使用 processCellCallback 代替）。

因此，假设您在名为columnDefs. 现在你将它传递给你的gridOptions.

const gridOptions = {
  columnDefs: columnDefs,
}

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

导出为 CSV：

现在您必须将提供的getContextMenuItems函数添加到您的gridOptions对象中。有关更多信息：配置上下文菜单

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. 在操作上，您需要的是exportDataAsCsv从gridOptions.api. 现在（我知道这是大量信息）您拥有的选项之一是包含您的processCellCallback函数，您可以确保传递单元格值。这样做非常有用，因为您可以根据需要操纵该值（例如，将 $ 符号添加到一个应该是钱的数字上）。

自定义按钮：

在您需要自定义按钮的情况下，没有什么可说的。您唯一需要做的就是确保exportDataAsCsv在触发 onclick 事件时调用gridOptions.api 上的 。

就像是：

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