Double implémentation de jsTree

Question

Je suis novice en matière de jsTree, je souhaite utiliser dual jsTree.

[gauche JsTrree] [ >> ] [droite JsTrree]

">>" : Bouton pour copier le nœud sélectionné de gauche à droite jsTree

Je veux copier une hiérarchie partielle de gauche à droite jsTree.

• Pas de duplication de nœud.
• Je ne veux pas copier le noeud enfant du noeud sélectionné
• Seul le nœud sélectionné dans le jsTree de gauche fusionne dans le jsTree de droite selon la structure du jsTree de droite.

Si l'utilisateur sélectionne un nœud dans l'arbre de gauche, je veux copier l'arbre partiel du nœud sélectionné vers le nœud racine en cliquant sur le bouton (">>").

Laisser jsTree comme suit "

 Root
     -----A
          -----A1
               -----A1.1
               -----A1.2
          -----A2
               -----`A2.1`
               -----A2.2

     -----B
          -----B1
          -----B2

     -----C
          -----C1
               -----C1.1
               -----C2.2

--------------------------------------------------------------------------------------
Supposons que l'utilisateur ait sélectionné le nœud A2.1. Après avoir cliqué sur le bouton (">>"), l'arbre partiel suivant doit s'afficher dans le jsTree de droite

[#1] Droit jsTree :

 Root
     -----A
          -----A2
               -----`A2.1` 

Le nœud racine est maintenant ajouté dans l'arbre de droite. Désormais, seul le nœud sélectionné doit être fusionné dans l'arbre de droite.

--------------------------------------------------------------------------------------

Supposons maintenant que l'utilisateur ait sélectionné C1, seul C1 doit être fusionné dans l'arbre de droite.

[Structure de l'arbre de droite après l'ajout de C1 à partir de l'arbre de gauche :

Root
     -----A
          -----A2
               -----A2.1 
     -----C
          -----`C1`

Supposons que l'utilisateur ait sélectionné A1. A1 doit alors être fusionné à l'endroit approprié.
[3] Structure de l'arbre de droite après l'ajout de A1 à partir de l'arbre de gauche :

Root
     -----A
          -----`A1`
          -----A2
               -----A2.1                   
     -----C
          -----C1

Ma solution jusqu'à présent est la suivante

Après avoir sélectionné un nœud dans l'arbre gauche de jsTree, je construis un xml à partir du nœud sélectionné jusqu'au nœud racine. et je génère une chaîne partielle de xml_string stockée dans un cookie. Lors du clic sur le bouton (">>"), je lis la valeur de la chaîne_xml_partielle dans le cookie + j'efface la valeur de la chaîne_xml_partielle dans le cookie. Le cas [#1] s'est déroulé correctement. Existe-t-il un autre moyen de réaliser le cas [#1] ?

En utilisant .get_path ( node , id_mode ) j'obtiens le chemin (ID & Name) du noeud racine au noeud feuille.

if id_mode =true then node ID \= Root.id,A.id, A2.id, A2.1.id

if id_mode =false then node Nom \= Racine, A, A2, A2.1

Est-il possible de placer ce chemin à droite de jsTree ?

Si oui, comment définir ce chemin ? Si le chemin existe déjà, comment empêcher la copie ? ? else merge selected node to right jsTree.

--------------------------------------------------------------------------------------------

En utilisant .bind("select_node.jstree", function (event, data) nous pouvons gérer l'événement sur le nœud sélectionné. Comment gérer l'événement onClick de + * icône * ?

Considérons que mon jsTree de gauche ne contient qu'un nœud racine avec une icône +, alors comment gérer l'événement onClick sur l'icône + ? voir la réponse de ink

Je veux obtenir les nœuds enfants du nœud sélectionné. Comment ajouter cette liste de nœuds enfants au nœud sélectionné ?

Comment réaliser [#2] et [#3] en utilisant les fonctions de jsTree ?

Toute aide ou orientation dans ce domaine serait appréciée.

Answer 1

Je peux vous aider avec l'événement [+] click. Vous devez modifier votre fichier jquery.jstree.js (version non compressée). Ouvrez-le, trouvez la chaîne avec toggle_node : function (obj) (il y a un symbole de tabulation, cherchez donc toggle_node ) et ajouter une ligne ici. Après l'édition, ce doit être :

        toggle_node : function (obj) {
            obj = this._get_node(obj);
            this.__callback(obj); // these line must be added
            if(obj.hasClass("jstree-closed")) { return this.open_node(obj); }
            if(obj.hasClass("jstree-open")) { return this.close_node(obj);}             
        },

Maintenant, vous pouvez lier un callback comme d'habitude pour toggle_node événement. Voici un exemple :

    $("#your_jstree").bind("toggle_node.jstree", function (e, data) {
        is_opened = $(data.rslt).hasClass('jstree-open') ? false : true;
        node_id = $(data.rslt).attr('id');
        alert('node with id='+node_id+' is '+(is_opened ? 'opening' : 'closing')+' now.');          
    })

Ces appels de rappel avant s'ouvre ou se ferme. De plus, cet événement ne se déclenche pas pendant le chargement de l'arbre, comme si vous utilisiez open_node événement.