Search code examples
javascriptphpjstreeractivejs

Need help in display tree structure using Ractive js

I am new to Ractive js. I need to display organisational hierarchy in a form of tree. I have 1 array defined in my Ractive template. 

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

where M1 is the root manager, T1-T7 are leaf nodes (team members)

How should I display it using jsTree or any other library?

Solution

  • To use jsTree you will have to:

    1. add jsTree library to your page
    2. turn your managerTeam object into format acceptable for jsTree, like this:

    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. write some configuration code for the div on your page that will be turned into tree according to jsTree rules and run it after DOM is loaded

    An example of that you can see here: Fiddle