Enlever un noeud de l'arbre dynatree

**isibonheur** · 22/09/2014, 09h44

Bonjour à tous.
J'essaie d'enlever un noeud de mon arbre dynatree. Le noeud est enlevé. Cependant quand la page est rechargé, le noeud supprimé réapparaît.
Pouvez-vous m'aider S'il vous plait?
voici le code qui me permet d'enlever le noeud:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function removeTest() {
    var tree = $("#tree").dynatree("getTree");
    var activeNode = tree.getActiveNode();
    activeNode.removeChildren() ;
    activeNode.remove();
}

**SpaceFrog** · 22/09/2014, 09h56

Javascript ne survit pas à un rechargement de page ...
Il est donc logique que les modifications faites sur l'arbre ne soient pas sauvegardées.
Il faut modifier la source de l'arbre (le json)

**isibonheur** · 22/09/2014, 10h06

oki c'est vrai...Désolée pour ma question mais c'est la première fois que j'utilise dynatree...Comment modifier le json dynamiquement...C'est à dire, chaque fois que je supprime un noeud, modifier directement le json pour que la modification soit prise en compte?

Cordialement

**SpaceFrog** · 22/09/2014, 10h19

l'idée serait de mettre le json dans un fichier séparé sur le serveur
puis à chaque modification du tree, faire une requete ajax pour aller coté serveur modifier le fichiers du json.

**isibonheur** · 22/09/2014, 10h51

merci pour la réponse. J'ai misle json dans un fichier séparé. L'arbre ne s'affiche plus. A la place de l'arbre, j'ai :"Load error! (error)" voivi comment j'initialise mon arbre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    $("#tree").dynatree({
 
    checkbox:false,
    initAjax: {url: "/tree.json",
               data: {key: "root", // Optional arguments to append to the url
                      mode: "all"
                      }
               },
 
 
    });

**SpaceFrog** · 22/09/2014, 11h15

sans doute un souci de path vers le fichier json ...

**isibonheur** · 23/09/2014, 17h43

Bonjour,
j'ai pu construire l'arbre au niveau du serveur à l'aide de json. Mais je ne sais pas toujours comment commencer le développement de la suppression du noeud. Quoi-que je fasse, le noeud n'est pas supprimé. Auriez-vous un debut de code sur lequel je pourrai m'inspirer?S'il vous plait aidez moi, je suis novice en java.

**danielhagnoul** · 24/09/2014, 01h12

Bonsoir

Dynatree est obsolète, il faut utiliser Fancytree.

Je viens de le tester. On peut très facilement manipuler les noeuds de l'arbre.

Voir le code et les commentaires (dans les zones /*-- Début code du test --*/) ci-dessous.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * J'utilise head.js pour charger CSS et JS de manière asynchrone 
          * et parallèle, mais les fichiers sont exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.15.0.css",
            "../fancytree-master/src/skin-win7/ui.fancytree.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
            { "jquery" : "http://code.jquery.com/jquery-2.1.1.min.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" },
            { "datefr" : "http://danielhagnoul.developpez.com/lib/dvjh/datefr.js" },
            { "fancytree" : "http://cdn.jsdelivr.net/jquery.fancytree/2.4.1/jquery.fancytree-all.min.js" },
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.15.0.js" },
            { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
/*-- Début code du test --*/
 
div { margin: 12px; }
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <h1>Forum jQuery</h1>
        <h2>
            <a href="">Lien</a>
        </h2>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<div id="echoActive"></div>
<div id="tree"></div>
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
    </section>
    <footer class="h-entry">
        <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
        <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
        <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
        <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
        <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
    </footer>
    <script>
        "use strict";
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ 
                "d3", "d3Hello", 
                "jquery", "jqueryui", "datefr", "fancytree",
                "qunit", "testsQUnit"
            ], function(){
 
/* Début code du test */
 
$( function(){ // forme abrégée de $(document).ready(function(){
 
    /*
     * Fancytree (sequel of DynaTree 1.x) is a JavaScript dynamic 
     * tree view plugin for jQuery with support for persistence, 
     * keyboard, checkboxes, tables, drag'n'drop, and lazy loading.
     * 
     * https://github.com/mar10/fancytree
     */
 
    $( "#tree" ).fancytree({
        "source" : [
            {
                "title" : "Node 1",
                "key" : "1"
            },
            {
                "title" : "Folder 1",
                "key" : "2",
                "folder" : true, 
                "children" : [
                    {
                        "title" : "Node 2.1",
                        "key" : "3"
                    },
                    {
                        "title" : "Node 2.2",
                        "key" : "4"
                    }
                ]
            },
            {
                "title" : "Folder 2",
                "key" : "5",
                "folder" : true,
                "lazy" : true
            }
        ],
        "activeVisible" : true, // Make sure, active nodes are visible (expanded).
        "aria" : false, // Enable WAI-ARIA support.
        "autoActivate" : true, // Automatically activate a node when it is focused (using keys).
        "autoCollapse" : false, // Automatically collapse all siblings, when a node is expanded.
        "autoScroll" : false, // Automatically scroll nodes into visible area.
        "clickFolderMode" : 4, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)
        "checkbox" : false, // Show checkboxes.
        "debugLevel" : 2, // 0:quiet, 1:normal, 2:debug
        "disabled" : false, // Disable control
        "generateIds" : false, // Generate id attributes like <span id='fancytree-id-KEY'>
        "idPrefix" : "ft_", // Used to generate node id´s like <span id='fancytree-id-<key>'>.
        "icons" : true, // Display node icons.
        "keyboard" : true, // Support keyboard navigation.
        "keyPathSeparator" : "/", // Used by node.getKeyPath() and tree.loadKeyPath().
        "minExpandLevel" : 1, // 1: root node is not collapsible
        "selectMode" : 2, // 1:single, 2:multi, 3:multi-hier
        "tabbable" : true, // Whole tree behaves as one single control
        "titlesTabbable" : false, // Node titles can receive keyboard focus
        "lazyLoad" : function( event, data ){
            var node = data.node;
 
            // Issue an ajax request to load child nodes
            data.result = {
                url: "../dvp0/dvp0lazy1.json",
                data: {
                    key: node.key
                }
            };
        },
        "activate" : function( event, data ){ // A node was activated
            var node = data.node;
 
            $( "#echoActive" ).text( node.title );
 
            infos();
        },
        "beforeSelect" : function( event, data ){
            // A node is about to be selected: prevent this, for folder-nodes:
            if ( data.node.isFolder() ){
                return false;
            }
        }
    });
 
    var tree = $( "#tree" ).fancytree( "getTree" );
 
    function infos(){
        var activeNode = tree.getActiveNode();
 
        if ( activeNode.title === "Node 2.2" ){
 
            /*
             * http://wwwendt.de/tech/fancytree/doc/jsdoc/FancytreeNode.html
             * 
             * remove() Remove this node (not allowed for system root).
             */
            activeNode.remove();
        }
    }
 
    /*
    setTimeout( function(){
        // Optionally pass new `source`:
        tree
            .reload() // options, ex : { "url" : ... } nouvelle source
            .done( function(){
                console.log( "tree reloaded" );
            });
    }, 10000 ); //10s
    */
 
});
 
/* Fin code du test */
 
            if ( debugBool ){
               console.log( ISOformat( new Date() ) );
 
                $( ".qunit" ).show();
 
                testQUnitSelector( "App", [ 
                    "#qunit", "#qunit-fixture", ".conteneur"
                ] );
 
                testQUnitID( "App", [ 
                    "qunit", "qunit-fixture"
                ] );
            }
 
        });
    </script>
</body>
</html>

Fichier dvp0lazy1.json :

Code JSON :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
	{
		"title" : "Sub-item 4.1", 
		"isFolder" : true,
		"children" : [
			{
				"title" : "Sub-item 4.1.1"
			},
			{
				"title" : "Sub-item 4.1.2"
			}
		]
	}
]

**isibonheur** · 24/09/2014, 10h30

merci pur la réponse mais ça ne lm'aide pas vraiment car après la suppression du noeud, l'arbre est rechargé avec le neoud supprimé. C'est pour cette raison que je pensais modifier dans mon code java directement. Avez-vous une idée de comment faire. Les outils sont: groovy, grails,java,dynatree,jquery, ajax,html

**devyan** · 24/09/2014, 15h07

Bonjour,

En fait il n'y a pas de problème.
Là tu utilises "dynatree" mais si tu avais fait un simple "table/tr/td" avec suppression d'un "tr" tu obtiendrais le même comportement.

Je m'explique...

Lorsque tu réalises la suppression de ton noeud il faut indiquer à ton serveur qu'il doit lui aussi supprimer ce noeud de son arbre interne.