Ag-grid - 如何在具有角度应用程序的第 n 级数据的 ag-grid 中显示数据答案

【问题标题】：Ag-grid - How to show data in ag-grid which is having nth levels of data for angular appAg-grid - 如何在具有角度应用程序的第 n 级数据的 ag-grid 中显示数据
【发布时间】：2021-10-09 22:01:48
【问题描述】：

数据：

   [
    {
        "manager": "m1",
        "name":"n1",
        "id":"123",
        "documents": {
            "Pending":{
            "all": 10,
            "week": 2,
            "week2": 4
            "week3": 2,
            "week4": 2
            }
        },
        "children": [
            {
            "manager": "m11",
            "name":"n11",
            "id":"223",
            "documents": {
            "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "m111",
                "name":"n111",
                "id":"323",
                "documents": {
                    "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": [
                    {
                    "manager": "m1111",
                    "name":"n1111",
                    "id":"423",
                    "documents": {
                    "Pending":{
                        "all": 10,
                        "week": 2,
                        "week2": 4
                        "week3": 2,
                        "week4": 2
                        }
                    },
                    "children": []
                    }
                ]
                }
            ]
            },
            {
            "manager": "m22",
            "name":"n22",
            "id":"234",
            "documents": {
                "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "m222",
                "name":"n222",
                "id":"235",
                "documents": {
                "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": []
                }
            ]
            },
        ]
    },
    {
        "manager": "mn1",
        "name":"nm1",
        "id":"1233",
        "documents": {
            "Pending":{
            "all": 10,
            "week": 2,
            "week2": 4
            "week3": 2,
            "week4": 2
            }
        },
        "children": [
            {
            "manager": "mn11",
            "name":"nm11",
            "id":"223",
            "documents": {
            "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "mm111",
                "name":"nm111",
                "id":"3234",
                "documents": {
                    "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": [
                    {
                    "manager": "mn1111",
                    "name":"nm1111",
                    "id":"2423",
                    "documents": {
                        "Pending":{
                        "all": 10,
                        "week": 2,
                        "week2": 4
                        "week3": 2,
                        "week4": 2
                        }
                    },
                    "children": []
                    }
                ]
                }
            ]
            },
            {
            "manager": "mn22",
            "name":"nm22",
            "id":"2345",
            "documents": {
                "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "mn222",
                "name":"nm222",
                "id":"2355",
                "documents": {
                    "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": []
                }
            ]
            },
        ]
    }
    ]

我无法将上述数据放入多级（第 n 级）数据的 ag-grid 中，并在“经理”上分组，所有子项的总/所有值都被分组。

ag-grid 的树数据没有帮助，其他分组也在 1 级，但不支持列的多级分组

下面是预期的结果

【问题讨论】：

你能添加你的网格代码 - 组件和模板吗？
@pertrai1 我正在创建一个新组件，其数据 json 与上述类似。我一直在烹饪通过 ag-grid 模块（如分组和数据透视部分）上的示例替换的新组件数据。所以它是一个空白画布来满足上述数据格式。
能否请您提供一个您希望在最后看到的图形示例？
添加了预期结果@Mazdak

标签： angular grouping ag-grid ag-grid-angular

【解决方案1】：

Tree Data 是这里的自然选择，因为您有一个包含子级的数据层次结构。

要使用树数据，网格只需要一个对象数组，其中每个对象都是一行。

在每个行对象内，应该有一个层次结构指定树的级别。这在我们的documentation 中有进一步的解释。

所以首先你必须把你的数据展平，例如，下面的数据：

[
    {
        "manager": "m1",
        "id":"123",
        "children": [
            {
            "manager": "m11",
            "id":"223",
            "children":[],
            },
    }
]

必须展平成这种形式：

[
    { hierarchy: [0], "manager": "m1", "id":"123", children: [...] },
    { hierarchy:[0, 1] "manager": "m11", "id":"223", children: [] }
]

请注意，在第一个 sn-p 中，数组的长度为 1，但是在展平数据中，数组的长度为 2，并且还有一个新属性 hierarchy（你可以称之为任何东西）来显示m11 是 m1 的孩子。

总而言之，我编写了一个简单的递归函数，它获取您的数据并将它们展平为单独的行，然后还添加一个 hierarchy 属性：

this.rowData = this.flattenChildrenRecursively(this.originalData);

  flattenChildrenRecursively(data, parent = null, childHierachy = null) {
    let newData = [];
    if (data) {
      data.forEach((initialRow, parentIndex) => {
        let parentHierachy = [];
        initialRow.hierachy = parentHierachy;

        if (parent) {
          initialRow.parent = parent;
          parentHierachy = [...childHierachy];
          initialRow.hierachy = parentHierachy;
        }
        parentHierachy.push(parentIndex);

        newData.push(initialRow);
        if (initialRow.children) {
          newData = [
            ...newData,
            ...this.flattenChildrenRecursively(
              initialRow.children,
              initialRow,
              parentHierachy
            ),
          ];
        }
      });
    }

    return newData;
  }

一旦数据被展平，然后我们实现 getDataPath 回调来告诉网格每一行的层次结构：

  this.getDataPath = function (data) {
      return data.hierachy;
    };

请参阅following plunker example 中的实现。

【讨论】：