如何在 AG-Grid 行组中添加嵌套行（Angular）

Question

我有如下所示的 AGGrid 表的数据集。

数据-.

[{
    "name": "Test A",
    "id": 10,
    "desc": "test description",
    "status": "Valid",
    "children": [
        {
            "name": "Test Child A-1",
            "id": 100,
            "desc": "test description",
            "status": "Invalid"
        },
        {
            "name": "Test Child A-2",
            "id": 88,
            "desc": "test description",
            "status": "Valid"
        }
    ]
},
{
    "name": "Test B",
    "id": 68,
    "desc": "test description",
    "status": "Valid",
    "children": [
        {
            "name": "Test Child B-1",
            "id": 45,
            "desc": "test description",
            "status": "Valid"
        },
        {
            "name": "Test Child B-1",
            "id": 35,
            "desc": "test description",
            "status": "Valid"
        }
    ]
}]

我想对此进行嵌套分组，其中第一级分组作为主要外部项目，即“测试 A”和“测试 B”。以及那些具有行级别分组的子数据的子组。

在打开组“测试 A”时，我应该看到具有相同颜色定义的子项。 使用 Angular AGGrid 实现同样的目的

请建议一种尝试此方法的方法。为此使用 AGGrid 企业版。

Answer 1

这可以使用 AG-Grid 的主从功能轻松完成

const gridOptions = {
// enable Master / Detail
masterDetail: true,

// the first Column is configured to use agGroupCellRenderer
columnDefs: [
     { field: 'name', cellRenderer: 'agGroupCellRenderer' },
     { field: 'account' }
 ],

// provide Detail Cell Renderer Params
detailCellRendererParams: {
     // provide the Grid Options to use on the Detail Grid
     detailGridOptions: {
         columnDefs: [
             { field: 'callId' },
             { field: 'direction' },
             { field: 'number'}
         ]
     },
     // get the rows for each Detail Grid
     getDetailRowData: params => {
         params.successCallback(params.data.callRecords);
     }
 },

// other grid options ...

}