我正在尝试tutorial在表中显示分层数据。它可以很好地与教程中给出的示例数据配合使用，但是当我尝试使用下面的JSON对象时，它要么给出所有展开的元素，而没有展开和折叠箭头，要么仅显示第一个元素：
[{
"id": 1,
"shapeID": "M-1",
"hierarchyID": "1",
"origin": "M",
"level": 0,
"children": [
{
"id": 2,
"shapeID": "M-1.1",
"hierarchyID": "1.1",
"origin": "M",
"level": 1,
"parent_id": "1",
"child_id": "1",
"children": [
{
"id": 3,
"shapeID": "M-1.1.1",
"hierarchyID": "1.1.1",
"origin": "M",
"level": 2,
"parent_id": "1.1",
"child_id": "1",
"children": [
{
"id": 4,
"shapeID": "M-1.1.1.1",
"hierarchyID": "1.1.1.1",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "1"
}, {
"id": 5,
"shapeID": "M-1.1.1.2",
"hierarchyID": "1.1.1.2",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "2"
}, {
"id": 6,
"shapeID": "M-1.1.1.3",
"hierarchyID": "1.1.1.3",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "3"
}, {
"id": 7,
"shapeID": "M-1.1.1.4",
"hierarchyID": "1.1.1.4",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "4"
}, {
"id": 8,
"shapeID": "M-1.1.1.5",
"hierarchyID": "1.1.1.5",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "5"
}, {
"id": 9,
"shapeID": "M-1.1.1.6",
"hierarchyID": "1.1.1.6",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "6"
}, {
"id": 10,
"shapeID": "M-1.1.1.7",
"hierarchyID": "1.1.1.7",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "7"
}, {
"id": 11,
"shapeID": "M-1.1.1.8",
"hierarchyID": "1.1.1.8",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "8"
}, {
"id": 12,
"shapeID": "M-1.1.1.9",
"hierarchyID": "1.1.1.9",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "9"
}, {
"id": 13,
"shapeID": "M-1.1.1.10",
"hierarchyID": "1.1.1.10",
"origin": "M",
"level": 3,
"parent_id": "1.1.1",
"child_id": "10"
}
]
},
{
"id": 14,
"shapeID": "M-1.1.2",
"hierarchyID": "1.1.2",
"origin": "M",
"level": 2,
"parent_id": "1.1",
"child_id": "2",
"children": [
{
"id": 15,
"shapeID": "M-1.1.2.1",
"hierarchyID": "1.1.2.1",
"origin": "M",
"level": 3,
"parent_id": "1.1.2",
"child_id": "1"
}, {
"id": 16,
"shapeID": "M-1.1.2.2",
"hierarchyID": "1.1.2.2",
"origin": "M",
"level": 3,
"parent_id": "1.1.2",
"child_id": "2"
}, {
"id": 17,
"shapeID": "M-1.1.2.3",
"hierarchyID": "1.1.2.3",
"origin": "M",
"level": 3,
"parent_id": "1.1.2",
"child_id": "3"
}
]
},
{
"id": 18,
"shapeID": "M-1.1.3",
"hierarchyID": "1.1.3",
"origin": "M",
"level": 2,
"parent_id": "1.1",
"child_id": "3",
"children": [
{
"id": 19,
"shapeID": "M-1.1.3.1",
"hierarchyID": "1.1.3.1",
"origin": "M",
"level": 3,
"parent_id": "1.1.3",
"child_id": "1"
}, {
"id": 20,
"shapeID": "M-1.1.3.2",
"hierarchyID": "1.1.3.2",
"origin": "M",
"level": 3,
"parent_id": "1.1.3",
"child_id": "2"
}
]
}
]
}
]
}]
在html端，我正在使用以下代码：
<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='children'>
<e-columns>
<e-column field='id' headerText='id' textAlign='Right' width=70></e-column>
<e-column field='hierarchyID' hierarchyID='hierarchyID' textAlign='Right' width=70></e-column>
<e-column field='shapeID' headerText='shapeID' textAlign='Right' width=70></e-column>
</ejs-treegrid>
我不知道为什么它不能按需要与我的JSON对象一起使用。
答案 0 :(得分：1)
在给定的JSON对象中，我们发现您有一个名为 level 的字段名称。我们在EJ2 TreeGrid源代码中将level用作关键字。因此，如果dataSource具有名为level的属性，则可能会发生一些冲突。因此，我们建议您对dataSource的级别字段使用不同的名称。如果您仍然希望使用与级别相同的列值，那么建议您在load事件中创建一个虚拟列，并在treegrid中显示这些列值。
请参考以下代码示例。
[html页面]
<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='children' (load)='load($event)'>
<e-columns>
<e-column field='id' headerText='id' textAlign='Right' width=70></e-column>
<e-column field='hierarchyID' headerText='hierarchyID' width=70></e-column>
<e-column field='shapeID' headerText='shapeID' textAlign='Right' width=70></e-column>
</e-columns>
</ejs-treegrid>
[ts页面]
import { Component, OnInit } from '@angular/core';
import { CustomerData } from './jsontreegriddata';
@Component({
selector: 'control-content',
templateUrl: 'localdata.html'
})
export class LocalDataComponent implements OnInit {
public data: Object[] = [];
public pageSettings: Object;
ngOnInit(): void {
this.data = CustomerData;
this.pageSettings = { pageSize: 10 };
}
load (e: any) {
treegrid.ej2_instances[0].columns.push({field:"treegridlevel",headerText: "Level", width: 70});
for(var i=0; i<this.data.length; i++){
this.data[i].treegridlevel = this.data[i].level;
delete this.data[i].level;
if(this.data[i].hasOwnProperty("children")){
for(var j=0;j<this.data[i].children.length;j++){
this.data[i].children[j].treegridlevel = this.data[i].children[j].level;
delete this.data[i].children[j].level;
}
}
}
}
}
在上面的代码示例中，我们为一个级别分配了级别值。同样，您可以为其他值分配值。我们已经准备了一个在线示例供您参考，请参考下面的链接以获取示例。
示例：https://stackblitz.com/edit/angular-fq2t3s-qxeww8?file=localdata.html