Question

我正在尝试将 at网格 更改为 ag网格 。我正在使用企业版。数据结构如下：

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。因此，列储罐可以像在 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
},

Answer 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
  }
},

使用AG网格企业版来实现扩展或折叠

1 个答案: