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 :

Affichage automatique arbre parents/enfants


Sujet :

jQuery

  1. #1
    Membre averti
    Inscrit en
    Juin 2012
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Juin 2012
    Messages : 18
    Par défaut Affichage automatique arbre parents/enfants
    Bonjour,

    Tout d'abord j'espère être dans le bon forum.

    Je rencontre des difficultés sur une mise en page automatique, je m'explique :
    Je dispose de deux tables SQL :
    Categorie : (id, name)
    Valeur : (id, value, id_categorie)

    La résultat attendu doit être sous forme d'arbre dé-pliable (car il y aura beaucoup de valeurs par catégorie).

    Actuellement j'utilise la fonction jQuery accordion, mais je suis ouvert à d'autres idées.

    Voici mon code en 'brut' :
    Code html : 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
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">  
      <head>    
        <title> Merci de votre aide     
        </title>    
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
        <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    $("html").addClass("js");
    $.fn.accordion.defaults.container = false; 
    $(function() {
      $("#acc3").accordion({initShow : "#current"});
      $("#acc1").accordion({
          el: ".h", 
          head: "h4, h5", 
          next: "div", 
          initShow : "div.outer:eq(1)"
      });
      $("#acc2").accordion({
          obj: "div", 
          wrapper: "div", 
          el: ".h", 
          head: "h4, h5", 
          next: "div", 
          showMethod: "slideFadeDown",
          hideMethod: "slideFadeUp",
          initShow : "div.shown",
          elToWrap: "sup, img"
        });
      $("html").removeClass("js");
    });
    //--><!]]>
    </script>  
      </head>  
      <body id="nested-accordion-demo" class="jquery">         
        <div id="wrapper">                                             
          <div id="main">                      
            <ul id="acc1" class="accordion">                           
              <li> 
    		  <h4>Catégorie 1</h4>                                                
              <div class="inner">	 		  
                <p>Value 1 
                  <br/> Value 2
                </p>		               
                <ul>                                     
                  <li> 
    			  <h4>Catégorie 2</h4>                                       
                  <div class="inner"> Value 3
                    <br/>Value 4							                                        
                  </div>                                     
                  </li>                                     
                  <li> 
    			  <h4>Catégorie 3</h4>                                       
                  <div class="inner">                                           
                    <ul>                                               
                      <li> Value 5 
                      <br/> Value 6 
    				  <h5>Catégorie 4</h5>                                                 
                      <div class="inner">                                                       
                        <p>Value 7
                        </p>                                                 
                      </div>                                               
                      </li>                                               
                      <li>                               				  
    				  <h5>Catégorie 5</h5>                                                 
                      <div class="inner">         				                        
                        <ul>                                             
                          <li>                         					  
    					  <h4>Catégorie 6</h4>                                               
                          <div class="inner">                                                   
                            <ul>                                                       
                              <li>							                                						  
    						  <h5>Catégorie 7</h5>                                                         
                              <div class="inner">                                                               
                                <p>Value 9 
                                  <br/> Value 10
                                </p>								                                
                                <ul>                                                           
                                  <li>							                                							  
    							  <h5>Catégorie 9</h5>                                                             
                                  <div class="inner">                                                                   
                                    <p>Value 11
                                    </p>                                                             
                                  </div>                                                           
                                  </li>							                                                                                   
                                </ul>                                                         
                              </div>                                                       
                              </li>                                                       
                              <li>							                                						  
    						  <h5>Catégorie 8</h5>                                                         
                              <div class="inner">                                                               
                                <p>Value 12
                                </p>								   								   								   								   								   								                                                         
                                <ul>															                                                           
                                  <li>							                                							  
    							  <h5>Catégorie 10</h5>                                                             
                                  <div class="inner">                                                                   
                                    <p>Value 13
                                    </p>                                                             
                                  </div>                                                           
                                  </li>                                                           
                                  <li>							                                							  
    							  <h5>Catégorie 11</h5>                                                             
                                  <div class="inner">                                                                   
                                    <p>Value 14
                                    </p>								                                    
                                    <ul>                                                               
                                      <li>							                                								  
    								  <h5>Catégorie 14</h5>                                                                 
                                      <div class="inner">                                                                       
                                        <p>Value 15 
                                          <br/>Value 16 
                                        </p>                                                                 
                                      </div>                                                               
                                      </li>							                                                                                       
                                    </ul>                                                             
                                  </div>                                                           
                                  </li>							                                                           
                                  <li>							                                							  
    							  <h5>Catégorie 12</h5>                                                             
                                  <div class="inner">                                                                   
                                    <p>Value 17
                                    </p>                                                             
                                  </div>                                                           
                                  </li>														                                                           
                                  <li>							                                							  
    							  <h5>Catégorie 13</h5>                                                             
                                  <div class="inner">                                                                   
                                    <p>Value 18
                                    </p>                                                             
                                  </div>                                                           
                                  </li>                                                       
                                </ul>								   								   								   								   								   								   								                                                            
                              </div>                                                       
                              </li>							                                                       
                              <li>							                                						  
    						  <h5>Catégorie 9</h5>                                                         
                              <div class="inner">                                                               
                                <p>Value 19..
                                </p>                                                         
                              </div>                                                       
                              </li>                                                   
                            </ul>                                               
                          </div>                                             
                          </li>                                         
                        </ul>                                                                    
                      </div>                                               
                      </li>                                           
                    </ul>                                       
                  </div>                                     
                  </li>                                 
                </ul>  		              
              </div>                             
              </li>                          
            </ul>				                         		
    		<br />                       
          </div>                                
        </div>	   
      </body>   
    </html>

    Le fichier CSS :
    Code css : 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
     
    * {
    margin:0; 
    padding:0;
    }
    /* --- Page Structure  --- */
    html {height:100%}
    body {
      min-width:480px;
      width:100%;
      height:101%;
      background:#fff;
      color:#333;
      font:76%/1.6 verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
      text-align:center;
    }
    #wrapper{
      margin-bottom:30px;
      padding:10px 2.5%;
      border-top:0.1em solid #ccc;
      background:#fff;
      text-align:left;
      overflow:hidden;
    }
    #container {
      float:left;
      width:100%;
      margin-right:-19em;
      padding:0 0 1em;
      position:relative;
      min-height:0;
    }
    #main{
      margin-right:19em;
      position:relative; 
      min-height:0;
    }
    #side{
      float:right;
      display:inline;
      width:18em;
      padding-bottom:1.3em;
      position:relative;
      color:#e3e3e3;
      overflow:hidden;
    }
    p {margin: 0 10px 1em;}
    .strong{font-weight:700;}
    .clear {clear:both;}
    img{border:0 none;}
     
    /* --- Headings --- */
    h1 {font-family:georgia,'times new roman',times,serif; font-size:2.5em; font-weight:normal; color:#f60;}
     
    h1, h2, h3 {margin-bottom:1em;}
     
    h2, h3, h4 a, h5 a {padding:3px 10px;}
     
    h2, h3, h4, h5 {font-size:1em;;}
     
    #main h2 {background-color:#f0f0f0;}
     
    #side, #side h2, #side h3 {background:#000; color:#e3e3e3;}
     
    #side h2 {border-bottom:1px solid #484b51;}
     
    /* --- Links --- */
    a {padding:1px; border:1px solid #e0e0e0; color:#05b;}
     
    a:hover, a:focus, a:active {border-color:#bcd; text-decoration:none; outline:0 none;}
     
    #side a {display:block; border-width:0 0 1px; border-color:#445; color:#f0f0f0;}
     
    #side a:hover, #side a:active, #side a:focus {background-color:#334;}
     
    /* --- Accordion --- */
    .js #main .accordion {visibility:hidden;}
     
    .js #side .accordion {display:none;}
     
    .accordion {margin:0; padding:0 10px;}
     
    .accordion li {list-style-type:none;}
     
    .accordion li.last-child {margin-left:19px; list-style-type:disc;}
     
    #side ul.accordion ul {margin:0; padding:0 0 0 20px;;}
     
    .accordion .outer {border:1px solid #dadada; border-width:0 1px 1px; background: #fff;}
     
    .accordion .inner {margin-bottom:0; padding:.5em 20px 1em; position:relative; overflow:hidden;}
     
    .accordion .inner .inner {padding-bottom:0;}
     
    .accordion .h {padding-top:.3em;} /* vertical padding instead of vertical margin (ie8) */
     
    .accordion p {margin:.5em 1px 1em;}
     
    /*  
      Add styles for all links in the 'accordion':
    .accordion a {...;}
    */    
     
    a.trigger {padding-left:20px; background-image: url(plus.png); background-repeat: no-repeat; background-position: 1px 50%;  font-weight:700;}
     
    a.trigger.open {background-image: url(moins.png);}
     
    .last-child a.trigger{padding-left:1px; background-image:none; font-weight:normal;}
     
    #main a.trigger {background-color:#f0f0f0;}
     
    #main a.trigger.open {border-color:#dadada; background-color:#e7e7e7;}
     
    #main a:hover.trigger.open, #main a:focus.trigger.open, #main a:active.trigger.open {border-color:#bcd;}
     
    #side a.active{font-weight:700; color:#f72; text-decoration:none;}

    et le fichier JS :
    Code javascript : 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
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
     
    /* ---------------------------------------------
    Nested Accordion v.1.4.7.3
    Script to create 'accordion' functionality on a hierarchically structured content.
    http://www.adipalaz.com/experiments/jquery/nested_accordion.html
    Requires: jQuery v1.4.2+
    Copyright (c) 2009 Adriana Palazova
    Dual licensed under the MIT (http://www.adipalaz.com/docs/mit-license.txt) and GPL (http://www.adipalaz.com/docs/gpl-license.txt) licenses.
    ------------------------------------------------ */
    (function($) {
    //$.fn.orphans - http://www.mail-archive.com/jquery-en@googlegroups.com/msg43851.html
    $.fn.orphans = function(){
    var txt = [];
    this.each(function(){$.each(this.childNodes, function() {
      if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)})}); return $(txt);};
     
    $.fn.accordion = function(options) {
        var o = $.extend({}, $.fn.accordion.defaults, options);
     
        return this.each(function() {
          var containerID = o.container ? '#' + this.id : '', objID = o.objID ? o.objID : o.obj + o.objClass,
            Obj = o.container ? containerID + ' ' + objID : '#' + this.id,
            El = Obj + ' ' + o.el,
            hTimeout = null; 
     
          // build
          if (o.head) $(Obj).find(o.head).addClass('h');
          if (o.head) {
            if ($(El).next('div:not(.outer)').length) {$(El).next('div:not(.outer)').wrap('<div class="outer" />');} 
            $(Obj + ' .h').each(function(){
                var $this = $(this);
                if (o.wrapper == 'div' && !$this.parent('div.new').length) {$this.add( $this.next('div.outer') ).wrapAll('<div class="new"></div>');}
            }); 
          }
          $(El).each(function(){
              var $node = $(this);
              if ($node.find(o.next).length || $node.next(o.next).length) {
                if ($node.find('> a').length) {
                    $node.find('> a').addClass("trigger").css('display', "block");
                } else {
                    var anchor = '<a class="trigger" style="display:block" href="#" />'
                    if (o.elToWrap) {
                      var $t = $node.orphans(), $s = $node.find(o.elToWrap);
                      $t.add($s).wrapAll(anchor);
                    } else {
                      $node.orphans().wrap(anchor);
                    }
                }
              } else {
                $node.addClass('last-child');
                if (o.lastChild && $node.find('> a').length) {$node.find('> a').addClass("trigger").css('display', "block");}
              }
          });
          // init state
          $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shown').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
          if (o.activeLink) {
              var loc,
                  fullURL = window.location.href,
                  path = window.location.pathname.split( '/' ),
                  page = path[path.length-1];
                  (o.uri == 'full') ? loc = fullURL : loc = page;
              $(Obj + ' a:not([href $= "#"])[href$="' + loc + '"]').addClass('active').parent().attr('id', 'current').closest(o.obj).addClass('current');
              if (o.shift && $(Obj + ' a.active').closest(o.wrapper).prev(o.wrapper).length) {
                var $currentWrap = $(Obj + ' a.active').closest(o.wrapper),
                    $curentStack = $currentWrap.nextAll().andSelf(),
                    $siblings = $currentWrap.siblings(o.wrapper),
                    $first = $siblings.filter(":first");
                if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
                    $currentWrap.insertBefore($first).addClass('shown').siblings(o.wrapper).removeClass('shown');
                }
                if (o.shift == 'all' && $siblings.length > 1) {$curentStack.insertBefore($first);}
              }
          }
          if (o.initShow) {
            $(Obj).find(o.initShow).show().addClass('shown')
              .parents(Obj + ' ' + o.next).show().addClass('shown').end()
              .parents(o.wrapper).find('> a.trigger, > ' + o.el + ' a.trigger').addClass('open').data('state', 1);
              if (o.expandSub) {$(Obj + ' ' + o.initShow).children(o.next).show().end().find('> a').addClass('open').data('state', 1 );}
          }
          // event
          if (o.event == 'click') {
              var ev = 'click';
          } else  {
              if (o.focus) {var f = ' focus';} else {var f = '';}
              var ev = 'mouseenter' + f;
          }
          var scrollElem;
          (typeof scrollableElement == 'function') ? (scrollElem = scrollableElement('html', 'body')) : (scrollElem = 'html, body');
     
          // The event handler is bound to the "accordion" element
          // The event is filtered to only fire when an <a class="trigger"> was clicked on.
          $(Obj).delegate('a.trigger', ev, function(ev) {
              var $thislink = $(this),
                  $thisWrapper = $thislink.closest(o.wrapper),
                  $nextEl = $thisWrapper.find('> ' + o.next),
                  $siblings = $thisWrapper.siblings(o.wrapper),
                  $trigger = $(El + ' a.trigger'),
                  $shownEl = $thisWrapper.siblings(o.wrapper).find('>' + o.next + ':visible'),
                  shownElOffset;
                  $shownEl.length ? shownElOffset = $shownEl.offset().top : shownElOffset = false;
     
              function action(obj) {
                 if (($nextEl).length && $thislink.data('state') && (o.collapsible)) {
                      $thislink.removeClass('open');
                      $nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);});
                  }
                  if (($nextEl.length && !$thislink.data('state')) || (!($nextEl).length && $thislink.closest(o.wrapper).not('.shown'))) {
                      if (!o.standardExpansible) {
                        $siblings.find('> a.open, >'+ o.el + ' a.open').removeClass('open').data('state', 0).end()
                        .find('> ' + o.next + ':visible')[o.hideMethod](o.hideSpeed);
                        if (shownElOffset && shownElOffset < $(window).scrollTop()) {$(scrollElem).animate({scrollTop: shownElOffset}, o.scrollSpeed);}
                      }
                      $thislink.addClass('open');
                      $nextEl.filter(':hidden')[o.showMethod](o.showSpeed, function() {$thislink.data('state', 1);});
                  }
                  if (o.shift && $thisWrapper.prev(o.wrapper).length) {
                    var $thisStack = $thisWrapper.nextAll().andSelf(),
                        $first = $siblings.filter(":first");
                    if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
                      $thisWrapper.insertBefore($first).addClass('shown').siblings(o.wrapper).removeClass('shown');
                    }
                    if (o.shift == 'all' && $siblings.length > 1) {$thisStack.insertBefore($first);}
                  }
              }
              if (o.event == 'click') {
                  action($trigger); 
                  if ($thislink.is('[href $= "#"]')) {
                      return false;
                  } else {
                      if ($.isFunction(o.retFunc)) {
                        return o.retFunc($thislink) 
                      } else {
                        return true;
                      }
                  }
              }
              if (o.event != 'click') {
                  hTimeout = window.setTimeout(function() {
                      action($trigger);
                  }, o.interval);        
                  $thislink.click(function() {
                      $thislink.blur();
                      if ($thislink.attr('href')== '#') {
                          $thislink.blur();
                          return false;
                      }
                  });
              }
          });
          if (o.event != 'click') {$(Obj).delegate('a.trigger', 'mouseleave', function() {window.clearTimeout(hTimeout); });}
     
          /* -----------------------------------------------
          // http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links:
          -------------------------------------------------- */
          function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i < argLength; i++) {
              var el = arguments[i],
                  $scrollElement = $(el);
              if ($scrollElement.scrollTop() > 0) {
                return el;
              } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop() > 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                  return el;
                }
              }
            };
            return [];
          }; 
          /* ----------------------------------------------- */
    });};
    $.fn.accordion.defaults = {
      container : true, // {true} if the plugin is called on the closest named container, {false} if the pligin is called on the accordion element
      obj : 'ul', // the element which contains the accordion - 'ul', 'ol', 'div' 
      objClass : '.accordion', // the class name of the accordion - required if you call the accordion on the container
      objID : '', // the ID of the accordion (optional)
      wrapper :'li', // the common parent of 'a.trigger' and 'o.next' - 'li', 'div'
      el : 'li', // the parent of 'a.trigger' - 'li', '.h'
      head : '', // the headings that are parents of 'a.trigger' (if any)
      next : 'ul', // the collapsible element - 'ul', 'ol', 'div'
      initShow : '', // the initially expanded section (optional)
      expandSub : true, // {true} forces the sub-content under the 'current' item to be expanded on page load
      showMethod : 'slideDown', // 'slideDown', 'show', 'fadeIn', or custom
      hideMethod : 'slideUp', // 'slideUp', 'hide', 'fadeOut', or custom
      showSpeed : 400,
      hideSpeed : 800,
      scrollSpeed : 600, //speed of repositioning the newly opened section when it is pushed off screen.
      activeLink : true, //{true} if the accordion is used for site navigation
      event : 'click', //'click', 'hover'
      focus : true, // it is needed for  keyboard accessibility when we use {event:'hover'}
      interval : 400, // time-interval for delayed actions used to prevent the accidental activation of animations when we use {event:hover} (in milliseconds)
      collapsible : true, // {true} - makes the accordion fully collapsible, {false} - forces one section to be open at any time
      standardExpansible : false, //if {true}, the functonality will be standard Expand/Collapse without 'accordion' effect
      lastChild : true, //if {true}, the items without sub-elements will also trigger the 'accordion' animation
      shift: false, // false, 'clicked', 'all'. If 'clicked', the clicked item will be moved to the first position inside its level, 
                    // If 'all', the clicked item and all following siblings will be moved to the top
      elToWrap: null, // null, or the element, besides the text node, to be wrapped by the trigger, e.g. 'span:first'
      uri : 'full', // 
      retFunc: null //
    };
    /* ---------------------------------------------
    Feel free to remove the following code if you don't need these custom animations.
    ------------------------------------------------ */
    //credit: http://jquery.malsup.com/fadetest.html
    $.fn.slideFadeDown = function(speed, callback) { 
      return this.animate({opacity: 'show', height: 'show'}, speed, function() { 
        if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
        if (jQuery.isFunction(callback)) { callback(); }
      }); 
    }; 
    $.fn.slideFadeUp = function(speed, callback) { 
      return this.animate({opacity: 'hide', height: 'hide'}, speed, function() { 
        if (jQuery.browser.msie) { this.style.removeAttribute('filter'); }
        if (jQuery.isFunction(callback)) { callback(); }
      }); 
    }; 
    /* --- end of the optional code --- */
    })(jQuery);
    ///////////////////////////
    // The plugin can be called on the ID of the accordion element or on the ID of its closest named container.
    // If the plugin is called on a named container, we can initialize all the accordions residing in a given section with just one call.
    // EXAMPLES:
    /* ---
    $(function() {
    // If the closest named container = #container1 or the accordion element is <ul id="subnavigation">:
    /// Standard nested lists:
      $('#container1').accordion(); // we are calling the plugin on the closest named container
      $('#subnavigation').accordion({container:false}); // we are calling the plugin on the accordion element
      // this will expand the sub-list with "id=current", when the accordion is initialized:
      $('#subnavigation').accordion({container:false, initShow : "#current"});
      // this will expand/collapse the sub-list when the mouse hovers over the trigger element:
      $('#container1').accordion({event : "hover", initShow : "#current"});
     
    // If the closest named container = #container2
    /// Nested Lists + Headings + DIVs:
      $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div'});
      $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div', initShow : 'div.outer:eq(0)'});
      
    /// Nested DIVs + Headings:
      $('#container2').accordion({obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer'});
      $('#container2').accordion({objID: '#acc2', obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer', initShow : '.shown', shift: 'all'});
    });
     
    /// We can globally replace the defaults, for example:
      $.fn.accordion.defaults.initShow = "#current";
    --- */
    /// Example options for Hover Accordion:
    /* ---
    $.fn.accordion.defaults.container=false;
    $.fn.accordion.defaults.event="hover";
    $.fn.accordion.defaults.focus=false; // Optional. If it is possible, use {focus: true}, since {focus: false} will break the keyboard accessibility
    $.fn.accordion.defaults.initShow="#current";
    $.fn.accordion.defaults.lastChild=false;
    --- */

    J'aimerais donc que mon arbre se crée tout seul.. je suis partis sur une colonne 'id_parent' dans ma table 'Categore' mais malgré cela je bloque.

    Merci pour vos idées,

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Inscrit en
    Juin 2012
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Juin 2012
    Messages : 18
    Par défaut
    Merci pour ce lien,

    J'ai choisis dans le 2. jsTree, (http://www.jstree.com/demo) l'arbre "PHP & mySQL demo + event order".

    Je pense que je peux essayer de m'adapter aux configurations requises pour réussir cette même interface, mais dans son exemple, il n'utilise qu'une seule table :

    Code sql : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    INSERT INTO `tree` (`id`, `parent_id`, `position`, `left`, `right`, `level`, `title`, `type`) VALUES
    (1, 0, 2, 1, 14, 0, 'ROOT', ''),
    (2, 1, 0, 2, 11, 1, 'C:', 'drive'),
    (3, 2, 0, 3, 6, 2, '_demo', 'folder'),
    (4, 3, 0, 4, 5, 3, 'index.html', 'default'),
    (5, 2, 1, 7, 10, 2, '_docs', 'folder'),
    (6, 1, 1, 12, 13, 1, 'D:', 'drive'),
    (12, 5, 0, 8, 9, 3, 'zmei.html', 'default');

    Je me demande deux choses :

    A quoi servent les valeurs 'position, left, right et level' ? je ne comprends pas bien leur logique..

    Et pensez vous qu'il soit possible d'utiliser mes deux tables pour générer l'arbre ?
    (Categorie : (id, name)
    Valeur : (id, value, id_categorie))

    Merci encore pour votre aide.

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Personnellement je trouve http://dynatree.googlecode.com/ (dynatree-1.2.4 est compatible avec jQuery 1.9) plus intéressant.

    Comme exemple, voici ma page de test avec les codes du test que j'ai réalisé en découvrant la documentation.

    Nota bene : j'expérimente une nouvelle manière d'écrire ma page de test, en plaçant les codes HTML, CSS et JS dans des fichiers séparés. La structure de ma page de test vous semblera peut-être inhabituelle, mais il n'y a rien de neuf, tout a déjà été décrit et testé par ailleurs.

    Fichier dvp0.html :

    Code html : 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
    <!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/0.99/head.min.js"></script>
    	<script>
                    "use strict";
                    
                    /*
                     * Voir : http://headjs.com/
                     */
                    head.js(
                            "http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
                            "http://code.jquery.com/jquery-2.0.0b2.js",
                            //"http://code.jquery.com/jquery-migrate-1.1.0.min.js",
                            "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/i18n/jquery-ui-i18n.min.js",
                            "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js",
                            //"http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js",
                            //"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
                            //"http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js",
                            //"https://raw.github.com/janl/mustache.js/master/mustache.js",
                            //"https://raw.github.com/jonnyreeves/jquery-Mustache/master/jquery.mustache.js",
                            "http://danielhagnoul.developpez.com/lib/dvjh/base.js",
                            //"objectES5/dvjhExtend.js",
                            "dynatree-1.2.4/jquery/jquery.cookie.js",
                            "dynatree-1.2.4/dist/jquery.dynatree-1.2.4.js",
                            "dvp0.js",
                            function(){
                                    jQuery( document ).ready( dvjh.ready( "tree", "dvp0.json" ) );
                                    
                                    jQuery( window ).load( dvjh.load() );
                            });
            </script>
    	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/sunny/jquery-ui.min.css">
    	<link rel="stylesheet" href="dynatree-1.2.4/src/skin-vista/ui.dynatree.css">
    	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
    	<link rel="stylesheet" href="dvp0.css">
    </head>
    <body>
    	<header>
    		<hgroup>
    			<h1>Forum jQuery</h1>
    			<h2>
    				<a href="">Lien</a>
    			</h2>
    		</hgroup>
    	</header>	
    	<section class="conteneur">
    		<section class="table1">
    			<header class="caption">
    				<h3>Sous-titre</h3>
    			</header>
    			<section class="ligne">
    				<article>
     
    					<!-- début code du test -->
     
    					<div id="tree"></div>
     
    					<!-- fin code du test -->
     
    				</article>
    				<article>
     
    					<!-- début code du test -->
     
     
    					<!-- fin code du test -->
     
    				</article>
    			</section>
    		</section>
    	</section>
    	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
    		<time datetime="2013-03-10T23:31:02.35+01:00" pubdate>2013-03-10T23:31:02.35+01:00</time>
    		<span itemprop="name">Daniel Hagnoul</span>
    		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
    		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
    		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
    		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
    	</footer>
    </body>
    </html>

    Fichier dvp0.css :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    @charset "utf-8";
    .hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
    nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
    aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
    article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
    .table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
    .ligne { display: table-row; }
    .caption { display: table-caption; text-align: center; }
    .table1 .ligne { min-height: 30rem; }
    .table1 article { min-width: 40rem; vertical-align: top; }
     
    /* début code du test -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
     
     
    /* fin code du test */

    Fichier dvp0.js :

    Code javascript : 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
    "use strict";
     
    /*
     * Pourquoi dvjh ?
     * http://learn.jquery.com/code-organization/beware-anonymous-functions/
     * http://danielhagnoul.developpez.com/tutoriels/javascript/adapter-jquery-vos-besoins/
     * 
     * ES5 Object.create ?
     * https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create
     */
     
    var dvjh = ( function( $ ){
    	// code privé
    	var Defaults = {
    			"id" : "tree",
    			"jsonFile" : "tree.json",
    			"debugLevel" : 0 // 0 : quiet, 1 : normal, 2 : debug
    		},
    		Opts = null,
    		jObjTree = null,
    		initTree = function initTree(){
    			jObjTree = $( "#" + Opts[ "id" ] ).dynatree({
    			    "onActivate" : function( node ){
    			        console.log( "You activated " + node.data.title );
    			    },
    			    "persist" : true,
    			    "initAjax" : {
    			    	"url" : Opts[ "jsonFile" ],
    			    	"data" : {
    			    		"key" : "root", // Optional arguments to append to the url
    			    		"mode" : "all"
    			    	}
    			    },
    			    "onLazyRead" : function( node ){
    			    	node.appendAjax({
    			    		url: "dvp0lazy1.json",
    			    		data: {
    			    			"key": node.data.key, // Optional url arguments
                                "mode": "all"
                            }
                     	});
                    },
    			    "debugLevel" : Opts[ "debugLevel" ]
    			});
    		};	
     
    	// Objet ES5 public
    	return Object.create( {}, {
    		"ready" : {
    			"value" : function( id, jsonFile ){
    				// debug
    				//$.Mustache.options.warnOnMissingTemplates = true;
     
    				if ( id && jsonFile ){
    					Opts = $.extend( true, {}, Defaults, {
    						"id" : id,
    						"jsonFile" : jsonFile
    					});
     
    					initTree();
    				} else {
    					console.log( "Vous devez définir les paramètres id et jsonFile." );
    				}
     
    				// debug
    				//console.log( $.Mustache.templates() );
    			},
    			"enumerable" : true
    		},
    		"load" : {
    			"value" : function(){
     
    				// debug
    				//console.log( "load", this );
    			},
    			"enumerable" : true
    		}
    	});
    })( jQuery );

    Fichier dvp0.json :

    Code javascript : 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
    [
    	{
    		"title" : "Item 1"
    	},
    	{
    		"title" : "Folder 2", 
    		"isFolder" : true,
    		"children" : [
    			{
    				"title" : "Sub-item 2.1"
    			},
    			{
    				"title" : "Sub-item 2.2"
    			}
    		]
    	},
    	{
    		"title" : "Item 3"
    	},
    	{
    		"title" : "Folder 4", 
    		"isFolder" : true,
    		"isLazy" : true
    	}
    ]

    Fichier dvp0laszy1.json :

    Code javascript : 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"
    			}
    		]
    	}
    ]

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre averti
    Inscrit en
    Juin 2012
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Juin 2012
    Messages : 18
    Par défaut
    Bonjour,

    Il est vrai que ce Treeview est très efficace ! Je vous remercie pour votre aide, je vais donc opter pour un de ces modules.

    Bonne continuation !

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

Discussions similaires

  1. Representation arborescence parent enfant sous forme d'arbre
    Par dguenard dans le forum Développement de jobs
    Réponses: 8
    Dernier message: 10/07/2015, 17h00
  2. Réponses: 4
    Dernier message: 21/10/2012, 19h17
  3. [VB.NET] Problème liste Parent-Enfant dans DataGrid
    Par vonbier dans le forum ASP.NET
    Réponses: 7
    Dernier message: 27/01/2005, 08h53
  4. affichage automatique bouton et zone de liste
    Par mathilde50 dans le forum IHM
    Réponses: 4
    Dernier message: 16/11/2004, 16h02
  5. Réponses: 2
    Dernier message: 11/05/2004, 11h17

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