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>Alerts:<div id="myAlert"></div>

JavaScript

var jData = [{
        "data": {
            "attr": {
                "title": "A node"               
            },
            "title" : "A node"
            },

            "children": [{
                "data": {
                    "title": "child"
                },
                "children": [{
                    "data": {
                        "title": "Grand Child"
                    }
                }]
            }]
        }];
        var myTreeEl = $("#demo1");
        var myTree = myTreeEl.jstree({
            "json_data": {
                "data": jData
            },
            "ui": {
                "select_multiple_modifier": "on"
            },
            "plugins": ["json_data", "ui", "themes"]
        }).bind("select_node.jstree", function(evt, data) {
            var myTreeClicked=myTreeEl.find(".jstree-clicked");
            for(var i=0;i<myTreeClicked.length;i++){
                if(myTreeClicked[i]!=data.rslt.obj.find(".jstree-clicked")[0]){
                    $.jstree._reference(myTreeClicked[i]).deselect_node(myTreeClicked[i]);
                }
            }
            var nodeText = data.rslt.obj.find("a:first").text();
            $("#myAlert").append("Selected: "+nodeText+"<br>");
        }).bind("deselect_node.jstree", function(evt, data) {
            var nodeText = data.rslt.obj.find("a:first").text();
            $("#myAlert").append("Deselected: "+nodeText+"<br>");
        });