Ag-Grid如何指定部分列在失去焦点时停止编辑？

嗨，这个问题我之前也碰到过类似的场景，正好可以给你几个实用的思路来解决：

首先，先把全局的stopEditingWhenCellsLoseFocus设为false，避免影响那些不兼容的自定义单元格编辑器，然后针对需要实现「失焦停止编辑」的列单独做处理：

• 方案一：在目标列的定义里添加焦点监听
  对于需要该功能的列，我们可以在onCellEditorOpened回调中给编辑器DOM元素绑定blur事件，触发时调用grid的停止编辑方法。为了避免和grid本身的单元格切换逻辑冲突，建议加个小延迟：

  {
    headerName: "需要失焦停止编辑的列",
    field: "targetField",
    cellEditor: "agTextCellEditor", // 或者你的自定义编辑器
    onCellEditorOpened: (params) => {
      const editorElement = params.eEditor;
      editorElement.addEventListener('blur', () => {
        setTimeout(() => {
          params.api.stopEditing();
        }, 100);
      });
    }
  }
  

• 方案二：利用grid的全局事件统一管理
  这种方法更适合批量管理多列，通过监听grid的编辑状态和焦点变化来判断：

  let currentEditingColId = null;
  
  const gridOptions = {
    // 其他配置项
    stopEditingWhenCellsLoseFocus: false,
    onCellEditingStarted: (params) => {
      currentEditingColId = params.column.colId;
    },
    onCellEditingStopped: () => {
      currentEditingColId = null;
    },
    onCellFocused: (params) => {
      // 定义需要开启失焦停止编辑的列ID列表
      const targetColIds = ['col1', 'col2', 'col3'];
      // 如果当前正在编辑的是目标列，且焦点不在任何单元格上（点击外部）或焦点在非目标列
      if (currentEditingColId && targetColIds.includes(currentEditingColId) && (!params.column || !targetColIds.includes(params.column.colId))) {
        params.api.stopEditing();
      }
    }
  };
  

• 方案三：在自定义编辑器内部处理
  如果你是自己开发的自定义单元格编辑器，可以直接在组件内部监听blur事件，判断当前列是否需要触发停止编辑：
  比如React版本的自定义编辑器：

  import React from 'react';
  
  const CustomEditor = (props) => {
    const handleBlur = () => {
      // 判断当前列是否是目标列
      if (props.column.colId === 'targetCol') {
        props.api.stopEditing();
      }
    };
  
    return (
      <input
        value={props.value}
        onChange={(e) => props.onChange(e.target.value)}
        onBlur={handleBlur}
      />
    );
  };
  
  export default CustomEditor;
  

这些方案都能避开全局配置带来的兼容性问题，精准控制指定列的失焦行为，你可以根据自己的项目情况选最合适的~

内容来源于stack exchange