在使用 Ractive js 显示树结构方面需要帮助

Question

我是 Ractive js 新手。我需要以树的形式显示组织层次结构。我的 Ractive 模板中定义了 1 个数组。

managerTeam = {M1: [T1, T2, M2, T3], M2: [M3, T4,T5],  M3: [T6,T7]};

其中M1是根经理，T1-T7是叶节点（团队成员）

我应该如何使用 jsTree 或任何其他库显示它？

Answer 1

要使用 jsTree，您必须：

将 jsTree 库添加到您的页面
将您的 managerTeam 对象转换为 jsTree 可接受的格式，如下所示：

managerTeam = [{ "id":"m1", "text": "M1", "children": [ {"parent": "m1", "text": "T1"}, {"parent": "m1", "text": "T2"}, {"parent": "m1", "text": "M2"}, {"parent": "m1", "text": "T3"} ], "state":{"opened":true}}, { "parent": "root", "id": "m2", "text": "M2", "children": [ {"parent": "m2", "text": "M3"}, {"parent": "m2", "text": "T4"}, {"parent": "m2", "text": "T5"} ], "state":{"opened":true}}, { "id": "m3", "text": "M3", "children": [ {"parent": "m3", "text": "T6"}, {"parent": "m3", "text": "T7"} ], "state":{"opened":true}}]

为你页面上的div写一些配置代码，根据jsTree规则变成树，运行它在DOM加载后

您可以在此处查看示例：Fiddle

在使用 Ractive js 显示树结构方面需要帮助

Need help in display tree structure using Ractive js

javascript

php

jstree

ractivejs