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

Posted 2023-02-18

【中文标题】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)

【发布时间】：2022-01-14 13:33:24

【问题描述】：

在一个简单的 html 表格中，如果我想对单元格中的某个部分应用文本格式，例如：

<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>';
,

但我已经尝试过了，它不使用 HTML 标签解释/格式化。

【问题讨论】：

你不能使用这样的html标签，你必须使用cellStyle、cellClass或cellClassRules来实现这个

我只希望单元格中的部分文本格式化。

如果您只想要格式，请使用cellRenderer。

【参考方案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>

【讨论】：

我希望找到一种不需要单独组件的方法 - 可以直接在列 def 中定义的东西，但您的答案似乎是使用 AG Grid 实现此目的的正确/唯一方法。谢谢！

找到了一种更好的方法来做这样简单的事情 - 见下文。

【参考方案2】：

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

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

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

【讨论】：

太好了，这对于小型渲染器来说肯定更好。