如何在不指定 ag-grid 中的字段的情况下使用单元格渲染器答案

【问题标题】：How to use a cell-renderer without specifying a field in ag-grid如何在不指定 ag-grid 中的字段的情况下使用单元格渲染器
【发布时间】：2019-06-30 23:04:08
【问题描述】：

我想使用最后一列作为扩展行功能。为此，我正在使用主/详细信息。 master 的最后一列将只是一个向下箭头图标，单击该图标将显示详细信息行。如果不提供字段名称，我无法添加最后一列。该列呈现为空。我怎样才能使用这样的东西：

{
   headerName: '',
   field: "", // as not associated to any column data
   cellRenderer: "agGroupCellRenderer"
}

【问题讨论】：

如果完全删除field: "" 会发生什么，它不会呈现吗？您是否尝试过 cellRendererFramework 并传递您需要的自定义回调
没有。除非提供了真正的字段（存在于数据中），否则该列不会呈现。
尝试将 fieldName 与现有字段一起使用，并将其与 cellRendererFramework 与您的自定义回调结合起来，看看是否能达到目的
查看我刚刚创建的这个示例，plnkr.co/edit/4CrQn6?p=preview 它用我提供的自定义文本 DOWN 替换字段值。基本上你会做同样的事情，除了提供自定义 HTML 或 SVG 或 IMG。
@Rikin 它仍然被映射到一个字段。假设有 5 个字段，我想在第 6 列添加一个编辑按钮，而不将其映射到任何字段。

标签： datatables ag-grid ag-grid-react

【解决方案1】：

这是您可能正在寻找的工作示例，我不必依赖field。 https://plnkr.co/edit/RxjZ9rUt7HUhlw5ejUd6?p=preview 示例在 ReactJS ag-grid 代码中，但同样适用于任何框架，因为 ag-grid 依赖于您传入的 columnDefinition 数组。

以下是代码更改：

{
  colId: "action",  // optional
  headerName: "Action", // set it to single space if you dont want any text
  cellRendererFramework: (params) => <button onClick={() => (console.log(params), params.node.setSelected(true))}>+</button>, // this can be your any custom function
  suppressSorting: true,  // sorting for this field dont make sense, but optional
},

希望对您有所帮助。

【讨论】：