[débutant]Récupérer un item de Tree

Version imprimable

16/03/2009, 16h05
*.Har(d)t

[débutant]Récupérer un item de Tree

Salut,

Tout est dans le titre : Comment récupérer les infos de l'item sélectionné dans un Tree.

J'ai l'impression que Tree n'implémente pas une méthode ou une propriété qui fait ça. Me trompe-je ?

Par son Store

Salut,

Ton tree utilise un store pour afficher ses données (ou un model, mais c'est techniquement la même base). Sur un click tu récupères donc l'item du store concerné que tu peux manipuler via l'API des dojo.data.api.

Code:

1
2
3
4
5
6
7
8
9
 
   <div dojoType="dijit.Tree" id="monArbre" model="monModel" openOnClick="true">
	<script type="dojo/method" event="onClick" args="item">
                  //item est l'item du store sélectionné
                  //on y accède donc par l'api des store (dojo.data.api)
                  //par ex: storeJsId.getValue(item,"prenom");
                 console.log(item);
        </script>  
  </div>

ERE

Merci.

C'est la méthode que j'utilisais déjà pour autre chose.

Je commence à pédaler dans la semoule.

En fait, je veux pouvoir ajouter un noeud dans le tree en faisant un clic-droit dessus, choisissant une option dans un menu contextuel.

Cette option lance un dialog qui affiche un formulaire permettant de saisir le nom du nouveau noeud.

Sur validation de ce formulaire, ce noeud est ajouté à l'arbre, et le dialog se ferme.

Tout va bien, sauf que je n'arrive pas à faire en sorte que le nouveau noeud apparaisse "dans" le noeud sur lequel j'ai cliqué pour la création (qui est sensé être le noeud parent.

Mais le nouveau noeud a bien la propriété id_parent valant l'id du parent.

Comment je pourrais faire ça ?

Pour info, voici le code utilisé pour ajouter le noeud

Code:

1
2
3
4
5
6
7
8
function newFolder( unId,unDossier,unIdParent ) {
        //Créé un nouveau dossier dans l'arborescence
        var id_parent;
        var id;
 
        dossiersStore.newItem({id:unId,nom: unDossier, id_site:"1107",id_parent:unIdParent});
        dossiersStore.save({onComplete: alert("Sauvegardé"), onError: alert("Erreur de sauvegarde")});
    }

Voici une grosse partie de la page, sachant que l'application est éclatée entre différents fichiers.
On y voit surtout le tree, son model et son store.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    <div dojoType="dojox.layout.ContentPane"
         style="width : 10%; height:600px; border: 1px solid #ccc;"
         region="leading"
         >
        <div dojoType="dojo.data.ItemFileWriteStore"
                jsId="dossiersStore"
                url="1107.json"></div>
 
        <div dojoType="dijit.tree.ForestStoreModel"
             jsId="dossiersModel"
             store="dossiersStore"
             query="{id:'*'}"
             rootId="dossiersRoot"
             rootLabel="Dossiers"
             childrenAttrs="enfants">                
        </div>
 
        <div dojoType="dijit.Tree"
             model="dossiersModel"
             openOnClick="false"
             showRoot="false"
             id="treeVeilleR">
                <script type="dojo/connect">
                var menu = dijit.byId("tree_menu");
                // when we right-click anywhere on the tree, make sure we open the menu
                menu.bindDomNode(this.domNode);
 
                dojo.connect(menu, "_openMyself", this, function(e){
                                // get a hold of, and log out, the tree node that was the source of this open event
                                var tn = dijit.getEnclosingWidget(e.target);
                                console.debug(tn);
 
                                // now inspect the data store item that backs the tree node:
                                console.debug(tn.item);
 
                                // contrived condition: if this tree node doesn't have any children, disable all of the menu items
                                //menu.getChildren().forEach(function(i){ i.attr('disabled', !tn.item.children); });
 
                                // IMPLEMENT CUSTOM MENU BEHAVIOR HERE
                        });
                </script>
 
 
[...] La suite ne concerne plus le tree

17/03/2009, 17h07
emmanuel.remy

Store

Salut *.Har(d)t,

Tu peux me passer ton fichier 1107.json que je fasse un test ?

ERE
17/03/2009, 17h19
*.Har(d)t

Bien sûr.

Je compte ensuite éviter de passer par un store fichier, mais en débutant avec dojo c'est le seul moyen que j'arrivais à faire fonctionner au début.
C'est un json généré à partir de ma bd en utilisant la fonction PHP json_encode().

Code:

{identifier: 'id',label: 'nom',items:[{"id":"21","nom":"Test","id_site":"1107","id_parent":"0","enfants":[{"id":"22","nom":"Test2","id_site":"1107","id_parent":"21","enfants":[{"id":"24","nom":"Test4","id_site":"1107","id_parent":"22"}]},{"id":"25","nom":"Test5","id_site":"1107","id_parent":"21"}]},{"id":"23","nom":"Test3","id_site":"1107","id_parent":"0"}]}

Je pense qu'il faut que j'arrive à intercaler le mot-clé "_reference" quelque part pour que le noeud se positionne bien dans l'arbre après la mise à jour, mais mes quelques essais avec json_encode m'ont donné des soucis à cause des guillemets qui se positionnaient mal, et il manquait des éléments à cause d'une boucle mal foutue.
Ca donnait ça:

Code:

{identifier: 'id',label: 'nom',items:[{"id":"21","nom":"Test","id_site":"1107","id_parent":"0","enfants":["_reference: 22","_reference: 25"]},{"id":"23","nom":"Test3","id_site":"1107","id_parent":"0"}]}

Petite correction

Re-salut,

Ton erreur provient du fait que l'insertion d'un élément dans un store de type hiérarchique n'a pas la même signature que celle habituelle.

Tu as inscrit:
Code:

1 2 dossiersStore.newItem({id:unId,nom: unDossier, id_site:"1107",id_parent:unIdParent});
alors que c'est Dojo qui s'occupe de faire le lien de hiérarchie entre les éléments du store, à condition de lui passer un second paramètre qui décrit le lien (un objet comprenant l'item parent et l'attribut de liaison - enfants - dans ton cas).

Pour simplifier encore cette tache dans le cas du Tree, l'API du dijit.tree.Model intègre une fonction newItem qui facilite cette insertion sous-jacente dans le store.
Modifie ton code ainsi:
Code:

1 2 3 4 5 6 7 8 9 10 11 /** * unId: un id UNIQUE dans le store * unDossier: le libellé du dossier * itemParent: l'item parent dans le store */ function newFolder( unId, unDossier, itemParent) { //on insère dans le model et pas dans le store dossiersModel.newItem({id:unId , nom: unDossier, id_site:"1107"}, itemParent); }
A peu de choses près ;) l'item parent que tu dois passé est très certainement tn.item

A+,

ERE

Ok, merci.
Je vois mon erreur.

Il faut juste que je trouve comment passer mon item à la fonction via le dialog sacchant que l'appel de fonction se fait depuis une url externe (le contenu du dialog est appelé par un href)

Je posterai la résultat quand j'aurai trouvé, si ça peut aider quelqu'un.:aie:

EDIT
-----

Je suis à la rue !

J'ai décidé de reprendre sur du propre car mon code d'origine est éclaté en plusieurs fichiers et plein de code mort ou non fonctionnel, car j'apprends le framework tout en développant dessus.

Voici donc ce que j'ai écrit pour remettre les choses à plat.

La fonction newFolder() est appelée sur le onClick du du MenuItem.
Les données sont en dur à l'intérieur, car ce qui m'intéresse, c'est de faire passer un itemParent dans le store.newitem pour avoir le noeud au bon endroit dans l'arbre.

Malheureusement, je ne vois toujours pas comment savoir quel noeud a été cliqué.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 
<head>
 
    <title>Index 5</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <style type="text/css">
        @import "dojo/dojo-release-1.2.3/dijit/themes/soria/soria.css";
        @import "dojo/dojo-release-1.2.3/dojox/grid/resources/Grid.css";
        @import "dojo/dojo-release-1.2.3/dojox/grid/resources/soriaGrid.css";
    </style>
 
    <script type="text/javascript" src="dojo/dojo-release-1.2.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: false"></script>
 
    <script type="text/javascript">
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dijit.Tree");
        dojo.require("dijit.Menu");
        dojo.require("dijit.Dialog");  
    </script>
 
    <script type="text/javascript">
    /* Construction programmatique de l'arbre et du menu */
        var pMenu;
        dojo.addOnLoad(function(){
 
            function newFolder() {
                var itemParent = dijit.byId("model");
                console.log(treeModel);
                treeModel.newItem({id:"100" , nom: "Nouveau dossier", id_site:"1107"},itemParent);
            }
 
            var store = new dojo.data.ItemFileWriteStore({
                url: "1107.json"
            });
 
            var treeModel = new dijit.tree.ForestStoreModel({
                store: store,
                id: "model",
                query: {"id" : "*"},
                rootId: "root",
                rootLabel: "Dossiers",
                childrenAttrs: ["enfants"]
            });
 
            new dijit.Tree({
                model: treeModel
            }, "arbre");
 
            pMenu = new dijit.Menu({
                        targetNodeIds:["arbre"]
                    });
 
            pMenu.addChild(new dijit.MenuItem({
                                     label: "Nouveau",
                                     id: "mnuNouveau",
                                     onClick: newFolder
                                })
                           );
 
            pMenu.startup();
          });
    </script>
 
</head>
 
<body class="soria">
 
    <div id="arbre"></div>    
 
</body>
 
</html>

CA MAAARCHE !!!:yaisse2:

Je croyais devenir fou !

C'est pas encore parfait, mais je peux enfin ajouter un sous-dossier au bon endroit en faisant clic-droit>nouveau.

J'ai utilisé une variable globale pour stocker l'item du store lorsqu'on clique sur le tree, et le transmettre à l'appel de fonction newFolder du menuItem.
Ce qui signifie qu'il faut faire un clic sur le noeud, puis un clic-droit>nouveau pour que ça fonctionne. Je vais tâcher d'améliorer ça.

Voici le code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 
<head>
 
    <title>Index 5</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <style type="text/css">
        @import "dojo/dojo-release-1.2.3/dijit/themes/soria/soria.css";
        @import "dojo/dojo-release-1.2.3/dojox/grid/resources/Grid.css";
        @import "dojo/dojo-release-1.2.3/dojox/grid/resources/soriaGrid.css";
    </style>
 
    <script type="text/javascript" src="dojo/dojo-release-1.2.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: false"></script>
 
    <script type="text/javascript">
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dijit.Tree");
        dojo.require("dijit.Menu");
        dojo.require("dijit.Dialog");  
    </script>
 
    <script type="text/javascript">
    /* Construction programmatique de l'arbre et du menu */
        var pMenu;
        var selectedItem;
        dojo.addOnLoad(function(){
 
            function newFolder(itemParent) {
                console.debug(itemParent);
                treeModel.newItem({id: "100" , nom: "Nouveau dossier", id_site: "1107"},itemParent);
            }
 
            function coucou(item) {
                if(item){
                alert("Execute of node " + item);
              }else{
                alert("Execute on root node");
              }
            }
 
            var store = new dojo.data.ItemFileWriteStore({
                url: "1107.json"
            });
 
            var treeModel = new dijit.tree.ForestStoreModel({
                store: store,
                id: "model",
                query: {"id" : "*"},
                rootId: "root",
                rootLabel: "Dossiers",
                childrenAttrs: ["enfants"]
            });
 
            var tree = new dijit.Tree({
                            model: treeModel,
                            onClick: function(item) {selectedItem = item}
                        }, "arbre");
 
            pMenu = new dijit.Menu({
                        targetNodeIds:["arbre"]
                    });
 
            pMenu.addChild(new dijit.MenuItem({
                                     label: "Nouveau",
                                     id: "mnuNouveau",
                                     onClick: function(){newFolder(selectedItem)}
                                })
                           );
 
            pMenu.startup();
 
          });
    </script>
 
</head>
 
<body class="soria">
 
    <div id="arbre">
 
 
    </div>    
 
</body>
 
</html>

Un énorme merci à toi emmanuel.remy, King of Dojo ! :king:

Bon maintenant, il faut que ça mette la base à jour... :aie:

Bonjour,

J'ai également eu besoin de récupérer l'item sélectionné.

J'ai fait comme indiqué dans le code ci-dessus.
A savoir, sur l'évènement onClick, j'ai mémorisé l'élément cliqué dans une variable selectedItem. Et ça fonctionne.

Mais la discussion date de 2009, je voulais savoir si aujourd'hui, avec l'api dojo 1.6, on procède autrement pour récupérer un noeud sélectionné.

L'api dojo 1.6 recense selectedItem et selectedItems dans les propriétés du dijit.tree. Mais quand je les utilise j'ai une erreur javascript : "selectedItem(s) is not defined".
Code:

1 2 3 4 5 6 7 var treeControl = new dijit.Tree({ model: treeModel, autoExpand:true, onClick: function(item) { Traitement(treeModel.store, selectedItem); } }, "treeOne");
Idem avec selectedItems.