Angular 树网格JSON格式的实现
我正在尝试在表中显示分层数据。它适用于教程中给出的示例数据，但当我尝试使用下面的JSON对象时，它要么给出所有展开的元素，而不显示展开和折叠箭头，要么只显示第一个元素：Angular 树网格JSON格式的实现,angular,angular7,syncfusion,treegrid,Angular,Angular7,Syncfusion,Treegrid,我正在尝试在表中显示分层数据。它适用于教程中给出的示例数据，但当我尝试使用下面的JSON对象时，它要么给出所有展开的元素，而不显示展开和折叠箭头，要么只显示第一个元素： [{ "id": 1, "shapeID": "M-1", "hierarchyID": "1", "origin": "M", "level": 0, "children": [ { "id": 2, "shapeID": "M-1.1", "hierarch
[{
"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"
}
]
}
]
}
]
}]
<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对象。在给定的JSON对象中，我们发现您有一个名为level的字段名。我们在EJ2TreeGrid源代码中使用了level作为关键字。因此，如果数据源有一个名为level的属性，那么可能会发生一些冲突。因此，我们建议您对数据源中的级别字段使用不同的名称。如果您仍然希望使用与level相同的列值，那么我们建议您在load事件中创建一个虚拟列，并在treegrid中显示这些列值 请参考下面的代码示例 [网页]
<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>
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;
}
}
}
}
}
从'@angular/core'导入{Component，OnInit}；
从“/jsontregriddata”导入{CustomerData}；
@组成部分({
选择器：“控件内容”，
templateUrl:'localdata.html'
})
导出类LocalDataComponent实现OnInit{
公共数据：对象[]=[]；
公共页面设置：对象；
ngOnInit（）：void{
this.data=客户数据；
this.pageSettings={pageSize:10}；
}
加载（e:any）{
treegrid.ej2_实例[0].columns.push（{field:“treegridlevel”，headerText:“Level”，width:70}）；
对于（var i=0；我不确定，但是您的json给了我一个错误。您必须删除组的最后一个属性中的“，”。例如，删除“id=4”的属性“child_id”：{“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“，我已经更正了它，但我仍然只得到了第一个没有展开/折叠图标的元素