具有组头的Ag-Grid角树数据

问题描述

我正在尝试将Ag-Grid组织层次结构树数据示例修改为我的应用程序。这是我到目前为止的内容：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,Name: '2. Row B'
  },{  ID: 3,Path: '1/2/3',//[Group: 1,Parent: 2,ID: 3]
    GroupID: 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',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进行层次结构设置，但这不适用于我的应用程序。

解决方法

在问题的第一部分，树数据视图的问题在此行中：

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',Name: '3.1. Row E'
  },[...]