JsTree и контекстное меню: изменить элементы
Я использую jsTree 3.0.0
, и мне нужно изменить контекст одним из следующих способов:
- Измените язык ярлыков для элементов по умолчанию, отключите некоторые элементы по умолчанию и добавьте новые элементы.
- Перепишите все элементы и привяжите к некоторым новым элементам функцию create, rename и delete.
Я попробовал несколько подходов, но ничего не получилось. Например, это возвращает Uncaught TypeError: Object [object global] has no method 'create'
, когда я нажимаю на 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 */ }
}
}
Где я ошибаюсь?
Ответы
Ответ 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);
}
}
};
}
}
Ответ 2
для 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);
}
}
};
}
},
Ответ 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);
}
}
};
}
}
Ответ 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
}
}
};
}
}
});