ag 网格中的可编辑组单元格

Question

使用 editable: true 使除组单元格外的所有单元格都可在双击时编辑。我希望群组单元格也可编辑。

我尝试以编程方式使组单元格可编辑，但没有成功。

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

Here 是最小版本。在此我希望组单元格 Toyota、Ford、Porsche 可编辑。

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]
      });
    }
  }}
  {...}
/>

ag 网格中的可编辑组单元格

Editable group cell in ag grid

javascript

reactjs

ag-grid

ag-grid-react

现场演示