jsTree – ContextMenu Plugin

function show_tree(){
	$('#cat_tree').jstree('destroy');

	var $tree = $('#cat_tree')
	  // listen for event
	  .on('changed.jstree', function (e, data) {
	  	var id = data.selected[data.selected.length-1];

	  	$('#cat_id').val(id);
	  	$('#show_selected_id').html('ID: ' + id);
	  })
	  .on('rename_node.jstree', function (e, data) {
	  	//console.log(data.node.id);
	  	//console.log(is_numeric(data.node.id));
	  	if(is_numeric(data.node.id) == false) return;

	  	var parent = data.node.parent;
	  	if(parent == '#') {
	  		parent = 0;
	  	}
	  	
	  	update_item('update', parent, data.node.id, data.text);
	  })
	  .on('delete_node.jstree', function (e, data) {
	  	delete_item(data.node.id);
	  })
	  .on('create_node.jstree', function (e, data) {
	  	update_item('new', data.node.parent, 0, data.node.text);
	  });
  
	$.ajax('services/cat/get_tree.php', {
		type: 'POST', 
		data: {}, 
		success: function(data, textStatus, jqXHR){
			//console.log(data);
            $tree.jstree({
            	'core': {
            		"multiple" : false,
            		'data': data, 
            		"check_callback" : true
            	}, 
            	'plugins': ['contextmenu', "sort", 'state'], 
            	contextmenu: {items: context_menu}
            });
		},
		error: function(jqXHR, textStatus, errorThrown){
			$.msg('Error:' + jqXHR.responseText);
		}
	});
}

function context_menu(node){
	var tree = $('#cat_tree').jstree(true);

	// The default set of all items
    var items = {
        "Create": {
            "separator_before": false,
            "separator_after": false,
            "label": "Create",
            "action": function (obj) { 
                var $node = tree.create_node(node);
                tree.edit($node);
            }
        },
        "Rename": {
            "separator_before": false,
            "separator_after": false,
            "label": "Rename",
            "action": function (obj) { 
                tree.edit(node);
            }
        },
        "Edit": {
            "separator_before": false,
            "separator_after": false,
            "label": "Edit",
            "action": function (obj) { 
                //tree.edit(node);
            }
        },                         
        "Remove": {
            "separator_before": true,
            "separator_after": false,
            "label": "Remove",
            "action": function (obj) { 
            	if(confirm('Are you sure to remove this category?')){
            		tree.delete_node(node);
            	}
            }
        }
    };


    return items;
}

 

Reference: