使用ag grid企业版实现展开或折叠答案

【问题标题】：using ag grid enterprise version to implement expand or collapse使用ag grid企业版实现展开或折叠
【发布时间】：2020-01-19 03:59:57
【问题描述】：

我正在尝试将 at grid 更改为 ag grid。我用的是企业版，数据结构是这样的：

let data=[
  { name: "T-001", attribute: "VOL", plantValue: 71, scheduleValue: 71, baselineValue: 71, newBaselineTime: "2020-01-17T08:30:00+08:00", id: "~7d428201009c3318060a0000" },
  { name: "T-001", attribute: "Amenam", plantValue: 72, scheduleValue: 71, baselineValue: 71, newBaselineTime: "2020-01-17T08:30:00+08:00", id: "~7d428201009c3318060a0000" },
  { name: "T-001", attribute: "Arab Light", plantValue: 71, scheduleValue: 71, baselineValue: 71, newBaselineTime: "2020-01-17T08:30:00+08:00", id: "~7d428201009c3318060a0000" },
  { name: "T-002", attribute: "VOL", plantValue: 21, scheduleValue: 71, baselineValue: 71, newBaselineTime: "2020-01-17T08:30:00+08:00", id: "~bb4a8201009c3318060d0000" },
  { name: "T-002", attribute: "Amenam", plantValue: 45, scheduleValue: 71, baselineValue: 71, newBaselineTime: "2020-01-17T08:30:00+08:00", id: "~bb4a8201009c3318060d0000" },
  { name: "T-002", attribute: "Arab Light", plantValue: 54, scheduleValue: 71, baselineValue: 71, newBaselineTime: "2020-01-17T08:30:00+08:00", id: "~bb4a8201009c3318060d0000" },
];

有没有可能变成这样：grid picture。所以列 tank 可以像在 at grid 中一样在相同的 tank 名称下展开或折叠。由于 tank 具有相同的名称，因此我使用了树数据功能，但这不起作用。然而，按列 tank 分组看起来不像原来的 at grid。树数据或组都不适合我。

let gridOptions= {
  treeData: true, 
  groupDefaultExpanded: -1, 
  getDataPath: function(data) {
    return data.orgHierarchy;
  };
autoGroupColumnDef:{
  headerName: 'Tank',
  tooltipField:"name",
  pinned: true,
  lockPosition: true,
  headerCheckboxSelection: true,
  headerCheckboxSelectionFilteredOnly: true,
  checkboxSelection: true,
  cellRendererParams: {
  suppressCount: true
},

【问题讨论】：

标签： javascript ag-grid

【解决方案1】：

对于这种类型的分组行为，您不需要树数据。只需使用 ag-grid 的行分组功能。

首先，通过为该列指定rowGroup : true，将您的列名称标记为要分组的名称。

然而，这将创建一个额外的组列并显示名称列。所以你必须通过设置hide : true来隐藏你的名字列。

最后，您可以自定义组列以具有自定义名称并将其传递给gridOptions

autoGroupColumnDef:{
  headerName: 'Tank',
  tooltipField:"name",
  pinned: true,
  lockPosition: true,
  headerCheckboxSelection: true,
  headerCheckboxSelectionFilteredOnly: true,
  checkboxSelection: true,
  cellRendererParams: {
  suppressCount: true
  }
},

【讨论】：