jsTree und Kontextmenü: ändern Artikel

Question

I jsTree 3.0.0 bin mit und ich brauche den Kontext, in einer der folgenden Weisen zu ändern:

• ändern Label Sprache für die Standardelemente, einige Standardelemente deaktivieren und fügen Sie neue Artikel.
• Schreiben Sie alle Elemente um und binden Sie sie an einige neue Elemente, die Funktion zum Erstellen, Umbenennen und Löschen.

Ich versuchte mehrere Ansätze, aber nichts hat funktioniert. Zum Beispiel gibt dies Uncaught TypeError: Object [object global] has no method 'create' zurück, wenn ich auf create klicke.

"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); } 
      } 
     }; 
    } 
}, 

Wenn ich versuche, ein Element, wie im nächsten Beispiel hinzuzufügen, verliere ich die Standard-Menüpunkte:

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 */ } 
    } 
} 

Wo bin ich falsch?

Answer 1

gelöst.

"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

für jstree v3 + (i-Test 3.2.1) In diesem Beispiel Arbeit

"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

Aktualisierte Code für letzte Version

"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

lesbares Beispiel

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