如何在ag-grid的整行编辑（FullRowEditing）中捕获单元格实时数据？

要在整行编辑过程中实时捕获输入、判断所有单元格是否填值并控制提交按钮状态，可通过以下核心方式实现：

一、给单元格编辑器绑定实时输入监听 #

利用AG Grid编辑器的钩子或自定义编辑器的输入事件，监听输入行为并触发整行校验。

1. 原生编辑器配置（以文本输入框为例） #

在列定义中为每个可编辑列添加postRender钩子，绑定input事件：

const gridOptions = {
  enableFullRowEdit: true,
  columnDefs: [
    {
      field: 'name',
      editable: true,
      cellEditorParams: {
        postRender: (params) => {
          const inputEl = params.eInput;
          inputEl.addEventListener('input', () => {
            checkAllCellsFilled(params.node);
          });
        }
      }
    },
    {
      field: 'email',
      editable: true,
      cellEditorParams: {
        postRender: (params) => {
          const inputEl = params.eInput;
          inputEl.addEventListener('input', () => {
            checkAllCellsFilled(params.node);
          });
        }
      }
    }
    // 其他可编辑列同理配置
  ]
};

2. 自定义编辑器（以React为例） #

如果使用框架自定义编辑器，直接在组件内部监听输入变化并通知校验：

// 自定义文本编辑器组件
const CustomTextEditor = (props) => {
  const [value, setValue] = useState(props.value);

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    // 通知外部进行整行校验
    props.onRealTimeChange(newValue);
  };

  return <input value={value} onChange={handleInputChange} />;
};

// 列定义中使用自定义编辑器
{
  field: 'phone',
  editable: true,
  cellEditor: 'customTextEditor',
  cellEditorParams: {
    onRealTimeChange: () => {
      const focusedCell = gridOptions.api.getFocusedCell();
      checkAllCellsFilled(focusedCell.rowNode);
    }
  }
}

二、编写整行校验函数 #

实现checkAllCellsFilled函数，遍历当前行的所有可编辑列，区分正在编辑的单元格（取实时输入值）和未编辑单元格（取行数据值），最终控制提交按钮状态：

function checkAllCellsFilled(rowNode) {
  // 筛选出所有可编辑列
  const editableColumns = gridOptions.columnDefs.filter(col => col.editable);
  let allCellsFilled = true;

  editableColumns.forEach(col => {
    const field = col.field;
    let currentValue;

    // 获取当前单元格的渲染实例，判断是否正在编辑
    const cellInstances = gridOptions.api.getCellRendererInstances({
      rowNodes: [rowNode],
      columns: [col]
    });

    if (cellInstances.length > 0) {
      const cellInstance = cellInstances[0];
      // 处理原生编辑器的实时值
      if (cellInstance.eGui) {
        const inputEl = cellInstance.eGui.querySelector('input, textarea');
        currentValue = inputEl ? inputEl.value.trim() : rowNode.data[field]?.trim();
      } 
      // 处理框架自定义编辑器的实时值（以React为例）
      else if (cellInstance.getFrameworkComponentInstance) {
        const compInstance = cellInstance.getFrameworkComponentInstance();
        currentValue = compInstance?.value?.trim() || rowNode.data[field]?.trim();
      }
    } else {
      // 未编辑状态下直接取行数据
      currentValue = rowNode.data[field]?.trim();
    }

    // 只要有一个单元格为空，标记为未填满
    if (!currentValue) {
      allCellsFilled = false;
    }
  });

  // 更新提交按钮的启用状态
  const submitBtn = document.getElementById('updateRowBtn');
  if (submitBtn) {
    submitBtn.disabled = !allCellsFilled;
  }
}

三、初始化校验时机 #

在整行编辑开始时，触发一次校验，确保按钮初始状态正确：

gridOptions.rowEditingStarted = (params) => {
  checkAllCellsFilled(params.node);
};

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