Tree Grid формат JSON Угловая реализация - PullRequest
Новая
       50

Tree Grid формат JSON Угловая реализация

0 голосов
/ 13 января 2019

Я пытаюсь учебник отображения иерархических данных в таблице. Он отлично работает с примерами данных, приведенными в руководстве, но когда я пытаюсь использовать приведенный ниже объект 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 должным образом.

1 Ответ

0 голосов
/ 16 января 2019

В данном объекте JSON мы обнаружили, что у вас есть имя поля с именем level . Мы использовали уровень в качестве ключевого слова в нашем источнике EJ2 TreeGrid. Таким образом, если dataSource имеет свойство с именем level, могут возникнуть некоторые конфликты. Поэтому мы предлагаем вам использовать другое имя для поля уровня из источника данных. Если вы все еще хотите использовать то же значение столбца, что и уровень, то мы предлагаем вам создать виртуальный столбец в событии загрузки и отобразить значения этих столбцов в сетке дерева.

Пожалуйста, обратитесь к примеру кода ниже.

[html page] 

<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 page] 

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

...