JSFiddle - React, Tailwind, and code Playground

by ccakn5870

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="tree">
    <ul>
      <li>Dept 1
        <ul>
            <li>Office
                <ul>
                    <li>Sub-Office</li>
                </ul>
            </li>
        </ul>
      </li>
      <li>Dept 2</li>
      <li>Dept 3</li>
    </ul>
</div>
<br><br>

JavaScript

$("#tree")
  .jstree({
    "core" : {
        "icons" : false
    },
  	"contextmenu": {
   	 "items": customMenu
  	},
    plugins: [ "contextmenu" ]
});

$('#add').click( function() {
		var node;
    $('#tree li').each( function() {
    	   node = $("#tree").jstree().select_node(this.id);
    })
})

// bind to events triggered on the tree
$("#tree").bind('ready.jstree', function (event, data) {
    $('#tree li').each(function (index,value) {
        var node = $("#tree").jstree().get_node(this.id);
        var val = value;
        var idx = index;
    });
});


function customMenu(node) {
    var type = node.parents.length;
    var nType;
    var subNType;

    switch (type) {
        case 1:
            nType = "Dept";
            subNType = "Office";
            break;
        case 2:
            nType = "Office";
            subNType = "Sub Office";
            break;
        case 3:
            nType = "Sub Office";
            subGoalType = "";
            break;
        default:
            break;
    }

    var items = {
        "New": {
            "label": "New Dept",
            "action": function () {
                newDept(node);
            }
        },
        "Create": {
            "label": "Create " + subNType,
            "action": function () {
                createDept(node);
            }
        },
        "Edit": {
            "label": "Edit " + nType,
            "action": function () {
                editDept(node);
            }
        },
        "Delete": {
            "label": "Delete " + nType,
            "action": function () {
                deleteDept(node);
            }
        }
    };

    return items;
}

function newDept(node) {
    alert('newDept');
}

function createDept(node) {
	alert('createDept');
}

function editDept(node) {
	alert('editDept');
}

function deleteDept(node) {
	alert('deleteDept');
}