JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

HTML

<script src="https://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<input id="searchedNodeId" type="text" value="cat2"/><button id="search_node" style="margin-bottom:40px;">Search node id</button>
<div id="tree"></div>

JavaScript

var data = [
     { "id" : "allCategories", "parent" : "#", "type" : "catRoot", "text" : "All Cats", "state": {"opened": true } },
     { "id" : "cat1", "parent" : "allCategories", "type" : "tree", "text" : "Cat 0.1", "state": {"opened": true } },
     { "id" : "cat2", "parent" : "allCategories", "type" : "tree", "text" : "Cat 0.2" },
     { "id" : "cat3", "parent" : "allCategories", "type" : "tree", "text" : "Cat 0.3" },
     { "id" : "cat01", "parent" : "cat1", "type" : "tree", "text" : "Cat 0.1.0" },
     { "id" : "cat02", "parent" : "cat1", "type" : "tree", "text" : "Cat 0.1.1" },
     { "id" : "cat03", "parent" : "cat1", "type" : "tree", "text" : "Cat 0.1.2" }
]

$.jstree.defaults.core = {};
$('#tree').jstree({
    "core" : {
        "data" : data,
        "themes": {
            "url": true,
            "icons": true
        }
    },
    "types" : {
        "tree" : {
            "icon" : 'https://www.jstree.com/tree-icon.png'
        },
        "mytype" : {
            "icon" : 'glyphicon glyphicon-leaf'
        }
    },
    "plugins": [ "types" ]
 });  


$("#search_node").click( function() {
    var searchedNodeId = $("#searchedNodeId").val();
    $('#tree').jstree("select_node", $('#'+searchedNodeId)); 
});