Ag Grid 部分单元格格式 - 例如如何在单元格中设置一些文本样式 - 粗体、斜体、彩色（但不是其他文本）

Question

在一个简单的 HTML table 中，如果我想将文本格式应用于单元格中的一部分，例如：

<td>Qty: <b>5</b></td>

将文本的一部分设为粗体，而另一部分不设为粗体非常简单。我查看了一堆 Ag Grid 文档，但没有看到一种简单的方法来做到这一点。（我不想为此需要单元格渲染器组件；只是一个使用值格式化程序的简单方法。）

这是我看过的一些内容，但没有提供：

https://www.ag-grid.com/javascript-data-grid/cell-content/

https://blog.ag-grid.com/conditional-formatting-for-cells-in-ag-grid/

https://www.ag-grid.com/javascript-data-grid/value-formatters/

我希望有这样的方法：

valueFormatter(params) {
   return 'Qty: <b>' + params.value + '</b>';
},

但我试过了，它没有 interpret/format 使用 HTML 标签。

Answer 1

值格式化程序只能进行字符串格式化。您必须使用单元格渲染器，如 in the docs 所述。例如：

myRenderer.jsx:

export default props => {
   const cellValue = props.valueFormatted ?? props.value;

   return (
       <span>Qty: <b>{cellValue}</b></span>
   );
}

gridComponent.jsx:

import MyRenderer from './myRenderer.jsx';
/* ... */
<AgGridReact frameworkComponents={{ myRenderer: MyRenderer }}>
  <AgGridColumn field="qty" cellRenderer="myRenderer" />
</AgGridReact>

Answer 2

我找到了一种方法；它使用 cellRenderer，但不需要单独的组件 - 它可以直接从 columnDefs 定义：

  {
    field: 'ItemID',
    headerName: 'Item ID',
    cellRenderer: params => `<b>ID:</b> ${params.data.ItemID}`,
  },

这使您可以直接在 columnDef 中提供次要的选择性格式设置，而无需为每个字段创建一个单独的相对普通的组件。使代码更短，编写起来更快，更易于维护。

Ag Grid 部分单元格格式 - 例如如何在单元格中设置一些文本样式 - 粗体、斜体、彩色（但不是其他文本）

Ag Grid partial cell formatting - e.g. how to have some text in a cell styled - bold, italic, colored (but not other text)

formatting

reactjs

ag-grid

ag-grid-react