ag-grid - 在 Ag Grid 中使用复杂对象进行分组

Question

我正在尝试使用一个复杂的对象来对我的 ag 网格行进行分组。我的 rowdata 对象看起来像这样 -

const rowData= {
  id : '123',
  name: 'dummy',
  category: 'A',
  group : {
    name : 'dummyGroup',
    id : '456',
    category: 'A'
  }
}

现在，我正在使用 group 对象对行进行分组。根据此文档 https://www.ag-grid.com/javascript-data-grid/grouping-complex-objects/，我将 keyCreator 用作 keyCreator: params => params.value.name 。我的组对象由 id 和 catogory 的组合唯一标识。

我面临的问题是，当我在 keyCreator 中使用 group.name 时，如果我有两行数据对象，其 group.names 相同但 id 和类别不同，ag 网格会将这些行分组在一起。我知道这是 ag grid 的行为。那么我可以获得任何解决方法吗？我需要在组行上显示名称。但要以不同方式识别组，我需要在 keyCreator 中使用 id+catogory。我怎样才能做到这一点？

Answer 1

您需要使用 groupRowInnerRenderer 属性，以便您可以根据 id 和 category 字段的组合进行分组，同时显示 name 作为组。

const gridOptions = {
    groupDisplayType: 'groupRows',
    groupRowInnerRenderer: function (params) {
      return params.node.childrenAfterFilter[0].data.name;
    },
    columnDefs: [
      { field: 'id' },
      { field: 'name' },
      { field: 'category' },
      {
        field: 'group',
        valueFormatter: groupValueFormatter,
        rowGroup: true,
        keyCreator: function (params) {
          return params.value.id + params.value.category;
        },
      },
    ],
  };

Demo .