我在反应中对 ag-grid 做错了什么？

Question

我正在尝试使 ag-grid 组可选，例如我们有护理人员，您可以选择父级，并且该父级下的所有内容也被选中。

我查看了 ag-grid 文档，但看起来我做的一切都是正确的。

下面是我的代码：

import React, { useState } from 'react';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

const DummyGrid = () => {
  const [gridApi, setGridApi] = useState(null);
  const columnDefs = [
    {
      headerName: 'Make', field: 'make', checkboxSelection: true , rowGroup: true, groupSelectsChildren: true
    },
    {
      headerName: 'Model', field: 'model'
    },
    {
      headerName: 'Price', field: 'price'
    }
  ]
  
  const onGridReady = (params) => {
    setGridApi(params.api);
  }
  const rowData = [
    { make: 'Honda', model: 'Chev', price: 6000 },
    { make: 'Honda', model: 'Civic', price: 120000 },
    { make: 'Toyota', model: 'Celica', price: 5000 },
    { make: 'Mitsubishi', model: 'GTR', price: 5000 }
  ]

  const handleClick = () => {
    const selectedNodes = gridApi.getSelectedNodes();
    const selectedData = selectedNodes.map(node => node.data);
    const selectedDataStringRepresentation =  selectedData.map(node => node.make + ' ' + node.model).join(', ');
    console.log(`The Data selected: ${selectedDataStringRepresentation}`);
  }

  return(
    <div className="ag-theme-balham"
        style={{
          width: 600,
          height: 600
        }}>
      <button onClick={handleClick}>Click this!</button>
      <AgGridReact  
        rowData = {rowData}
        columnDefs={columnDefs}
        rowSelection="multiple"
        onGridReady={onGridReady}
      />
    </div>
  );

};

export default DummyGrid;

正如您从下面的输出中看到的那样，即使它们是同一个制造商，它们也没有分组。我做错了什么？

Answer 1

你做错了两件事。

首先，您需要导入RowGroupingModule 模块并将其作为modules 传递到您的网格：

import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';


modules={[RowGroupingModule]}

其次，您需要在网格本身上设置groupSelectsChildren，而不是在您的列定义上：

groupSelectsChildren={true}

Demo.