Question

我在我的react项目中使用了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)

启用ag-grid的企业功能。安装其他软件包：

npm install-保存ag-grid-enterprise

import 'ag-grid-enterprise';

将它们添加到GRID_OPTIONS

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

Answer 2

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

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

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

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

农业网格行组重复

2 个答案: