La configuration de jstree cliquez-droit sur contextmenu pour les différents types de nœuds

J'ai vu un exemple quelque part en ligne montrant comment personnaliser l'apparence de jstree droit-cliquez sur le menu contextuel (à l'aide de contextmenu plugin).

Par exemple, permettre à mes utilisateurs de supprimer "documents", mais pas "dossiers" (en cachant l'option "supprimer" dans le menu contextuel des dossiers).

Maintenant je ne trouve pas d'exemple. Quelqu'un peut me pointer dans la bonne direction? L'officiel la documentation n'a pas vraiment aider.

Edit:

Car je veux le menu contextuel par défaut avec seulement un ou deux changements mineurs, je préfère ne pas recréer le menu (même si bien sûr je le ferai si c'est le seul moyen). Ce que j'aime faire, c'est quelque chose comme ceci:

"contextmenu" : {
    items: {
        "ccp" : false,
        "create" : {
            //The item label
            "label" : "Create",
            //The function to execute upon a click
            "action": function (obj) { this.create(obj); },
            "_disabled": function (obj) { 
                alert("obj=" + obj); 
                return "default" != obj.attr('rel'); 
            }
        }
    }
}

mais elle ne fonctionne pas - l'élément créer est toujours désactivée (l'alerte n'apparaît jamais).

InformationsquelleAutor MGOwen | 2010-12-30

134

La contextmenu plugin a déjà le support pour cela. À partir de la documentation liée à:

items: Attend un objet ou une fonction, qui doit retourner un objet. Si une fonction est utilisée, il a tiré dans l'arbre du contexte et reçoit un argument - le nœud qui a été cliqué avec le bouton droit.

Donc, plutôt que de donner contextmenu codés en dur pour objet de travailler avec, vous pouvez utiliser la fonction suivante. Il vérifie l'élément qui a été cliqué pour une classe nommée "dossier", et supprime le "supprimer" dans le menu, par la suppression de l'objet:
```
function customMenu(node) {
    //The default set of all items
    var items = {
        renameItem: { //The "rename" menu item
            label: "Rename",
            action: function () {...}
        },
        deleteItem: { //The "delete" menu item
            label: "Delete",
            action: function () {...}
        }
    };

    if ($(node).hasClass("folder")) {
        //Delete the "delete" menu item
        delete items.deleteItem;
    }

    return items;
}
```
Remarque que ci-dessus permet de masquer l'option supprimer complètement, mais le plugin vous permet d'afficher un élément lors de la désactivation de son comportement, en ajoutant _disabled: true à l'élément concerné. Dans ce cas, vous pouvez utiliser items.deleteItem._disabled = true dans le if déclaration de la place.

Devrait être évident, mais n'oubliez pas d'initialiser le plugin avec le customMenu fonction au lieu de ce que vous aviez précédemment:
```
$("#tree").jstree({plugins: ["contextmenu"], contextmenu: {items: customMenu}});
//                                                                   ^
//___________________________________________________________________|
```
Edit: Si vous ne voulez pas le menu pour être recréé à chaque clic droit, vous pouvez mettre de la logique dans l'action de gestionnaire pour le delete dans le menu lui-même.
```
"label": "Delete",
"action": function (obj) {
    if ($(this._get_node(obj)).hasClass("folder") return; //cancel action
}
```
Modifier à nouveau: Après avoir regardé la jsTree code source, il semble que le contextmenu est en cours de re-créé à chaque fois qu'il est indiqué de toute façon (voir le show() et parse() fonctions), donc je ne vois pas de problème avec ma première solution.

Cependant, je n'aime pas la notation, vous suggérez, avec une fonction comme valeur pour _disabled. Potentiel une voie à explorer est d'envelopper leurs parse() fonction avec votre propre personne qui évalue la fonction à disabled: function () {...} et stocke le résultat dans _disabled, avant d'appeler l'original parse().

Il ne sera pas difficile non plus de modifier leur code source directement. Ligne 2867 de la version 1.0-rc1 est le:
```
str += "<li class='" + (val._class || "") + (val._disabled ? " jstree-contextmenu-disabled " : "") + "'><ins ";
```
Vous pouvez simplement ajouter une ligne avant celle-ci, qui vérifie $.isFunction(val._disabled), et si oui, val._disabled = val._disabled(). Ensuite le soumettre à des créateurs comme un patch 🙂
- Merci. J'ai pensé que j'ai vu une fois une solution impliquant en ne changeant que ce besoin de changement de la valeur par défaut (au lieu de recréer l'ensemble du menu à partir de zéro). Je vais accepter cette réponse si il n'y a pas de meilleure solution avant de la bounty expire.
- conceptuellement, j' suis en modifiant le "par défaut", mais oui, vous avez raison, l'objet se re-créé à chaque fois que la fonction est appelée. Cependant, le défaut doit être cloné premiers, sinon le défaut lui-même est modifié (et vous aurez besoin d'une logique plus complexe à il revient à l'état initial). Une alternative que je peux penser à est de déplacer var items à l'extérieur de la fonction, de sorte que son créé qu'une seule fois, et de retourner une sélection d'articles à partir de la fonction, par exemple return {renameItem: items.renameItem}; ou return {renameItem: items.renameItem, deleteItem: items.deleteItem};
- J'aime que le dernier en particulier, lorsque vous modifiez le jstree source. Je l'ai essayé et il fonctionne, la fonction attribuée à "_disabled" (dans mon exemple) s'exécute. Mais, ça n'aide pas parce que je ne peux pas accéder au nœud (j'ai au moins besoin de l'attribut rel pour filtrer les nœuds par type de nœud) à partir de la fonction de la portée. J'ai essayé d'inspecter les variables j'ai pu passer en de la jstree code source, mais ne pouvait pas trouver le nœud. Des idées?
- il ressemble à la <a> élément qui a été cliqué est stocké à $.vakata.context.tgt. Donc, essayez de regarder jusqu' $.vakata.context.tgt.attr("rel").
- Par le temps qu'il obtient de cette mesure, $.vakata.contexte.tgt == false. J'ai regardé à travers toutes les variables que j'ai pu trouver à passer ($.vakata, s, val, j') et il n'y a rien de référencement sur le nœud bouton droit de la souris. Je vais essayer votre suggestion. Merci.
- Cela a aidé énormément. Merci!!!!
- dans jstree 3.0.8: if ($(node).hasClass("folder")) n'a pas fonctionné. mais ce n': if (node.children.length > 0) { items.deleteItem._disabled = true; }
- Ce code vous mettre à l'intérieur de action: function () {...} dans le premier extrait? Si vous souhaitez utiliser le "normal", les fonctionnalités et les éléments de menu, mais il suffit de retirer un d'entre eux (par exemple, Supprimer, mais de garder Renommer et Créer)? De mon point de vue, c'est vraiment ce que l'OP a été de demander de toute façon. Certes, vous n'avez pas besoin de ré-écriture de fonctionnalités pour des choses comme les Renommer et Créer si vous supprimez un autre élément comme les Supprimer?
InformationsquelleAutor David Tang
18

Mis en œuvre avec différents types de nœuds:
```
$('#jstree').jstree({
    'contextmenu' : {
        'items' : customMenu
    },
    'plugins' : ['contextmenu', 'types'],
    'types' : {
        '#' : { /* options */ },
        'level_1' : { /* options */ },
        'level_2' : { /* options */ }
        //etc...
    }
});
```
Et la customMenu fonction:
```
function customMenu(node)
{
    var items = {
        'item1' : {
            'label' : 'item1',
            'action' : function () { /* action */ }
        },
        'item2' : {
            'label' : 'item2',
            'action' : function () { /* action */ }
        }
    }

    if (node.type === 'level_1') {
        delete items.item2;
    } else if (node.type === 'level_2') {
        delete items.item1;
    }

    return items;
}
```
Fonctionne à merveille.
- Je préfère cette réponse, puisqu'il repose sur la type attribut plutôt que d'une classe CSS obtenues à l'aide de jQuery.
- Ce code vous mettre à l'intérieur de 'action': function () { /* action */ } dans le deuxième extrait? Si vous souhaitez utiliser le "normal", les fonctionnalités et les éléments de menu, mais il suffit de retirer un d'entre eux (par exemple, Supprimer, mais de garder Renommer et Créer)? De mon point de vue, c'est vraiment ce que l'OP a été de demander de toute façon. Certes, vous n'avez pas besoin de ré-écriture de fonctionnalités pour des choses comme les Renommer et Créer si vous supprimez un autre élément comme les Supprimer?
- Je ne suis pas sûr de comprendre ta question. Vous êtes à la définition de toutes les fonctionnalités pour la totalité de menu de contexte (par exemple, Supprimer, Renommer et Créer) dans le items liste d'objets, puis de vous préciser lesquels de ces éléments à supprimer, pour un node.type à la fin de la customMenu fonction. Lorsque l'utilisateur clique sur un nœud donné type, le menu contextuel de la liste de tous les articles moins tout enlevé au conditionnel, à la fin de la customMenu fonction. Vous n'êtes pas ré-écrire les fonctions (sauf jstree a changé depuis cette réponse, il y a trois ans, auquel cas, il peut ne plus être pertinente).
InformationsquelleAutor stacked

Pour tout clair.

Au lieu de cela:

$("#xxx").jstree({
    'plugins' : 'contextmenu',
    'contextmenu' : {
        'items' : { ... bla bla bla ...}
    }
});

Utiliser ceci:

$("#xxx").jstree({
    'plugins' : 'contextmenu',
    'contextmenu' : {
        'items' : customMenu
    }
});

InformationsquelleAutor Mangirdas

J'ai adapté la solution proposée pour travailler avec des types un peu différemment si, peut-être cela peut aider quelqu'un d'autre:

Où #{$id_arr[$k]} est la référence à la div container... dans mon cas, j'utilise de nombreux arbres, donc tout ce code sera la sortie vers le navigateur, mais vous obtenez l'idée.. en gros je veux que tous le menu contextuel options mais seulement "Créer" et "Coller" sur le Lecteur nœud. Évidemment, avec le bon de liaisons pour les opérations plus tard:

<div id="$id_arr[$k]" class="jstree_container"></div>
</div>
</li>
<!-- JavaScript neccessary for this tree : {$value} -->
<script type="text/javascript" >
jQuery.noConflict();
jQuery(function ($) {
//This is for the context menu to bind with operations on the right clicked node
function customMenu(node) {
    //The default set of all items
    var control;
    var items = {
        createItem: {
            label: "Create",
            action: function (node) { return { createItem: this.create(node) }; }
        },
        renameItem: {
            label: "Rename",
            action: function (node) { return { renameItem: this.rename(node) }; }
        },
        deleteItem: {
            label: "Delete",
            action: function (node) { return { deleteItem: this.remove(node) }; },
            "separator_after": true
        },
        copyItem: {
            label: "Copy",
            action: function (node) { $(node).addClass("copy"); return { copyItem: this.copy(node) }; }
        },
        cutItem: {
            label: "Cut",
            action: function (node) { $(node).addClass("cut"); return { cutItem: this.cut(node) }; }
        },
        pasteItem: {
            label: "Paste",
            action: function (node) { $(node).addClass("paste"); return { pasteItem: this.paste(node) }; }
        }
    };

    //We go over all the selected items as the context menu only takes action on the one that is right clicked
    $.jstree._reference("#{$id_arr[$k]}").get_selected(false, true).each(function (index, element) {
        if ($(element).attr("id") != $(node).attr("id")) {
            //Let's deselect all nodes that are unrelated to the context menu -- selected but are not the one right clicked
            $("#{$id_arr[$k]}").jstree("deselect_node", '#' + $(element).attr("id"));
        }
    });

    //if any previous click has the class for copy or cut
    $("#{$id_arr[$k]}").find("li").each(function (index, element) {
        if ($(element) != $(node)) {
            if ($(element).hasClass("copy") || $(element).hasClass("cut")) control = 1;
        }
        else if ($(node).hasClass("cut") || $(node).hasClass("copy")) {
            control = 0;
        }
    });

    //only remove the class for cut or copy if the current operation is to paste
    if ($(node).hasClass("paste")) {
        control = 0;
        //Let's loop through all elements and try to find if the paste operation was done already
        $("#{$id_arr[$k]}").find("li").each(function (index, element) {
            if ($(element).hasClass("copy")) $(this).removeClass("copy");
            if ($(element).hasClass("cut")) $(this).removeClass("cut");
            if ($(element).hasClass("paste")) $(this).removeClass("paste");
        });
    }
    switch (control) {
        //Remove the paste item from the context menu
        case 0:
            switch ($(node).attr("rel")) {
                case "drive":
                    delete items.renameItem;
                    delete items.deleteItem;
                    delete items.cutItem;
                    delete items.copyItem;
                    delete items.pasteItem;
                    break;
                case "default":
                    delete items.pasteItem;
                    break;
            }
            break;
            //Remove the paste item from the context menu only on the node that has either copy or cut added class
        case 1:
            if ($(node).hasClass("cut") || $(node).hasClass("copy")) {
                switch ($(node).attr("rel")) {
                    case "drive":
                        delete items.renameItem;
                        delete items.deleteItem;
                        delete items.cutItem;
                        delete items.copyItem;
                        delete items.pasteItem;
                        break;
                    case "default":
                        delete items.pasteItem;
                        break;
                }
            }
            else //Re-enable it on the clicked node that does not have the cut or copy class
            {
                switch ($(node).attr("rel")) {
                    case "drive":
                        delete items.renameItem;
                        delete items.deleteItem;
                        delete items.cutItem;
                        delete items.copyItem;
                        break;
                }
            }
            break;

            //initial state don't show the paste option on any node
        default: switch ($(node).attr("rel")) {
            case "drive":
                delete items.renameItem;
                delete items.deleteItem;
                delete items.cutItem;
                delete items.copyItem;
                delete items.pasteItem;
                break;
            case "default":
                delete items.pasteItem;
                break;
        }
            break;
    }
    return items;
$("#{$id_arr[$k]}").jstree({
  //List of active plugins used
  "plugins" : [ "themes","json_data", "ui", "crrm" , "hotkeys" , "types" , "dnd", "contextmenu"],
  "contextmenu" : { "items" : customMenu  , "select_node": true},

InformationsquelleAutor Jean Paul A.K.A el_vete

Btw: Si vous souhaitez simplement supprimer des options depuis le menu contextuel - ce qui a fonctionné pour moi:

JS:

function customMenu(node)
{
    var items = $.jstree.defaults.contextmenu.items(node);

    if (node.type === 'root') {
        delete items.create;
        delete items.rename;
        delete items.remove;
        delete items.ccp;
    }

    return items;
}

InformationsquelleAutor Florian S.

Vous pouvez modifier @Box9 code en fonction de vos besoins de la dynamique de la désactivation du menu contextuel:

function customMenu(node) {

  ............
  ................
   //Disable  the "delete" menu item  
   //Original //delete items.deleteItem; 
   if ( node[0].attributes.yyz.value == 'notdelete'  ) {


       items.deleteItem._disabled = true;
    }   

}

Vous avez besoin d'ajouter un attribut "xyz" dans votre XML ou JSOn données

InformationsquelleAutor user367134

de jsTree 3.0.9 j'avais besoin d'utiliser quelque chose comme

var currentNode = treeElem.jstree('get_node', node, true);
if (currentNode.hasClass("folder")) {
    //Delete the "delete" menu item
    delete items.deleteItem;
}

parce que le node objet qui est fourni n'est pas un objet jQuery.

InformationsquelleAutor craigh

Vous devez vous connecter pour publier un commentaire.