jsTree и Контекстное меню: изменять элементы

Question

Я использую jsTree 3.0.0 и мне нужно изменить контекст, в одном из следующих способов:

• Сменить язык этикетки для элементов по умолчанию, отключить некоторые элементы по умолчанию и добавить новый Предметы.
• Перепишите все элементы и привяжите к некоторым новым элементам функцию создания, переименования и удаления.

Я пробовал несколько подходов, но ничего не работало. Например, это возвращает Uncaught TypeError: Object [object global] has no method 'create', когда я нажимаю кнопку «Создать».

"contextmenu":{ 
    "items": function($node) { 
     return { 
      createItem : { 
       "label" : "Create New Branch", 
       "action" : function(obj) { this.create(obj); alert(obj.text())}, 
       "_class" : "class" 
      }, 
      renameItem : { 
       "label" : "Rename Branch", 
       "action" : function(obj) { this.rename(obj);} 
      }, 
      deleteItem : { 
       "label" : "Remove Branch", 
       "action" : function(obj) { this.remove(obj); } 
      } 
     }; 
    } 
}, 

Если я пытаюсь добавить один элемент, как в следующем примере, я освобождаю пунктов меню по умолчанию:

items : { 
    "create_folder" : { 
     "separator_before" : false, 
     "separator_after" : false, 
     "label" : "Create Folder", 
     "action" : function (obj) { alert(1); /* this is the tree, obj is the node */ } 
    } 
} 

Где я ошибаюсь?

Answer 1

Постановили:.

"contextmenu":{   
    "items": function($node) { 
     var tree = $("#tree").jstree(true); 
     return { 
      "Create": { 
       "separator_before": false, 
       "separator_after": false, 
       "label": "Create", 
       "action": function (obj) { 
        $node = tree.create_node($node); 
        tree.edit($node); 
       } 
      }, 
      "Rename": { 
       "separator_before": false, 
       "separator_after": false, 
       "label": "Rename", 
       "action": function (obj) { 
        tree.edit($node); 
       } 
      },       
      "Remove": { 
       "separator_before": false, 
       "separator_after": false, 
       "label": "Remove", 
       "action": function (obj) { 
        tree.delete_node($node); 
       } 
      } 
     }; 
    } 
} 

Answer 2

для jstree v3 + (я тест 3.2.1) этот пример работы

"contextmenu":{ 
        "items": function() { 
         return { 
          "Create": { 
           "label": "Create", 
           "action": function (data) { 
            var ref = $.jstree.reference(data.reference); 
             sel = ref.get_selected(); 
            if(!sel.length) { return false; } 
            sel = sel[0]; 
            sel = ref.create_node(sel, {"type":"file"}); 
            if(sel) { 
             ref.edit(sel); 
            } 

           } 
          }, 
          "Rename": { 
           "label": "Rename", 
           "action": function (data) { 
            var inst = $.jstree.reference(data.reference); 
             obj = inst.get_node(data.reference); 
            inst.edit(obj); 
           } 
          }, 
          "Delete": { 
           "label": "Delete", 
           "action": function (data) { 
            var ref = $.jstree.reference(data.reference), 
             sel = ref.get_selected(); 
            if(!sel.length) { return false; } 
            ref.delete_node(sel); 

           } 
          } 
         }; 
        } 
       }, 

Answer 3

Обновленный код последней версии

"contextmenu":{   
    "items": function($node) { 
     var tree = $("#tree").jstree(true); 
     return { 
      "Create": { 
       "separator_before": false, 
       "separator_after": false, 
       "label": "Create", 
       "action": function (obj) { 
        $node = tree.jstree('create_node', $node); 
        tree.jstree('edit', $node); 
       } 
      }, 
      "Rename": { 
       "separator_before": false, 
       "separator_after": false, 
       "label": "Rename", 
       "action": function (obj) { 
        tree.jstree('edit', $node); 
       } 
      },       
      "Remove": { 
       "separator_before": false, 
       "separator_after": false, 
       "label": "Remove", 
       "action": function (obj) { 
        tree.jstree('delete_node', $node); 
       } 
      } 
     }; 
    } 
} 

Answer 4

Более читаемый пример

var tree = $('#treeDiv').jstree({ 
     "plugins": ["contextmenu"], 
     "contextmenu": { 
      "items": function ($node) { 
       return { 
        "create": { 
         "separator_before": false, 
         "separator_after": false, 
         "label": "Create", 
         "action": function (obj) { 
          // action code here 
         } 
        } 
       }; 
      } 
     } 
    });