如何在 AG Grid 中按行应用不同格式（如百分比与千分位小数）-js教程-PHP中文网

ag grid 不支持直接按行设置格式，但可通过自定义 valueformatter 函数，基于当前行的标识字段（如首列值）动态选择百分比或数字格式，实现同一列内不同行呈现不同样式。

ag grid 不支持直接按行设置格式，但可通过自定义 valueformatter 函数，基于当前行的标识字段（如首列值）动态选择百分比或数字格式，实现同一列内不同行呈现不同样式。

在 AG Grid 中，格式化能力默认以列为单位（通过 columnDefs.valueFormatter），但实际业务中常需“同一列、不同行显示不同格式”——例如表头为 col1、col2、col3，首行为数值型（带千分位，如 2,345.6），次行为百分比（如 13.8%）。由于数据结构不可转置（即不能将行转为列），必须在渲染时动态判断。

核心思路是：编写一个通用 valueFormatter，利用参数中的 params.node 和 params.data 获取当前行上下文，根据某列（如第一列的值）决定格式逻辑。

✅ 示例实现（React + AG Grid v30+）：

const columnDefs = [
  { field: 'category', headerName: 'Category', width: 120 },
  {
    field: 'col2',
    headerName: 'Col 2',
    valueFormatter: (params) => {
      const rowType = params.data?.category; // 假设首列为类型标识字段
      const value = params.value;

      if (rowType === 'value') {
        // 数值格式：保留1位小数 + 千分位
        return new Intl.NumberFormat('en-US', {
          minimumFractionDigits: 1,
          maximumFractionDigits: 1,
        }).format(value);
      } else if (rowType === 'percentage') {
        // 百分比格式：转为百分比并保留1位小数
        return new Intl.NumberFormat('en-US', {
          style: 'percent',
          minimumFractionDigits: 1,
          maximumFractionDigits: 1,
        }).format(value / 100); // 注意：若原始值为13.8（非0.138），则此处用 value / 100；若已是小数，则直接 format(value)
      }
      return value;
    },
  },
  {
    field: 'col3',
    headerName: 'Col 3',
    valueFormatter: (params) => {
      const rowType = params.data?.category;
      const value = params.value;

      if (rowType === 'value') {
        return new Intl.NumberFormat('en-US', {
          minimumFractionDigits: 1,
          maximumFractionDigits: 1,
        }).format(value);
      } else if (rowType === 'percentage') {
        return new Intl.NumberFormat('en-US', {
          style: 'percent',
          minimumFractionDigits: 1,
          maximumFractionDigits: 1,
        }).format(value / 100);
      }
      return value;
    },
  },
];

? 数据结构建议（确保可识别行类型）：

const rowData = [
  { category: 'value',   col2: 2345.6, col3: 3677.7 },
  { category: 'percentage', col2: 13.8,   col3: 9.6    },
];

⚠️ 注意事项：

params.data 是当前行完整数据对象，务必确保其存在且含可区分行类型的字段（如 category、type 或 label）；
若原始百分比数据存储为 13.8（而非 0.138），调用 Intl.NumberFormat 的 style: 'percent' 时需先除以 100；反之则直接传入；
避免在 valueFormatter 中执行重计算或异步操作，它应在毫秒级完成；
如需支持国际化（如德语千分位为 .、小数点为 ,），可传入对应 locale（如 'de-DE'）；
此方案兼容服务端渲染（SSR）和所有 AG Grid 渲染模式（客户端/服务端/无穷滚动）。

? 进阶提示：若行类型标识不固定（如无 category 字段），也可通过 params.node.rowIndex 判断奇偶行，但强烈不推荐——耦合渲染顺序，违背数据驱动原则。始终优先使用语义化字段做条件判断。

综上，AG Grid 的灵活性在于将格式逻辑下沉至函数式接口，通过 params 暴露的行级上下文，轻松实现“列定义统一、行渲染各异”的专业表格效果。