Search code examples
javascriptjqueryjquery-uijstree

How do I programmatically select a node in jsTree and open all parents


In a multi-level jsTree how do I select a particular node (probably a leaf node) and expand all it's parents? Example:
From this JSFiddle (http://jsfiddle.net/mmeah/fyDE6/) I want to programmatically select Grand Child and have all parent nodes opened.

For some context I'm trying to ensure the user returns to the correct node in the tree if they follow a deep link into my site


Solution

  • jsTree gives an open_node() function to arbitrarily trigger any node to open. Just scan the tree for non-open parents and open them.

    Example: http://jsfiddle.net/mmeah/yyy8W/

    $("#findChild").click(function(){
        $.jstree._reference(myTree).open_node("#Node_001",function(){;},false);
    });
    $("#findGrandChild").click(function(){
        var closedParents = $("#Node_003").parents("li.jstree-closed");
        for(var i=closedParents.length-1;i>=0;i--){
            pleaseOpen($(closedParents[i]));
        }
    });
    
    function pleaseOpen(thisNode){
        if(typeof thisNode=="undefined") return;
        if(thisNode.hasClass("jstree-leaf") || thisNode.hasClass("jstree-open") ) return;
        $.jstree._reference(myTree).open_node(thisNode,function(){;},true);
    }