jsTree et Context Menu: modifiez les éléments
J'utilise jsTree 3.0.0 et je dois modifier le contexte de l'une des manières suivantes:
- Modifiez la langue des étiquettes pour les éléments par défaut, désactivez certains éléments par défaut et ajoutez de nouveaux éléments.
- Réécrivez tous les éléments et liez à certains nouveaux éléments la fonction créer, renommer et supprimer.
J'ai essayé plusieurs approches mais rien n'a fonctionné. Par exemple, cela renvoie Uncaught TypeError: Object [object global] has no method 'create' lorsque je clique sur créer.
"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); }
}
};
}
},
Si j'essaie d'ajouter un élément comme dans l'exemple suivant, je perds les éléments de menu par défaut:
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 */ }
}
}
Où ai-je tort?
Résolu:
"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);
}
}
};
}
}
Code mis à jour pour la dernière 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);
}
}
};
}
}
pour jstree v3. + (je teste 3.2.1) cet exemple fonctionne
"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);
}
}
};
}
},
Exemple plus lisible
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);
}
}
}
}
}