Как заполнить многоуровневое представление KendoTree вложенными данными JSON в Angular 5 - PullRequest
Новая
       59

Как заполнить многоуровневое представление KendoTree вложенными данными JSON в Angular 5

0 голосов
/ 31 октября 2019

Я пытаюсь заполнить вложенные данные JSON многоуровневым KendoTreeView. 

public nodes: any[] = [{
      "moduleId": 1,
      "moduleName": "Mode",
      "features": [
        {
          "featureId": 2,
          "featureName": "F1",
          "subFeatures": [],
          "privileges": [
            {
              "privilegeId": 2,
              "privilegeName": "P2"
            },
            {
              "privilegeId": 12,
              "privilegeName": "P2E"
            }
          ]
        },
        {
          "featureId": 3,
          "featureName": "F2",
          "subFeatures": [
            {
              "featureId": 4,
              "featureName": "F21",
              "subFeatures": [],
              "privileges": [
                {
                  "privilegeId": 4,
                  "privilegeName": "P4"
                }
              ]
            }
          ],
          "privileges": [
            {
              "privilegeId": 3,
              "privilegeName": "P3"
            }
          ]
        }
    ]
}]

Используя этот код, я мог видеть только одно дерево уровней. Не уверен, как использовать [hasChildren] = "hasChildren" в этом сценарии.

` До сих пор я пытался это сделать, чтобы некоторые данные были заполнены в Kendo TreeView. Данные выглядят какthis. 

<kendo-treeview [nodes]="node"
                [textField]="[ 'moduleName','featureName']"
                [childrenField]="['features']"
                kendoTreeViewExpandable
                kendoTreeViewHierarchyBinding>
</kendo-treeview>`

Заранее благодарим за помощь.

1 Ответ

0 голосов
/ 02 ноября 2019

Компонент дерева напрямую поддерживает только одно поле для имени узла. Таким образом, вы должны использовать шаблон узла, чтобы найти правильный атрибут для отображения имени узла. Кроме того, для детей и детей необходимо добавить код, который сообщает, какой атрибут содержит дочерние элементы и имеет ли этот атрибут контент. Итак, ваша структура: 

Module
  Feature
    Subfeature

Каждый уровень должен поддерживаться пользовательским кодом.

Шаблон: 

 <kendo-treeview
     textField="moduleName"
     [nodes]="nodes"
     [children]="children"
     [hasChildren]="hasChildren"
 >
 <ng-template kendoTreeViewNodeTemplate let-dataItem>
        {{dataItem.moduleName || dataItem.featureName}}
    </ng-template>
 </kendo-treeview>

HasChildren: 

 public hasChildren = (dataitem: any): boolean => !!dataitem.features || !!dataitem.subFeatures;

Дети: 

 public children = (dataitem: any): Observable<any[]> => of(dataitem.features || dataitem.subFeatures);

Я подготовил Stackblitz , который работает с вашими данными.

...