IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Récupérer valeurs d'un arbre Dynatree en PHP [Débutant(e)]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    91
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 91
    Par défaut Récupérer valeurs d'un arbre Dynatree en PHP
    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.

  2. #2
    Membre expérimenté
    Inscrit en
    Décembre 2009
    Messages
    282
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 282
    Par défaut
    montre nous le code généré html, et celui que tu récupère avec Firebug si c'est possible (ca permet de comprendre les transformations qui ont été faites par le plug-ins Dynatree)

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    91
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 91
    Par défaut
    Bonjour, merci de ta réponse.

    Voici les éléments demandés (les codes générés sont assez longs), ils ne concernent que la div qui contient l'arbre dynatree :

    <!-- Code HTML généré récupéré avec CTRL+U -->
    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
     
    <div id="tree">
    	<ul>
    		<li id="key1" title="pays" class="expanded">FRANCE                    
    			<ul>
    				<li id="key1.1" title="region">Rhône-Alpes                                        
    					<ul>
    						<li id="key1.1.1" title="departement">Rhône                                                            
    							<ul>
    								<li id="key1.1.1.1" title="ville">Lyon
    								<li id="key1.1.1.2" title="ville">Villefranche-sur-saône
    							</ul>
    							<li id="key1.1.2" title="departement">Isère                                                            
    								<ul>
    									<li id="key1.1.2.17" title="ville">Grenoble
    								</ul>
    						<li id="key1.1.3" title="departement">Loire                                                            
    							<ul>
    								<li id="key1.1.3.32" title="ville">Saint-Etienne
    							</ul>
    						<li id="key1.1.4" title="departement">Drôme                                                            
    							<ul>
    								<li id="key1.1.4.47" title="ville">Valence
    							</ul>
    						<li id="key1.1.5" title="departement">Ardèche                                                            
    							<ul>
    								<li id="key1.1.5.62" title="ville">Privas
    							</ul>
    						<li id="key1.1.6" title="departement">Savoie                                                            
    							<ul>
    								<li id="key1.1.6.77" title="ville">Chambéry
    							</ul>
    						<li id="key1.1.7" title="departement">Haute-Savoie                                                            
    							<ul>
    								<li id="key1.1.7.92" title="ville">Annecy
    							</ul>
    						<li id="key1.1.8" title="departement">Ain                                                            
    							<ul>
    								<li id="key1.1.8.107" title="ville">Bourg-en-Bresse
    							</ul>
    					</ul>
    				<li id="key1.2" title="region">Bourgogne                                        
    					<ul>
    						<li id="key1.2.9" title="departement">Côte-d'or                                                            
    							<ul>
    								<li id="key1.2.9.122" title="ville">Dijon
    								<li id="key1.2.9.123" title="ville">Beaune
    							</ul>
    						<li id="key1.2.10" title="departement">Saône-et-Loire                                                            
    							<ul>
    								<li id="key1.2.10.138" title="ville">Mâcon
    							</ul>
    						<li id="key1.2.11" title="departement">Nièvre                                                            
    							<ul>
    								<li id="key1.2.11.153" title="ville">Nevers
    							</ul>
    						<li id="key1.2.12" title="departement">Yonne                                                            
    							<ul>
    								<li id="key1.2.12.168" title="ville">Auxerre
    							</ul>
    					</ul>
    			</ul>
    	-->        
    	</ul>
    </div>
    Code FireBug récupéré dans l'onglet HTML :
    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
     
    <div id="tree">
    	<ul class="dynatree-container">
    		<li class="dynatree-lastsib">
    			<span class="dynatree-node dynatree-expanded dynatree-has-children dynatree-lastsib dynatree-exp-el dynatree-ico-e">
    				<span class="dynatree-expander"></span>
    				<span class="dynatree-checkbox"></span>
    				<span class="dynatree-icon"></span>
    				<a class="dynatree-title" title="pays" href="#">FRANCE</a>
    			</span>
    			<ul style="">
    				<li class="">
    					<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    						<span class="dynatree-expander"></span>
    						<span class="dynatree-checkbox"></span>
    						<span class="dynatree-icon"></span>
    						<a class="dynatree-title" title="region" href="#">Rhône-Alpes</a>
    					</span>
    					<ul style="display: none;">
    						<li class="">
    							<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Rhône</a>
    							</span>
    							<ul style="display: none;">
    								<li class="">
    									<span class="dynatree-node dynatree-exp-c dynatree-ico-c">
    										<span class="dynatree-connector"></span>
    										<span class="dynatree-checkbox"></span>
    										<span class="dynatree-icon"></span>
    										<a class="dynatree-title" title="ville" href="#">Lyon</a>
    									</span>
    								</li>
    								<li class="dynatree-lastsib">
    									<span class="dynatree-node dynatree-lastsib dynatree-exp-cl dynatree-ico-c">
    										<span class="dynatree-connector"></span>
    										<span class="dynatree-checkbox"></span>
    										<span class="dynatree-icon"></span>
    										<a class="dynatree-title" title="ville" href="#">Villefranche-sur-saône</a>
    									</span>
    								</li>
    							</ul>
    						</li>
    						<li class="">
    							<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Isère</a>
    							</span>
    						</li>
    						<li class="">
    							<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Loire</a>
    							</span>
    						</li>
    						<li class="">
    							<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Drôme</a>
    							</span>
    						</li>
    						<li class="">
    							<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Ardèche</a>
    							</span>
    						</li>
    						<li class="">
    							<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Savoie</a>
    							</span>
    						</li>
    						<li class="">
    							<span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Haute-Savoie</a>
    							</span>
    						</li>
    						<li class="dynatree-lastsib">
    							<span class="dynatree-node dynatree-has-children dynatree-lastsib dynatree-exp-cl dynatree-ico-c">
    								<span class="dynatree-expander"></span>
    								<span class="dynatree-checkbox"></span>
    								<span class="dynatree-icon"></span>
    								<a class="dynatree-title" title="departement" href="#">Ain</a>
    							</span>
    						</li>
    					</ul>
    				</li>
    				<li class="dynatree-lastsib">
    					<span class="dynatree-node dynatree-has-children dynatree-lastsib dynatree-exp-cl dynatree-ico-c">
    						<span class="dynatree-expander"></span>
    						<span class="dynatree-checkbox"></span>
    						<span class="dynatree-icon"></span>
    						<a class="dynatree-title" title="region" href="#">Bourgogne</a>
    					</span>
    				</li>
    			</ul>
    		</li>
    	</ul>
    </div>
    En espérant que ça aidera un peu.

    Merci d'avance.

  4. #4
    Membre expérimenté
    Inscrit en
    Décembre 2009
    Messages
    282
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 282
    Par défaut
    ba t'as aucune input dans ton truc c'est clair que avec un form ca ne marchera pas .....

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Pas besoin d'input ...
    il suffit de recupérer la structure en parsant le code html à l'aide de jquery et générant par exemple un array eun sorte de serialise() qui au lieu d'aller recupérer du value d'elements de form construira un array représentatif de la structure.
    Puis de l'envoyer au serveur avec ajax par exemple
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre expérimenté
    Inscrit en
    Décembre 2009
    Messages
    282
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 282
    Par défaut
    lis la doc de dynaTree, apparement avec un truc comme ca tu recupere tout les noeuds sélectionnés.
    Mais tu reupére un array de DynaTreeNode, donc apres tu dois encore faire qqch pour avoir les id !!

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $("#tree").dynatree("getSelectedNodes")

  7. #7
    Membre expérimenté
    Inscrit en
    Décembre 2009
    Messages
    282
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 282
    Par défaut
    Pas besoin d'input ...
    il suffit de recupérer la structure en parsant le code html à l'aide de jquery et générant par exemple un array eun sorte de serialise() qui au lieu d'aller recupérer du value d'elements de form construira un array représentatif de la structure.
    Puis de l'envoyer au serveur avec ajax par exemple
    Je pense que le plugin a prévu des méthode plus simple quand même ^^

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    91
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 91
    Par défaut
    Pourtant l'arbre est bien généré avec des checkboxes, voilà pourquoi je ne comprends pas :s

    J'ai mis un screenshot de l'arbre en pièce jointe

    EDIT : J'avais pas vu les messages entre temps désolé.
    Le soucis c'est que je connais pas du tout AJAX et que je n'ai malheureusement pas le temps de me former dessus pour ce travail, je dois me former dessus mais je n'ai pas le temps pour ce projet :s
    Images attachées Images attachées  

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. récupérer valeur du javascript dans une variable php
    Par zoukman18 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 18/08/2009, 17h11
  2. Récupérer valeur d'un formulaire php
    Par Mat67 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 05/02/2008, 15h03
  3. Réponses: 3
    Dernier message: 28/09/2007, 16h58
  4. Réponses: 5
    Dernier message: 12/06/2007, 10h21
  5. Réponses: 10
    Dernier message: 11/03/2006, 01h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo