Dual JsTree Implemenation : How to?

Question

I am newbie to jsTree, I want to use dual jsTree.

[left JsTrree] [ >> ] [right JsTrree]

">>" : Button for copy selected node from left to right jsTree

I want to copy partial tree hierarchy from left to right jsTree.

• No duplication of node.
• I don't want to copy child node of selected node
• Only selected node from left jsTree merge into right jsTree as per right jsTree structure

If user selected any node from left jsTree then on button(">>") click I want to copy partial tree from selected node to root node.

Left jsTree as follows "

 Root
     -----A
          -----A1
               -----A1.1
               -----A1.2
          -----A2
               -----`A2.1`
               -----A2.2

     -----B
          -----B1
          -----B2

     -----C
          -----C1
               -----C1.1
               -----C2.2

--------------------------------------------------------------------------------------
Now assume user selected node A2.1 then after button(">>") click following partial tree should display in right jsTree

[#1] Right jsTree:

 Root
     -----A
          -----A2
               -----`A2.1` 

Now Root node is added in right jsTree now on wards only selected node should merge into right jsTree.

--------------------------------------------------------------------------------------

Now assume user selected C1 then Only C1 should merge into right jsTree.

[#2] Right jsTree structure after C1 added from left jsTree:

Root
     -----A
          -----A2
               -----A2.1 
     -----C
          -----`C1`

Assume user selected A1 then A1 should merge into appropriate place
[#3] Right jsTree structure after A1 added from left jsTree:

Root
     -----A
          -----`A1`
          -----A2
               -----A2.1                   
     -----C
          -----C1

My workaround till now is as follows

after selection of node from left jsTree I am building xml from selected node to root node. and generated partial_xml_string stored into cookie. OnClick of (">>")button I am reading value of partial_xml_string from cookie + clearing cookie value of partial_xml_string. [#1] case done properly. Is there any other good way to achive [#1] case ?

Using .get_path ( node , id_mode ) I am getting path(ID & Name) from root to leaf node

if id_mode =true then node IDs = Root.id,A.id, A2.id, A2.1.id

if id_mode =false then node Name's = Root, A, A2, A2.1

Is it possible to set this path to right side of jsTree ?

If yes then How to set this path ? If path already exist then how to prevent copying ? else merge selected node to right jsTree.

--------------------------------------------------------------------------------------------

Using .bind("select_node.jstree", function (event, data) we can handle event on selected node. How to handle event onClick of + *icon* ?

Consider my left jsTree contains only one Root node with + icon then How to handle onClick event on + icon? see ink's answer

I want to get child nodes of selected node how to append that list of child nodes to selected node ?

How to achieve [#2] and [#3] using jsTree functions ?

Any help or guidance in this matter would be appreciated.

Answer 1

I don't know the jsTree implementation, but I don't think you need the XML. You could create a recursive function to go to the root of the subtree and then come back adding each node in case it doesn't exist. In pseudo code:

function transport(node, tree)
{
    var parent = node.getParent();
    var transported_node = null;

    if(parent != null)
        parent = transport(parent, tree);
    else
       parent = tree;

    transported_node = parent.getChild(node);

    if(transported_node == null)
       transported_node = parent.AddChild(node);

    return transported_node;
}