CODEWITHSUNDEEP
jstree
user1093482
user1093482

Reputation: 41

jstree preselect node and open all parents needed

I use the Jstree 1.0RC3 and do not get it to work to have a node selected and to let the tree open so that this node is visible. My code is this:

.jstree({ 
    // List of active plugins
    "plugins" : [ 
        "themes","json_data","ui","crrm","dnd","search","types","hotkeys","contextmenu" 
                    //"themes","json_data","ui","crrm","cookies","dnd","types","hotkeys"
    ],

    "json_data" : { 
        "ajax" : {
            "url" : $path + "/server.php",
            "data" : function (n) { 

                return { 
                    "operation" : "get_children",
                    "id" : n.attr ? n.attr("id").replace("node_","") : <?php echo($jstree_root); ?>


                };
            }
        }
    }, 

    },
"core" : { 
        // just open those two nodes up
        // as this is an AJAX enabled tree, both will be downloaded from the server
        "initially_open" : [ <?php echo($jstree_root_node); ?> ]

The UI-plugin is empty. The php echo($jstree_root_node) opens the first hierarchical level below the root for better overview. Sometimes I would like to pass an ID of a Node that should be selected. This node is not always visible by opening the tree by default. What I see is that the node will be selected if it is visible in the first hierarchical level. If it is deeper, it is not selected.

I found in the forums to use this before the JSTREE call but it is not working:

        .bind("reopen.jstree", function () {
      $("#demo").jstree("select_node", "#node_1637");
      $("#node_1637").parents(".jstree-closed").each(function () {
            $("#demo").jstree("open_node", this, false, true);
      });
    })

Any ideas on this one? It seems to be right in front of my nose, but I dont see it....

gb5256

Upvotes: 3

Views: 5802

Answers (2)

Anoop
Anoop

Reputation: 859

you could use open_all to open all available nodes.

$("#TreeID").jstree('open_all');

Upvotes: -1

Lubor B&#237;lek
Lubor B&#237;lek

Reputation: 322

I think there are 2 ways to handle it.

First option - Using "initially_open" you need to specify all nodes going from root to selected node. The jsTree will go through this sequence, open each one node, load it's content, open next node, load it's content etc.

Some basic idea of the script: 

"core" : { 
        "initially_open" : [ < ?php echo implode(',', $path_to_node) ?> ] 
}

Second option - Using "search" plugin you need to create a php script that will be called by ajax request and should return the path to searched node. So you define search plugin:

      'search' : {
          'case_insensitive' : true,
          'ajax' : {
              'url' : 'search_script.php',
              'data' : function(n) {
                  return { search_id : n };
              }
          }
      },

Then you bind the search action after tree is loaded:

    $('#tree').bind('loaded.jstree', function(e, data){  
          $('#tree').jstree('search', <?php echo($jstree_searched_node); ?>); 
    });

The search_script.php should return the array of node-keys to be opened the same way as in first option.

It's not the complete copy&paste solution, but I hope this will take you to the right way to finish it successfully.

Upvotes: 3

Related Questions