时间戳

首页 > 解决方案 > 在 ag-grid 中为单元格渲染器导出数据

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

问题描述

我正在使用 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，但在颜色列的导出数据中总是未定义。

我该如何解决这个问题？

标签： javascriptangularjsag-grid

解决方案

您可以在导出到 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: ...
  });
}

推荐阅读