需要使用Ractive js显示树结构的帮助


Need help in display tree structure using Ractive js

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

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

其中M1是根管理器,T1-T7是叶节点(团队成员)

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

要使用jsTree,您必须:

  1. jsTree库添加到您的页面
  2. 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}}]

  1. 为页面上的div编写一些配置代码,这些代码将根据jsTree规则转换为树,并在加载DOM后运行

你可以在这里看到一个例子:Fiddle