Accueil    Codes    Création d'un treeview
 



Création d un treeview  Création d'un treeview




Présentation



Voici un script permetant de mettre en place un treeview à partir d'une imbrication d'éléments <div> sur lesquelles sont appliquées des styles css gérant l'affichage des images plus et moins ainsi que le décalge vers la droite des éléments imbriqués.

Exemple de mise en place :


Catégorie 1
Sous catégorie 1
Texte élément 1
Texte élément 2
Texte élément 3
Sous catégorie 2
Sous catégorie 3
Catégorie 2
Sous catégorie 1
Sous catégorie 2
Texte élément 1
Texte élément 2
Texte élément 3
Sous catégorie 3
Catégorie 3
Sous catégorie 1
Sous catégorie2
Sous catégorie 3
Texte élément 1
Texte élément 2
Texte élément 3


Implémentation



Le script se base sur jquery et sur une feuille de style spécifique utilisant deux images (+ et -). Il faut tout d'abord inclure ces éléments et y faire référence dans la page mettant en place le treeview :


<link rel="stylesheet" type="text/css" href="treeview.css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>


Il faut ensuite appliquer le code javascript suivant dans la partie <head> qui s'occupera de gérer le comportement des éléments du treeview :



<script type="text/javascript">
$(function() {
   $('div.tree div:has(div)').addClass('parent');
   $$('div.tree div').click(function() {
      var o = $(this);
      o.children('div').toggle();
      o.filter('.parent').toggleClass('expanded');
       false;
   $});
});
</script>


Finalement il ne reste plus qu'à mettre en place le code html relatif au treeview, la div parent devant avoir comme classe : "tree"


<div class='tree' style='padding:10px; border:solid 1px #dedede;'>
   <div>Catégorie 1
      <div>Sous catégorie 1
         <div>Texte élément 1</div>
         <div>Texte élément 2</div>
         <div>Texte élément 3</div>
      </div>
      <div>Sous catégorie 2</div>
      <div>Sous catégorie 3</div>
   </div>
   <div>Catégorie 2
      <div>Sous catégorie 1</div>
      <div>Sous catégorie 2
         <div>Texte élément 1</div>
         <div>Texte élément 2</div>
         <div>Texte élément 3</div>
      </div>
      <div>Sous catégorie 3</div>
   </div>
</div>




TelechargementTélécharger l'exemple de treeview