如何配置Ag Grid单元格仅在双击时触发编辑状态？

问题成因 #

Ag Grid 默认的编辑触发包含两个默认入口，会导致描述的异常表现：

• 单击可编辑单元格会直接激活编辑状态
• 单元格处于选中但未编辑的状态时，按下退格、删除、普通字符键会自动进入编辑，同时用当前输入替换原有内容，直接按退格就会清空字段

配置步骤 #

通过三个核心配置即可实现仅双击进入编辑，同时解决按键误清空问题：

• 关闭所有单击触发编辑的默认逻辑
• 拦截非编辑状态下按键自动激活编辑的默认行为
• 绑定单元格双击事件，手动触发编辑流程

参考配置代码 #

const gridOptions = {
  // 其他网格基础配置
  defaultColDef: {
    // 其他列通用配置
    editable: true,
    singleClickEdit: false, // 显式关闭单击进入编辑开关
    suppressClickEdit: true, // 彻底屏蔽单击动作触发编辑，兼容各版本默认逻辑差异
    // 拦截非编辑状态下的按键触发逻辑
    suppressKeyboardEvent: (params) => {
      if (!params.editing) {
        const key = params.event.key;
        // 拦截退格、删除、单字符输入键，阻止按键自动唤起编辑
        if (key === 'Backspace' || key === 'Delete' || key.length === 1) {
          return true;
        }
      }
      return false;
    }
  },
  // 绑定双击事件，仅双击时触发编辑
  onCellDoubleClicked: (params) => {
    if (params.column.isCellEditable(params.node)) {
      params.api.startEditingCell({
        rowIndex: params.rowIndex,
        colKey: params.column.getColId()
      });
    }
  },
  stopEditingWhenCellsLoseFocus: true // 单元格失焦自动退出编辑，避免编辑状态残留
}

注意事项 #

• 若仅需要对特定列生效，将defaultColDef中的相关配置迁移到目标列的columnDef配置项中即可，无需全局设置
• 双击触发逻辑中增加了单元格可编辑校验，避免双击不可编辑单元格时触发报错

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