AG Grid：cellRenderer 禁用值格式化程序

Posted 2023-03-28

【中文标题】AG Grid：cellRenderer 禁用值格式化程序

【英文标题】：AG Grid: cellRenderer disables value formatter

【发布时间】：2019-09-21 00:28:17

【问题描述】：

我的 AG-Grid 中有一个自定义 cellRenderer，我正在使用 valueformatter：

const columnDefs = R.map(
  R.pipe(x => (
    headerName: strings[x.name],
    field: x.name,
    valueFormatter: contactInformationFormatter,
    comparator:
      x.name === 'group' || x.name === 'tendency'
        ? selectValueToComparableNumber
        : null,
    cellRenderer: x.compenent !== 'select' ? 'highlightCellRenderer' : null,
    cellEditor: componentToCellEditors[x.component],
    cellEditorParams:
      x.component === 'select' ? cellEditorParams[x.name] : null,
    getQuickFilterText: function(params) 
      return x.component === 'select' ? null : params.value;
    ,
  )),
  contactInformationCells
);

如果我排除 cellRenderer，格式化的值会正确显示。如果我包含它，我会得到未转换的值。这是一个错误吗？

这是我的格式化程序和我的cellRenderer：

function contactInformationFormatter(params) 
  return strings[params.value] || params.value;


import React from 'react';
import  useSelector  from 'react-redux';

import  getSearchValue  from '../../layout/header/search-value-reducer';

function HighlightCellRenderer( value, ...props ) 
  const searchValue = useSelector(getSearchValue);
  if (searchValue && value.toLowerCase().includes(searchValue)) 
    return <strong>value</strong>;
  
  return <span>value</span>;


export default HighlightCellRenderer;

【参考方案1】：

这不是错误。您必须使用cellRenderer 的params 中的valueFormatted 属性才能获得valueFormatter 的格式化输出。 value 属性保存原始的未格式化数据。所以cellRenderer 就像

function HighlightCellRenderer( valueFormatted, ...props ) 
  const searchValue = useSelector(getSearchValue);
  if (searchValue && valueFormatted.toLowerCase().includes(searchValue)) 
    return <strong>valueFormatted</strong>;
  
  return <span>valueFormatted</span>;

【讨论】：

谢谢，我正在努力寻找问题所在。 ag-grid 文档说 “可以将两者结合使用，在这种情况下，值格式化程序的结果将被传递给单元格渲染器。” - 但他们没有提到这一点你必须使用 valueFormatted 字段。

如果有人对带有和不带值格式化程序的字段重用相同的单元格渲染器 - ` value = params.valueFormatted!=null ？ params.valueFormatted : params.value; `