Bonjour à tous,

Voilà je dois construire un arbre dynamique avec checkboxes etc... et j'ai trouvé le plugin jQuery dynaTree qui rempli très bien ce rôle toutefois je suis une bille en AJAX (pas encore eu le temps malheureusement de me pencher dessus) et j'ai l'impression que le retour de données se fait via cette méthode avec dynatree et je ne comprends malheureusement pas comment faire.

Je vous explique le fonctionnement assez simple pour quelqu'un d'expérimenté du système :

Je construis mon arbre avec des données en base (Pays, Régions, Villes) avec la méthodes des <ul><li> de la documentation.
Cet arbre (entre autres) est situé dans un <form> et j'aimerai que lorsque je valide le formulaire (après avoir coché certains éléments dans l'arbre) je puisse retrouver ces différentes valeurs en Post par exemple, ce n'est actuellement pas le cas.

Pourriez-vous m'aider à construire le retour de données svp ?
Je sais qu'il y a un tutoriel bien fait sur developpez.net sur l'AJAX, toutefois ce module est pour les besoins d'un projet et assez urgent, j'ai essayé diverses choses sans succès, voilà pourquoi je me tourne vers vous aujourd'hui.

Voici mon code PHP de construction de l'arbre :

Code php : 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
<div id="tree">
        <ul>
            <?php foreach($pays as $key_pays => $p): ?>
                <?php $i++; ?>
                <li id="<?php echo 'key'.$i ?>" title="pays" class="expanded"><?php echo $p; ?>
                    <ul>
                        <?php foreach($regions as $key_region => $region): ?>
                            <?php if($key_region == $key_pays): ?>
                                <?php foreach($region as $cle_reg => $reg): ?>
                                    <?php $j++; ?>
                                    <li id="<?php echo 'key'.$i.'.'.$j ?>" title="region"><?php echo $reg; ?>
                                        <ul>
                                            <?php foreach($departements as $key_dept => $departement): ?>
                                                <?php if($key_dept == $cle_reg): ?>
                                                    <?php foreach($departement as $cle_dept => $dept): ?>
                                                        <?php $k++; ?>
                                                        <li id="<?php echo 'key'.$i.'.'.$j.'.'.$k; ?>" title="departement"><?php echo $dept; ?>
                                                            <ul>
                                                                <?php foreach($villes as $key_ville => $ville): ?>
                                                                    <?php $l++; ?>
                                                                    <?php if($key_ville == $cle_dept): ?>
                                                                        <li id="<?php echo 'key'.$i.'.'.$j.'.'.$k.'.'.$l; ?>" title="ville"><?php echo $ville; ?>
                                                                    <?php endif; ?>
                                                                <?php endforeach; ?>
                                                            </ul>
                                                    <?php endforeach; ?>
                                                <?php endif; ?>
                                            <?php endforeach; ?>
                                        </ul>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </ul>
                    <?php endforeach; ?>
-->        </ul>
        </div>

et le code jQuery de base :

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
$(document).ready(function() {
    $(function(){
        $("#tree").dynatree({
            title: "Dynatree", // Tree's name (only used for debug outpu)
            minExpandLevel: 1, // 1: root node is not collapsible
            imagePath: null, // Path to a folder containing icons. Defaults to 'skin/' subdirectory.
            children: null, // Init tree structure from this object array.
            initId: null, // Init tree structure from a <ul> element with this ID.
            initAjax: null, // Ajax options used to initialize the tree strucuture.
            autoFocus: true, // Set focus to first child, when expanding or lazy-loading.
            keyboard: true, // Support keyboard navigation.
            persist: false, // Persist expand-status to a cookie
            autoCollapse: false, // Automatically collapse all siblings, when a node is expanded.
            clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand
            activeVisible: true, // Make sure, active nodes are visible (expanded).
            checkbox: true, // Show checkboxes.
            selectMode: 3, // 1:single, 2:multi, 3:multi-hier
            fx: null, // Animations, e.g. null or { height: "toggle", duration: 200 }
            noLink: false, // Use <span> instead of <a> tags for all nodes
            // Low level event handlers: onEvent(dtnode, event): return false, to stop default processing
            onClick: null, // null: generate focus, expand, activate, select events.
            onDblClick: null, // (No default actions.)
            onKeydown: null, // null: generate keyboard navigation (focus, expand, activate).
            onKeypress: null, // (No default actions.)
            onFocus: null, // null: set focus to node.
            onBlur: null, // null: remove focus from node.
 
            // Pre-event handlers onQueryEvent(flag, dtnode): return false, to stop processing
            onQueryActivate: null, // Callback(flag, dtnode) before a node is (de)activated.
            onQuerySelect: null, // Callback(flag, dtnode) before a node is (de)selected.
            onQueryExpand: null, // Callback(flag, dtnode) before a node is expanded/collpsed.
 
            // High level event handlers
            onPostInit: null, // Callback(isReloading, isError) when tree was (re)loaded.
            onActivate: null, // Callback(dtnode) when a node is activated.
            onDeactivate: null, // Callback(dtnode) when a node is deactivated.
            onSelect: null, // Callback(flag, dtnode) when a node is (de)selected.
            onExpand: null, // Callback(flag, dtnode) when a node is expanded/collapsed.
            onLazyRead: null, // Callback(dtnode) when a lazy node is expanded for the first time.
            onCustomRender: null, // Callback(dtnode) before a node is rendered. Return a HTML string to override.
            onCreate: null, // Callback(dtnode, nodeSpan) after a node was rendered for the first time.
            onRender: null, // Callback(dtnode, nodeSpan) after a node was rendered.
            ajaxDefaults: { // Used by initAjax option
                cache: false, // false: Append random '_' argument to the request url to prevent caching.
                timeout: 0, // >0: Make sure we get an ajax error for invalid URLs
                dataType: "json" // Expect json format and pass json object to callbacks.
            },
            strings: {
                loading: "Loading…",
                loadError: "Load error!"
            },
            generateIds: false, // Generate id attributes like <span id='dynatree-id-KEY'>
            idPrefix: "dynatree-id-", // Used to generate node id's like <span id="dynatree-id-<key>">.
            keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath().
            cookieId: "dynatree", // Choose a more unique name, to allow multiple trees.
            cookie: {
                expires: null // Days or Date; null: session cookie
            },
            // Class names used, when rendering the HTML markup.
            // Note: if only single entries are passed for options.classNames, all other
            // values are still set to default.
            classNames: {
                container: "dynatree-container",
                node: "dynatree-node",
                folder: "dynatree-folder",
 
                empty: "dynatree-empty",
                vline: "dynatree-vline",
                expander: "dynatree-expander",
                connector: "dynatree-connector",
                checkbox: "dynatree-checkbox",
                nodeIcon: "dynatree-icon",
                title: "dynatree-title",
                noConnector: "dynatree-no-connector",
 
                nodeError: "dynatree-statusnode-error",
                nodeWait: "dynatree-statusnode-wait",
                hidden: "dynatree-hidden",
                combinedExpanderPrefix: "dynatree-exp-",
                combinedIconPrefix: "dynatree-ico-",
                hasChildren: "dynatree-has-children",
                active: "dynatree-active",
                selected: "dynatree-selected",
                expanded: "dynatree-expanded",
                lazy: "dynatree-lazy",
                focused: "dynatree-focused",
                partsel: "dynatree-partsel",
                lastsib: "dynatree-lastsib"
            },
            debugLevel: 1 // 0:quiet, 1:normal, 2:debug
 
        });
    });
});
Pouvez-vous m'aider s'il vous plaît ?

Merci par avance.