如何在AG Grid Angular中实现输入单元格后激活另一单元格编辑

核心实现思路 #

通过组件内的状态变量控制第二列的可编辑性，监听第一列的编辑完成事件，当第一列单元格有有效输入时更新状态，触发第二列可编辑权限的激活。

具体代码实现 #

1. 组件类逻辑 #

在组件中定义状态变量，绑定AG Grid的单元格值变更事件，处理第一列的输入触发逻辑：

import { Component } from '@angular/core';
import { ColDef, GridReadyEvent } from 'ag-grid-community';

@Component({
  selector: 'app-grid-example',
  templateUrl: './grid-example.component.html',
  styleUrls: ['./grid-example.component.css']
})
export class GridExampleComponent {
  // 控制第二列可编辑状态的变量
  isSecondColEditable = false;

  // 列配置定义
  columnDefs: ColDef[] = [
    {
      headerName: '第一列',
      field: 'firstCol',
      // 第一列默认始终可编辑
      cellEditable: true
    },
    {
      headerName: '第二列',
      field: 'secondCol',
      // 通过回调动态判断是否允许编辑
      cellEditable: () => this.isSecondColEditable
    }
  ];

  // 示例行数据
  rowData = [
    { firstCol: '', secondCol: '' }
  ];

  // 监听单元格值变更事件
  onCellValueChanged(event: any) {
    // 仅处理第一列的输入，且输入内容不为空的情况
    if (event.colDef.field === 'firstCol' && event.newValue.trim() !== '') {
      this.isSecondColEditable = true;
      // 强制刷新第二列单元格，让可编辑状态立即生效
      event.api.refreshCells({
        columns: ['secondCol'],
        rowNodes: [event.node],
        force: true
      });
    }
    // 可选：第一列清空时取消第二列编辑权限
    // else if (event.colDef.field === 'firstCol' && event.newValue.trim() === '') {
    //   this.isSecondColEditable = false;
    //   event.api.refreshCells({ columns: ['secondCol'], rowNodes: [event.node], force: true });
    // }
  }

  onGridReady(params: GridReadyEvent) {
    // 网格初始化后的自定义操作（可选）
  }
}

2. 模板文件（HTML） #

在模板中绑定网格配置与事件：

<ag-grid-angular
  style="width: 100%; height: 300px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  (gridReady)="onGridReady($event)"
  (cellValueChanged)="onCellValueChanged($event)"
></ag-grid-angular>

关键细节说明 #

• cellEditable回调：第二列通过该回调动态读取状态变量的值，实现编辑权限的实时控制。
• cellValueChanged事件：精准监听第一列的输入变更，确保只有当用户输入有效内容时才激活第二列权限。
• refreshCells方法：强制刷新第二列单元格状态，避免因AG Grid缓存导致的状态不及时更新问题。

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