jsTree和上下文菜单：修改项目

我正在使用jsTree 3.0.0 ，我需要通过以下方式之一修改上下文：

• 更改默认项目的标签语言，禁用某些默认项目并添加新项目。
• 重写所有项目并绑定到一些新项目的创建，重命名和删除function。

我尝试了几种方法但没有任何效果。 例如，这将返回Uncaught TypeError: Object [object global] has no method 'create'当我单击create时， 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 } } }; } } }); 

Answer 5

 "contextmenu": { "items": function ($node) { var tree = $("#tree").jstree(true); return { "Create": { "separator_before": false, "separator_after": true, "label": "Create", "action": false, "submenu": { "File": { "seperator_before": false, "seperator_after": false, "label": "File", action: function (obj) { $node = tree.create_node($node, { text: 'New File', type: 'file', icon: 'glyphicon glyphicon-file' }); tree.deselect_all(); tree.select_node($node); } }, "Folder": { "seperator_before": false, "seperator_after": false, "label": "Folder", action: function (obj) { $node = tree.create_node($node, { text: 'New Folder', type: 'default' }); tree.deselect_all(); tree.select_node($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); } } } } }