JSFiddle - React, Tailwind, and code Playground

by mmeah

HTML

<script src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script>
<div id="demo1"></div>

<br><br>
<input type="button" id="findChild" value="Find Child!">
<input type="button" id="findGrandChild" value="Find GrandChild!">

JavaScript

var jData = [{
        "data": {
            "title" : "A node"
        },
        "attr": {
            "id": "Node_001"               
        },
        "children": [{
                "data": {
                    "title": "child",
                    "attr": {
                        "id": "Node_002"               
                    }                
                },
                "children": [{
                    "data": {
                        "title": "Grand Child"
                    },
                    "attr": {
                        "id": "Node_003"               
                    },
                }]  
        }]
    }];

    var myTree = $("#demo1").jstree({
        "json_data": {
            "data": jData
        },          
        "plugins": ["json_data", "ui", "themes"]
    });

    $("#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);
    }