ag-grid 行组正在重复

Question

我在我的反应项目中使用 ag-grid-react。我需要一个具有行分组功能的表格，所以来自官方docs 这就是我所做的。

const GRID_OPTIONS = {
  defaultColDef: {
    resizable: true,
    suppressMovable: true
    // suppressMenu: true
    // unSortIcon: true
  },
  frameworkComponents: {
    statusBar: StatusBar,
    customEditor: CellEditor,
    booleanFilter: BooleanFilter,
    customRenderer: CellRenderer,
    dateFilter: customDateFilter
  },
  suppressContextMenu: true,
  autoHeight: true,
  rowSelection: "multiple",
  rowDeselection: true,
  rowModelType: "serverSide",
  cacheBlockSize: AppConstants.PAGE_SIZE,
  paginationPageSize: AppConstants.PAGE_SIZE,
  getRowNodeId: data => data.id,
  overlayNoRowsTemplate: `<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">
        No Data found
    </span>`
};

const columnDefs = [
  {
    "field": "_",
    "colId": "_",
    "hide": true,
    "lockVisible": true,
    "filter": "agTextColumnFilter",
    "filterParams": {
      "newRowsAction": "keep"
    }
  },
  {
    "field": "controlHeading",
    "colId": "controlHeading",
    "headerName": "Control Heading",
    "sortable": false,
    "suppressMenu": true,
    "rowGroup": true, // <== row group enabled here
    "hide": true
  },
  {
    "field": "siNo",
    "colId": "siNo",
    "headerName": "Si No",
    "sortable": true,
    "filter": "agNumberColumnFilter",
    "filterParams": {
      "clearButton": true
    },
    "pinned": ""
  },
  {
    "field": "control",
    "colId": "control",
    "headerName": "Control",
    "sortable": true,
    "filter": "agSetColumnFilter",
    "filterParams": {
      "newRowsAction": "keep",
      "clearButton": true,
      "selectAllOnMiniFilter": true,
      "syncValuesLikeExcel": true
    },
    "pinned": ""
  },
  {
    "field": "checkGroup",
    "colId": "checkGroup",
    "headerName": "Check Group",
    "sortable": true,
    "filter": "agSetColumnFilter",
    "filterParams": {
      "newRowsAction": "keep",
      "clearButton": true,
      "selectAllOnMiniFilter": true,
      "syncValuesLikeExcel": true
    },
    "pinned": ""
  }
]

...

        <div className="ag-theme-material gridSize">
          <AgGridReact
            reactNext={true}
            onCellValueChanged={onCellValueChanged}
            onGridReady={onGridReady}
            columnDefs={columnDefs}
            pagination={true}
            onSelectionChanged={onRowSelect}
            {...GRID_OPTIONS}
          ></AgGridReact>
        </div>

API 响应：

[
  {
    "id": "5f20fb0bbb4d0700013096c3",
    "cloudName": "AWS",
    "control": "Ensure CloudTrail is enabled in all regions (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.1,
    "checkGroup": "CloudTrail Enabled",
    "yes": 2,
    "no": 1,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096c4",
    "cloudName": "AWS",
    "control": "Ensure CloudTrail log file validation is enabled (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.2,
    "checkGroup": "CloudTrail File Validation",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096c5",
    "cloudName": "AWS",
    "control": "Ensure the S3 bucket used to store CloudTrail logs is not publicly accessible (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.3,
    "checkGroup": "CloudTrail Bucket Private",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096c6",
    "cloudName": "AWS",
    "control": "Ensure CloudTrail trails are integrated with CloudWatch Logs (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.4,
    "checkGroup": "CloudTrail To CloudWatch",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096c7",
    "cloudName": "AWS",
    "control": "Ensure AWS Config is enabled in all regions (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.5,
    "checkGroup": "Config Service Enabled",
    "yes": 2,
    "no": 1,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096c8",
    "cloudName": "AWS",
    "control": "Ensure S3 bucket access logging is enabled on the CloudTrail S3 bucket (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.6,
    "checkGroup": "CloudTrail Bucket Access Logging",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096c9",
    "cloudName": "AWS",
    "control": "Ensure CloudTrail logs are encrypted at rest using KMS CMKs (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.7,
    "checkGroup": "CloudTrail Encryption",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096ca",
    "cloudName": "AWS",
    "control": "Ensure rotation for customer created CMKs is enabled (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.8,
    "checkGroup": "KMS Key Rotation",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096cb",
    "cloudName": "AWS",
    "control": "Ensure VPC flow logging is enabled in all VPCs (Scored)",
    "controlHeading": "Logging",
    "siNo": 2.9,
    "checkGroup": "VPC Flow Logs Enabled",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  },
  {
    "id": "5f20fb0bbb4d0700013096da",
    "cloudName": "AWS",
    "control": "Ensure no security groups allow ingress from 0.0.0.0/0 to port 22 (Scored)",
    "controlHeading": "Networking",
    "siNo": 4.1,
    "checkGroup": "Open SSH",
    "yes": 2,
    "no": 0,
    "complianceStandard": "CIS AWS 1.2.0"
  }
]

the table should be grouped by "controlHeading" key.

但这就是我在表格中得到的：

正如您在屏幕截图中看到的那样，组 logging 正在重复，但预期输出是标题为 logging 和 Networking 的两个行组。

我该如何解决这个问题？

Answer 1

这会给你一个答案。 https://www.ag-grid.com/react-grid/#grouping(enterprise)

1. 启用 ag-grid 的企业功能。安装附加包：

   npm install --save ag-grid-enterprise

   import 'ag-grid-enterprise';

2. 将这些添加到 GRID_OPTIONS

   autoGroupColumnDef: {
     headerName: "Control Heading",
     field: "controlHeading",
     cellRenderer:'agGroupCellRenderer',
   },
   groupSelectsChildren: true
   
   
   

Answer 2

这是因为您使用的是服务器端行模型。

使用 SSRM 时，您的服务器负责向网格提供已处理的行。 这包括过滤、排序、分组等...

您必须在您的服务器上执行分组并发送回网格。

您可以在 ag-grid 文档页面的服务器端数据部分下找到示例。