You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular中AG Grid如何捕获用户行切换(TAB/鼠标操作)事件?

在Angular的AG Grid中捕获行切换事件(TAB/鼠标操作)

直接用AG Grid提供的focusedCellChanged事件就能解决你的问题——这个事件会在聚焦单元格发生变化时触发,不管是通过TAB键切换行、鼠标点击其他行的单元格,都能捕获到,完美覆盖你的需求。

实现步骤:

  1. 在AG Grid模板中绑定事件
<ag-grid-angular
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  (focusedCellChanged)="onFocusedCellChanged($event)"
  <!-- 你的其他配置,比如可编辑列的设置 -->
></ag-grid-angular>
  1. 在组件中实现事件处理逻辑
import { FocusedCellChangedEvent } from 'ag-grid-angular';

// ...

onFocusedCellChanged(event: FocusedCellChangedEvent) {
  const oldRowIndex = event.oldCellPosition?.rowIndex;
  const newRowIndex = event.newCellPosition.rowIndex;

  // 仅处理跨行切换的情况(同一行内切换单元格不触发)
  if (oldRowIndex !== undefined && oldRowIndex !== newRowIndex) {
    const currentRowData = event.api.getRowNode(newRowIndex)?.data;
    if (currentRowData) {
      // 这里写你的业务逻辑,比如保存前一行编辑内容、记录当前行信息
      console.log('当前切换到的行数据:', currentRowData);
    }
  }
}

补充说明:

  • focusedCellChanged事件的回调参数包含newCellPosition和oldCellPosition,通过rowIndex可以获取对应行的节点,进而拿到行数据。
  • 如果不需要区分同一行内的单元格切换,去掉行索引判断即可,每次聚焦变化都触发逻辑。

内容的提问来源于stack exchange,提问作者iShah

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 20:54:53