[英]How to create a tree table html file usin below JSON file
I am trying to create tree table html file using primeng.我正在尝试使用primeng创建树表html文件。 The Html file should able to render below JSON file .
Html 文件应该能够在 JSON 文件下方呈现。
Below is the Json response.以下是Json响应。
{
"data": [
{
"data": {
"Briname": "Aamir",
"aantalPersonen": "122"
},
"children": [
{
"data": {
"Vestiging": "Ranchi",
"aantalPersonen": "102"
},
"children": [
{
"data": {
"Singalcode": "4",
"aantalPersonen": "15"
}
},
{
"data": {
"Singalcode": "5",
"aantalPersonen": "10"
}
}
]
},
{
"data": {
"Vestiging": "Bangalore",
"aantalPersonen": "82"
},
"children": [
{
"data": {
"Singalcode": "6",
"aantalPersonen": "15"
}
}
]
}
]
},
{
"data": {
"Briname": "Abhinav",
"aantalPersonen": "122"
},
"children": [
{
"data": {
"Vestiging": "Bangalore",
"aantalPersonen": "102"
},
"children": [
{
"data": {
"Singalcode": "4",
"aantalPersonen": "15"
}
}
]
}
]
}
]
}
Here the parent having "Briname" as key data element name and children node having "vestging and "Singalcode" as data element.这里的父节点具有“Briname”作为关键数据元素名称,子节点具有“vestging”和“Singalcode”作为数据元素。
How we can achieve this using tree table?我们如何使用树表实现这一目标?
HTML : HTML :
<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" (onNodeSelect)="nodeSelect($event)">
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns" >
<tr [ttSelectableRow]="rowNode">
<td *ngFor="let col of columns; let i = index">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-treeTable>
I think property names need to be remapped and fixed.我认为需要重新映射和修复属性名称。
like this:像这样:
{
"data": [
{
"data": {
"name": "Briname: Aamir",
"aantalPersonen": "122"
},
"children": [
{
"data": {
"name": "Vestiging: Ranchi",
"aantalPersonen": "102"
},
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.