Dual jsTree Implementation

问题

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.

回答1:

I can help you with [+] click event. You have to modify your jquery.jstree.js (uncompressed version). Open it, find string with toggle_node : function (obj) (there is a tab symbol so search toggle_node) and add 1 line here. After edit it must be:

        toggle_node : function (obj) {
            obj = this._get_node(obj);
            this.__callback(obj); // these line must be added
            if(obj.hasClass("jstree-closed")) { return this.open_node(obj); }
            if(obj.hasClass("jstree-open")) { return this.close_node(obj);}             
        },

Now you can bind a callback as usual for toggle_node event. Here is example:

    $("#your_jstree").bind("toggle_node.jstree", function (e, data) {
        is_opened = $(data.rslt).hasClass('jstree-open') ? false : true;
        node_id = $(data.rslt).attr('id');
        alert('node with id='+node_id+' is '+(is_opened ? 'opening' : 'closing')+' now.');          
    })

These callback calls before node opens or closes. And also this event does not fire while the tree is loading, like if you use open_node event.

来源：https://stackoverflow.com/questions/10223212/dual-jstree-implementation

标签

javascript

jquery

tree

javascript-framework

jstree