网格中的可编辑组单元格

Question

使用editable: true可以双击所有单元格，而组单元格除外。我希望组单元格也可编辑。

我试图以编程方式无法编辑组单元格。

this.gridApi.startEditingCell({
  rowIndex:0,
  colKey: 'ag-Grid-AutoColumn'
});

Here是最低版本。在这种情况下，我希望可编辑丰田，福特，保时捷等分组单元。

import "../node_modules/ag-grid-enterprise/dist/styles/ag-grid.css";
import "../node_modules/ag-grid-enterprise/dist/styles/ag-theme-alpine.css";
import "./styles.css";

import React, { useState } from "react";
import { AgGridColumn, AgGridReact } from "ag-grid-react";
import "ag-grid-enterprise";

export default function App() {
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);

  const [rowData, setRowData] = useState([
    { make: "Toyota", model: "Celica", price: 350000 },
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        rowSelection="multiple"
        groupSelectsChildren={true}
        autoGroupColumnDef={{
          headerName: "Model",
          field: "model",
          cellRenderer: "agGroupCellRenderer",
          editable: true,
          cellRendererParams: {
            checkbox: true
          }
        }}
      >
        <AgGridColumn
          field="make"
          sortable={true}
          filter={true}
          checkboxSelection={true}
          rowGroup={true}
          hide={true}
        ></AgGridColumn>
        <AgGridColumn hide={true} field="model"></AgGridColumn>
        <AgGridColumn hide={true} field="price"></AgGridColumn>
      </AgGridReact>
    </div>
  );
}

Answer 1

将GridOptions.enableGroupEdit设置为true，以使行组可编辑

<AgGridReact
  enableGroupEdit
  autoGroupColumnDef={{
    headerName: "Model",
    field: "model",
    editable: true,
  }}
  onCellEditingStopped={(e) => {
    const { newValue, node, api } = e;
    if (node.group) {
      node.groupData["ag-Grid-AutoColumn"] = newValue;
      api.refreshCells({
        force: true,
        rowNodes: [node]
      });
    }
  }}
  {...}
/>

实时演示