AG Grid中结合readOnlyEdit实现整行编辑时如何响应编辑事件？

当同时启用editType='fullRow'和readOnlyEdit时，AG Grid会跳过内部的行值同步逻辑，导致onRowValueChanged不触发，onRowEditingStopped也无法获取提交的数据。要解决这个问题，需要手动接管编辑数据的提交流程，具体方案如下：

核心思路 #

readOnlyEdit模式下，AG Grid将数据更新的控制权完全交给编辑组件，因此需要通过自定义整行编辑组件捕获用户提交的数据，再手动处理行数据的更新逻辑，替代默认的事件回调。

具体实现步骤 #

1. 自定义整行编辑组件 #

创建一个自定义的整行编辑表单组件，内部维护编辑状态，在用户提交时主动传递更新后的数据：

import React, { useState } from 'react';

const CustomFullRowEditor = (props) => {
  const [formData, setFormData] = useState(props.data);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSave = () => {
    // 将更新后的数据传递给父组件处理
    props.onRowSave(formData);
    // 通知AG Grid停止编辑状态
    props.api.stopEditing();
  };

  const handleCancel = () => {
    props.api.stopEditing();
  };

  return (
    <div style={{ padding: '10px', display: 'flex', gap: '10px' }}>
      <input
        name="name"
        value={formData.name}
        onChange={handleInputChange}
        placeholder="姓名"
      />
      <input
        name="age"
        type="number"
        value={formData.age}
        onChange={handleInputChange}
        placeholder="年龄"
      />
      <button onClick={handleSave}>保存</button>
      <button onClick={handleCancel}>取消</button>
    </div>
  );
};

export default CustomFullRowEditor;

2. 配置AG Grid关联自定义组件与回调 #

在Grid组件中，指定fullRowEditor为自定义组件，并传递数据更新的回调函数：

import React, { useState, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import CustomFullRowEditor from './CustomFullRowEditor';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const AGGridDemo = () => {
  const gridRef = useRef();
  const [rowData, setRowData] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
  ]);

  // 处理行数据更新的核心逻辑，替代onRowValueChanged
  const handleRowSave = (updatedData) => {
    // 更新本地状态
    setRowData(prev => prev.map(row => 
      row.id === updatedData.id ? updatedData : row
    ));
    // 这里可以添加后端提交逻辑
    console.log('提交的行数据:', updatedData);
  };

  const columnDefs = [
    { field: 'name', editable: true },
    { field: 'age', editable: true },
  ];

  const gridOptions = {
    editType: 'fullRow',
    fullRowEditor: CustomFullRowEditor,
    readOnlyEdit: true,
    // 传递自定义参数给编辑组件
    getFullRowEditorParams: () => ({
      onRowSave: handleRowSave,
    }),
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        ref={gridRef}
        rowData={rowData}
        columnDefs={columnDefs}
        gridOptions={gridOptions}
      />
    </div>
  );
};

export default AGGridDemo;

关键说明 #

• readOnlyEdit的设计目的是让编辑组件完全控制数据流程，AG Grid不会自动同步编辑后的数据到行模型，因此默认的onRowValueChanged和onRowEditingStopped无法获取提交数据。
• 自定义编辑组件可以灵活处理复杂的编辑逻辑（比如表单校验、多字段联动），同时确保数据更新的可控性。
• 如果不需要自定义组件，也可以在onRowEditingStopped中通过params.node.data获取编辑后的行数据，但这种方式依赖AG Grid内部状态，可靠性不如自定义组件。

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