如何使ag-grid自定义单元格编辑器支持单击编辑与默认导航行为？

我来帮你搞定这两个问题，让自定义编辑器和默认单元格的操作体验完全一致：

一、修复单击直接进入编辑的问题 #

默认单元格能单击直接编辑，是因为ag-grid会自动处理焦点和编辑触发逻辑。你的自定义编辑器需要补充两个关键方法，同时确保输入框能正确获取焦点：

1. 实现afterGuiAttached()方法：当编辑器挂载到DOM后，主动让输入框获取焦点，这样单击单元格时就能直接进入编辑状态。
2. 实现isPopup()方法：告诉ag-grid这个编辑器不需要弹出层，直接在单元格内渲染，和默认编辑器行为一致。

修改后的组件类代码：

import { Component, ViewChild } from '@angular/core';
const KEY_TAB = 9;
const ENTER = 13;
const ARROW_RIGHT = 39;
const ARROW_LEFT = 37;
@Component({
  selector: 'app-numeric-editor',
  templateUrl: './numeric-editor.component.html',
  styleUrls: ['./numeric-editor.component.scss']
})
export class NumericEditorComponent {
  @ViewChild('i') textInput;
  params;
  agInit(params: any): void {
    this.params = params;
  }
  getValue() {
    return this.textInput.nativeElement.value;
  }
  // 新增：编辑器挂载后设置焦点，支持单击直接编辑
  afterGuiAttached() {
    this.textInput.nativeElement.focus();
    // 可选：自动选中输入框内容，方便直接覆盖修改
    this.textInput.nativeElement.select();
  }
  // 新增：告诉ag-grid不需要弹出层，保持单元格内编辑
  isPopup() {
    return false;
  }
  onKeyPress(event) {
    if (!isNumeric(event)) {
      event.preventDefault();
    }
    function isNumeric(ev) {
      return /\d/.test(ev.key);
    }
  }
  onKeyDown(event) {
    if (event.keyCode === ARROW_RIGHT || event.keyCode === ARROW_LEFT || event.keyCode === KEY_TAB ) {
      event.stopPropagation();
    }
  }
}

二、修复Enter键切换编辑状态的问题 #

默认单元格按Enter会结束当前编辑并移动到下一行同列单元格，我们需要在onKeyDown方法中处理Enter键事件，调用ag-grid的API来实现这个逻辑：

修改onKeyDown方法：

onKeyDown(event) {
  if (event.keyCode === ARROW_RIGHT || event.keyCode === ARROW_LEFT || event.keyCode === KEY_TAB ) {
    event.stopPropagation();
  }
  // 处理Enter键：结束当前编辑并切换到下一行同列
  if (event.keyCode === ENTER) {
    event.preventDefault();
    // 先结束当前单元格的编辑状态
    this.params.api.stopEditing();
    // 获取当前单元格的行、列信息
    const currentRowIndex = this.params.rowIndex;
    const currentColId = this.params.column.colId;
    // 计算下一行的索引，确保不越界
    const nextRowIndex = currentRowIndex + 1;
    if (nextRowIndex < this.params.api.getDisplayedRowCount()) {
      const nextRowNode = this.params.api.getDisplayedRowAtIndex(nextRowIndex);
      // 启动下一行同列单元格的编辑
      this.params.api.startEditingCell({
        rowIndex: nextRowIndex,
        colKey: currentColId,
        rowNode: nextRowNode
      });
    }
  }
}

额外优化：处理失去焦点的情况 #

为了和默认编辑器完全一致，建议添加onBlur事件，当输入框失去焦点时自动结束编辑：

修改模板代码：

<input 
  #i 
  [value]="params.value" 
  (keypress)="onKeyPress($event)" 
  (keydown)="onKeyDown($event)" 
  (blur)="onBlur()"
  class="ag-theme-alpine-dark" 
/>

然后在组件类中添加onBlur方法：

onBlur() {
  // 失去焦点时结束编辑
  this.params.api.stopEditing();
}

这样调整后，你的自定义数字编辑器就会和默认单元格拥有完全相同的操作体验：单击直接进入编辑，按Enter键切换到下一行同列单元格继续编辑，键盘左右箭头和Tab键也能正常在输入框内导航。

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