如何在点击Ag Grid行单元格时获取列标题或字段名？

在Ag Grid中，点击单元格时可以通过单元格点击事件直接获取对应列的headerName和field，核心是利用事件参数中的column对象。以下是具体实现（以你提到的Angular框架为例）：

1. 绑定单元格点击事件 #

在Ag Grid组件模板中绑定cellClicked事件：

<ag-grid-angular
  [rowData]="yourRowData"
  [columnDefs]="yourColumnDefs"
  (cellClicked)="handleCellClick($event)"
  <!-- 其他必要配置 -->
></ag-grid-angular>

2. 在事件处理函数中获取列信息 #

在组件类中实现事件处理方法，通过event.column.getColDef()拿到列定义对象，从中提取headerName和field：

import { CellClickedEvent } from 'ag-grid-angular';

// ...

handleCellClick(event: CellClickedEvent) {
  const columnDef = event.column.getColDef();
  // 获取列标题
  const headerName = columnDef.headerName;
  // 获取列字段名
  const fieldName = columnDef.field;

  // 这里可以根据需求使用这两个值，比如打印或业务逻辑处理
  console.log('当前点击列标题:', headerName);
  console.log('当前点击列字段:', fieldName);
}

补充说明 #

• 不管是静态列还是动态生成的列，getColDef()都会返回当前列的最终配置，包括自定义的属性。
• 如果是其他框架（React/Vue），逻辑完全一致：在对应的单元格点击事件回调中，通过事件参数的column.colDef（或column.getColDef()）获取列定义，进而拿到headerName和field。

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