带有组标题的 Ag-Grid Angular 树数据答案

【问题标题】：Ag-Grid Angular Tree Data with Group Header带有组标题的 Ag-Grid Angular 树数据
【发布时间】：2020-08-18 17:06:50
【问题描述】：

我正在尝试使 Ag-Grid Org Hierarchy Tree Data 示例适应我的应用程序。这是我目前所拥有的：https://plnkr.co/edit/rfK0uqKPPWJig7dx

    var rowData = [
  {  ID: 1,
    Path: '1/1', // [Group: 1, ID: 1]
    GroupID: 1,
    GroupName: 'Group 1',
    Name: '1. Row A'
  },
  {  ID: 2,
    Path: '1/2',
    GroupID: 1,
    GroupName: 'Group 1',
    Name: '2. Row B'
  },
  {  ID: 3,
    Path: '1/2/3', //[Group: 1, Parent: 2, ID: 3]
    GroupID: 1,
    GroupName: 'Group 1',
    Name: '2.1 Row C'
  },
  {  ID: 4,
    Path: '2/4',
    GroupID: 2,
    GroupName: 'Group 2',
    Name: '3. Row D'
  },
  {  ID: 5,
    Path: '2/4/5',
    GroupID: 2,
    GroupName: 'Group 2',
    Name: '3.1. Row E'
  },
  {  ID: 6,
    Path: '3/6',
    GroupID: 3,
    GroupName: 'Group 3',
    Name: '5. Row F'
  }
]

var gridOptions = {
  defaultColDef: {
    flex: 1,
  },
  components: {
    simpleCellRenderer: getSimpleCellRenderer()
  },
  columnDefs: [
    { field: 'Path' ,
      headerName: 'Name',
      cellRenderer: 'agGroupCellRenderer',
      cellRendererParams: {
        suppressPadding: true,
        suppressCount: true,
        innerRenderer: 'simpleCellRenderer',
      },     
    },
  ],
  rowData: rowData,
  treeData: true,
  animateRows: true,
  groupDefaultExpanded: -1, 
  getDataPath: function(data) {
    return [data.Path.split('/')];
  },
};

// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener('DOMContentLoaded', function() {
  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);
});

function getSimpleCellRenderer() {
  function SimpleCellRenderer() { }

  SimpleCellRenderer.prototype.init = function (params) {
    const tempDiv = document.createElement('div');

// this obviously needs to be different as there are multiple levels
    if(params.node.group) {
      tempDiv.innerHTML = params.data.GroupName;
    } else {
      tempDiv.innerHTML = params.data.Name;
    }
    
    this.eGui = tempDiv.firstChild;
  };
  SimpleCellRenderer.prototype.getGui = function () {
    return this.eGui;
  };
  return SimpleCellRenderer;
}

我的路径是主要组 ID + 树层次结构路径。例如 GroupID/ParentRow/ParentRow/Row。我希望它在一个网格列中显示为

第 1 组
父行 1
父行 2
项目 6
第 2 组
项目 1
项目 2
父行 3
第 3 项

如您所见，我还没有使用 Path 正确分组。此外，在另一个我能够按 GroupID 对其进行分组的示例中，我无法弄清楚如何显示 GroupName 而不是 GroupID。因此，任何有关此的信息都会有所帮助。似乎我发现的所有示例都使用 Name 来执行层次结构，但这不适用于我的应用程序。

【问题讨论】：

标签： angular tree ag-grid hierarchy

【解决方案1】：

在您问题的第一部分，树数据视图的问题在于这一行：

getDataPath: function(data) {
    return [data.Path.split('/')];
  },

在这里，您在另一个数组中返回一个数组。为了解决这个问题，去掉括号，直接返回 split 的结果：

getDataPath: function(data) {
    return data.Path.split('/');
  },

对于第二部分，您可以使用'GroupName'的值来构造层次结构，例如：

  [...]
  {  ID: 4,
    Path: 'Group 2/3. Row D',
    GroupID: 2,
    GroupName: 'Group 2',
    Name: '3. Row D'
  },
  {  ID: 5,
    Path: 'Group 2/3.1. Row E',
    GroupID: 2,
    GroupName: 'Group 2',
    Name: '3.1. Row E'
  },
  [...]

【讨论】：