如何在AG Grid中为行和单元格层级添加自定义属性

AG Grid 原生支持在行、单元格层级添加自定义属性，无需手动操作DOM，通过官方提供的配置项即可实现。

1. 行级自定义属性配置 #

使用gridOptions中的getRowAttributes配置项，返回需要绑定到行元素的属性对象即可，示例如下：

const gridOptions = {
  // 为行元素添加自定义属性
  getRowAttributes: params => {
    return {
      // 你需要的自定义属性
      'my-custom-attr': 'dummyValue',
      // 也支持根据行数据动态生成属性值
      'data-row-index': params.node.rowIndex,
      'data-row-id': params.data?.id ?? 'unknown'
    };
  },

  // 你原来的CSS类相关配置保持不变
  rowClass: 'my-green-class',
  getRowClass: params => {
    if (params.node.rowIndex % 2 === 0) {
      return 'my-shaded-effect';
    }
  },

  // 其余网格配置项 ...
}

配置后生成的行DOM结构就会自带你定义的my-custom-attr="dummyValue"属性，和你给出的预期效果完全一致。

2. 单元格级自定义属性配置 #

如果需要给单元格加自定义属性，在列定义columnDefs中使用getCellAttributes配置项即可，示例如下：

const columnDefs = [
  {
    field: 'sickDays',
    getCellAttributes: params => {
      return {
        'my-cell-attr': 'customCellValue',
        'data-cell-value': params.value
      };
    }
  },
  // 其他列配置...
]

注意事项 #

• 自定义属性建议优先使用data-前缀，符合HTML规范的同时可以避免和AG Grid原生属性、浏览器原生属性产生冲突。
• 属性值如果是动态生成的，注意判断params.data是否存在，避免行数据为空时报错。

内容的提问来源于stack exchange，提问作者Sourabh