如何设置ag-grid-enterprise React版单击单元格开启编辑？

AG Grid没有直接配置项修改编辑触发方式，但可以通过cellClicked事件结合内置API实现单击开启编辑，具体步骤如下：

• 在Grid组件上绑定cellClicked事件，回调中调用startEditingCell方法触发编辑
• 先判断单元格是否可编辑，避免点击不可编辑单元格时无效触发

代码示例 #

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

const ClickToEditGrid = () => {
  const gridRef = useRef(null);

  const handleCellClicked = (params) => {
    // 校验当前单元格是否允许编辑
    if (params.column.getColDef().editable) {
      gridRef.current.api.startEditingCell({
        rowIndex: params.rowIndex,
        colKey: params.column.colId
      });
    }
  };

  const columnDefs = [
    { field: 'username', editable: true, headerName: '用户名' },
    { field: 'email', editable: true, headerName: '邮箱' },
    { field: 'role', editable: false, headerName: '角色' }
  ];

  const rowData = [
    { username: 'Alice', email: 'alice@example.com', role: '管理员' },
    { username: 'Bob', email: 'bob@example.com', role: '普通用户' }
  ];

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

export default ClickToEditGrid;

额外说明 #

• startEditingCell方法需要传入rowIndex（行索引）和colKey（列ID）来准确定位目标单元格
• 如果需要针对特定列/行自定义触发逻辑，可在handleCellClicked中添加额外判断，比如根据params.column.colId排除某列，或根据params.data过滤特定行数据

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