jsTree – ContextMenu Plugin

jsTree Utilities

$(document).on(‘dnd_stop.vakata‘, function (e, data) {
 var tree = $("#cat_tree").jstree(true);
 var id = data.data.nodes[0];
 var node = tree.get_node(id);
    console.log(node);
});

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;
}