jsTreeおよびコンテキストメニュー：アイテムの変更
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); }
}
};
}
},
次の例のように1つの項目を追加しようとすると、デフォルトのメニュー項目が失われます。
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);
}
}
};
}
}
最終バージョンの更新コード
"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);
}
}
};
}
}
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);
}
}
};
}
},
より読みやすい例
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
}
}
};
}
}
});
"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);
}
}
}
}
}