基于ag-grid复选框控制操作按钮显示的实现问题

要实现这个需求，你需要完成两步核心操作：给每行添加复选框并启用行选择功能，然后修改自定义单元格渲染器，仅在当前行被选中时才展示编辑、删除按钮。

1. 添加复选框列并配置行选择 #

首先在列定义中加入复选框列，同时设置表格的行选择模式：

// 配置表格核心选项（若未定义过gridOptions则需要添加）
const gridOptions = {
  rowSelection: 'multiple', // 支持多选，单选场景可设为'single'
  suppressRowClickSelection: true, // 仅通过复选框触发选中，避免点击行任意位置自动选中
};

// 更新列定义，新增复选框列
const [columnDefs, setColumnDefs] = useState([
  {
    headerName: '',
    checkboxSelection: true,
    width: 50,
    editable: false,
  },
  {
    field: "athlete",
    cellEditor: "agSelectCellEditor",
    cellEditorParams: {
      values: ["Porsche", "Toyota", "Ford", "AAA", "BBB", "CCC"],
    },
  },
  { field: "age" },
  {
    headerName: "",
    cellRenderer: actionCellRenderer,
    editable: false,
    colId: "action",
  },
]);

2. 修改自定义单元格渲染器 #

更新actionCellRenderer函数，通过AG Grid提供的params.node.isSelected()判断当前行选中状态，结合原有编辑状态逻辑控制按钮显示：

function actionCellRenderer(params) {
  let eGui;
  const editingCells = params.api.getEditingCells();
  const isCurrentRowEditing = editingCells.some((cell) => cell.rowIndex === params.node.rowIndex);
  const isRowSelected = params.node.isSelected();

  if (isCurrentRowEditing) {
    // 编辑状态下始终显示更新/取消按钮
    eGui = (
      <div>
        <button className="action-button update" data-action="update">
          update
        </button>
        <button className="action-button cancel" data-action="cancel">
          cancel
        </button>
      </div>
    );
  } else if (isRowSelected) {
    // 仅当行被选中且未处于编辑状态时，显示编辑/删除按钮
    eGui = (
      <div>
        <button className="action-button edit" data-action="edit">
          edit
        </button>
        <button className="action-button delete" data-action="delete">
          delete
        </button>
      </div>
    );
  } else {
    // 未选中且未编辑时，渲染空容器
    eGui = <div></div>;
  }

  return eGui;
}

关键说明 #

• params.node.isSelected()：AG Grid内置API，直接获取当前行的选中状态
• suppressRowClickSelection: true：可选配置，若希望仅通过点击复选框选中行，而非点击行任意区域，可启用该参数
• 保留原有编辑状态逻辑，确保编辑中的行始终展示更新/取消按钮，不受选中状态影响

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