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

Question

数据：

   [
    {
        "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 级，但不支持列的多级分组

下面是预期的结果

标签： angulargroupingag-gridag-grid-angular

Answer 1

树数据是这里的自然选择，因为您有一个有子数据的层次结构。

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

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

所以首先你必须扁平化你的数据，例如，以下数据：

[
    {
        "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: [] }
]

请注意，在第一个片段中，数组的长度为 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;
    };

请参阅以下 plunker 示例中的实现。