在Angular项目中使用AG网格显示树数据

Question

我有json数据，我想在我的角项目中使用AG网格显示。json的格式如下:

[
{ "id": "1", "name": "root", parentId:""},
{ "id": "2", "name": "child1", parentId:"1"},
{ "id": "3", "name": "child2", parentId:"2"},
{ "id": "4", "name": "child3", parentId:"2"}
.
.
.{},{},{},{},...{}
]

它有一个父节点和子节点的层次结构，我想以树的形式显示。阅读文件AG网格和尝试的例子，但我不明白它是如何工作的。我已经能够以简单的行列格式显示数据，但不使用树格式。

Answer 1

对于AG-Grid，要将数据显示为树，您应该首先设置treeData: trueGridOptions。然后您应该提供getDataPath方法使网格知道如何遍历树数据。

此外，您的数据应该具有类似hierarchicalPath的内容。我将展示如何创建数据的hierarchicalPath。(注意hierarchicalPath格式)

[
{ "id": "1", "name": "root", parentId:"", hierarchicalPath: "00001"},
{ "id": "2", "name": "child1", parentId:"1", hierarchicalPath: "00001.00001"},
{ "id": "3", "name": "child2", parentId:"2", hierarchicalPath: "00001.00001.00001"},
{ "id": "4", "name": "child3", parentId:"2", hierarchicalPath: "00001.00001.00002"}
.
.
.{},{},{},{},...{}
]

和最小gridOptions以树格式显示数据:

gridOptions: GridOptions = {
treeData: true,
getDataPath: (data) => {
return data.hierarchicalPath.split('.');
}
};