Ag grid 为树形数据网格设置数据路径

我有一个数据如下

let data=[{id:1，name:'x'，子项：[{name:'y'，id:2}，{name:'c'，id:3}]}]

我想用客户端行模型显示树数据

---

如何设置getdata path并显示名为x的父行和名为y和c的子行？

嵌套子行在TreeData模式下很难使用。您需要以

datapath

格式重新构造数据，以便网格更容易渲染。我已经编写了一个简单的扁平函数来组织层次结构中的数据，以便网格可以轻松地使用它。此外，它的文档记录非常糟糕，因此我们根据网格重新构造数据是有意义的

var rawData=[{id:9，名称：'xx'}，{id:10，名称：'yy'，子项：[{
名称：“yyy”，
id:21，}]}{
id:1，
名称：“x”，
儿童：[{
名称：“y”，
id:2，
儿童：[{
名称：‘a’，
身份证号码：4
}, {
名称：‘b’，
身份证号码：5
}]
}, {
名称：‘c’，
id:3，
儿童：[{
名称：“d”，
身份证号码：6
}, {
名称：'e'，
身份证号码：7
}]
}]
}];
//功能为扁平化和建立继承权
函数展平（arr、parentref）{
返回arr？arr.reduce（（结果，项目）=>[
…结果，
{
名称：item.name，
id:item.id，
层次结构：parentref？[…parentref，item.name]：[item.name]
},
…展平（item.children，parentref？[…parentref，item.name]：[item.name]）
], []) : [];
}
var rowData=展平（rawData）；
变量gridOptions={
columnDefs：[{
字段：“id”
}],
默认值f：{
弹性：1，
},
自动组列定义：{
headerName:'名称'，
最小宽度：300，
CellRenderParams：{
是的，
},
},
rowData:rowData，
treeData:true，//启用树数据模式
动画师：没错，
groupDefaultExpanded:-1，//默认情况下展开所有组
getDataPath:函数（数据）{
返回数据。层次结构；
},
};
函数onFilterTextBoxChanged（）{
gridOptions.api.setQuickFilter(
document.getElementById（'filter-text-box'）。值
);
}
//等待文档加载，否则
//ag Grid在文档中找不到div。
document.addEventListener（'DOMContentLoaded'，function（）{
//查找我们希望网格使用的容器
var eGridDiv=document.querySelector（“#myGrid”）；
//创建传入div的网格，以便与要使用的列和数据一起使用
新的agGrid.Grid（eGridDiv，gridOptions）；
});
。示例包装器{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
#我的网格{
弹性：10像素；
宽度：100%；
}

var__basePath='./'；
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
框大小：边框框；
-webkit溢出滚动：触摸；
}
html{
位置：绝对位置；
排名：0；
左：0；
填充：0；
溢出：自动；
}
身体{
填充：1rem；
溢出：自动；
}