AgGrid React中如何实现多选行后批量编辑同列单元格内容

核心逻辑是监听评论单元格的编辑变更事件，配合AgGrid内置的行选择API和批量数据更新API实现同步，具体实现步骤如下：

• 基础配置准备
  1. 开启行多选：给Grid组件配置rowSelection: 'multiple'属性
  2. 持有Grid实例引用：通过onGridReady回调把api存在useRef中，方便后续调用内置方法
  3. 给评论列绑定编辑变更事件：列定义中给评论列设置editable: true，同时绑定onCellValueChanged回调
• 编写批量同步逻辑
  在onCellValueChanged的回调函数中完成以下逻辑：
  1. 调用api.getSelectedRows()获取当前所有选中的行，若选中行数≤1，直接走默认单条编辑逻辑不做批量处理
  2. 从回调参数中拿到编辑后的新值，构造所有选中行的更新数据集合（仅需要修改评论字段即可，若配置了getRowId，仅需携带行ID和评论字段可减少性能开销）
  3. 调用api.applyTransaction({ update: 更新数据集合 })完成所有选中行的批量更新，AgGrid会自动刷新对应单元格的视图
• 常用扩展优化
  • 如需实时同步（输入过程中就同步到其他选中行，无需等编辑失焦完成）：自定义评论列的单元格编辑器组件，在编辑器的输入事件中实时触发上述批量更新逻辑即可
  • 如需支持撤销批量操作：给Grid配置enableUndoRedo: true，批量更新会被识别为单条操作记录，触发撤销时所有选中行的评论会同步回滚到修改前的值

以下是最小可运行代码示例：

import { useCallback, useRef } from 'react'
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'

const App = () => {
  const gridApiRef = useRef(null)
  const rowData = [
    { id: 1, name: '数据1', comment: '' },
    { id: 2, name: '数据2', comment: '' },
    { id: 3, name: '数据3', comment: '' }
  ]

  const columnDefs = [
    { checkboxSelection: true, width: 50 },
    { field: 'name', headerName: '数据名称' },
    {
      field: 'comment',
      headerName: '备注',
      editable: true,
      flex: 1
    }
  ]

  const gridOptions = {
    rowSelection: 'multiple',
    enableUndoRedo: true,
    getRowId: (params) => params.data.id
  }

  const onGridReady = useCallback((params) => {
    gridApiRef.current = params.api
  }, [])

  const handleCellValueChanged = useCallback((params) => {
    // 仅评论字段变更触发批量逻辑
    if (params.column.colId !== 'comment') return
    const selectedRows = gridApiRef.current.getSelectedRows()
    if (selectedRows.length <= 1) return

    const newComment = params.newValue
    const updateRows = selectedRows.map(row => ({
      id: row.id,
      comment: newComment
    }))

    gridApiRef.current.applyTransaction({ update: updateRows })
  }, [])

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

export default App

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