Javascript jsTree和上下文菜单:修改项
我正在使用Javascript jsTree和上下文菜单:修改项,javascript,jquery,contextmenu,jstree,Javascript,Jquery,Contextmenu,Jstree,我正在使用jsTree 3.0.0,我需要通过以下方式之一修改上下文: 更改默认项的标签语言,禁用某些默认项并添加新项 使用create、rename和delete函数重写所有项并绑定到一些新项 我尝试了几种方法,但都不奏效。例如,当我单击create时,返回未捕获的TypeError:Object[Object global]没有方法“create” "contextmenu":{ "items": function($node) { return {
jsTree 3.0.0
,我需要通过以下方式之一修改上下文:
- 更改默认项的标签语言,禁用某些默认项并添加新项
- 使用create、rename和delete函数重写所有项并绑定到一些新项
"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 */ }
}
}
我哪里错了?已解决:
"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);
}
}
};
}
}
对于jstree v3.+(i test 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);
}
}
};
}
},
更新了最新版本的代码
"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);
}
}
};
}
}
更具可读性的示例
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
}
}
};
}
}
});
我想在任何类型的修改中获得更新的
数据。我怎样才能做到?使用代码时,Uncaught TypeError:tree.create_节点不是函数
create action发生错误最有可能的是,您忘记将“#tree”更改为这一行html中树的id:var tree=$(“#tree”).jstree(true);您还可以获得如下树实例:var-tree=$.jstree.reference(obj.reference)代码>这在跨不同的树共享相同的上下文菜单配置时特别有用。。(可能还有其他方法)@sara_thepot解决方案是一种有效的解决方案。如果有人想查看完整的源代码,您可以参考重命名
和删除
操作,但创建
操作无法正常工作。创建新节点时,如果要为不同的节点创建另一个节点,请将新节点添加到先前选定的节点。
"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);
}
}
}
}
}