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

The raw values, and not the result of cell renderer, will get used, meaning:

• Cell Renderers will NOT be used.
• Value Getters will be used.
• Cell Formatters will NOT be used (use processCellCallback instead).

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

我该如何解决这个问题？

Answer 1

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

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

来自农业网格文档:What gets exported

• The raw values, and not the result of cell renderer, will get used, meaning:

  • ...
  • Cell Formatters will NOT be used (use processCellCallback instead).

那么，假设您在名为 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: ...
  });
}