Accueil > Programmation > javascript > Deux plugin jQuery pour générer une arborescence
Deux plugin jQuery pour générer une arborescence
mercredi 27 juillet 2011, par
Les arborescences se font en appliquant un style et un peu de javascript sur une liste. Comme il ne sert à rien de réinventer la roue, voici deux plugin très efficaces pour faire le travail à notre place.
Un peu de html
Une liste, comment ça marche ? Elles sont constituées de balises ul (pour les noeuds) et li (pour les feuilles). Voici un exemple qui vaudra mieux qu’un long discours :
<ul>
<li>Un élément</li>
<li>Un deuxième élément</li>
<li>Un troisième élément
<ul>
<li>avec un sous élément</li>
<li>et un autre</li>
</ul>
</li>
<li>Continuons avec un quatrième élément à la racine</li>
</ul>Ce qui donne :
- Un élément
- Un deuxième élément
- Un troisième élément
- avec un sous élément
- et un autre
- Continuons avec un quatrième élément à la racine
On peut ainsi créer autant de sous niveaux que l’on souhaite.
Ce ne sont pas les seules balises, mais c’est suffisant dans notre contexte. Pour en savoir plus, demandez à votre ami google des informations sur :
<ol>,
<ul>,
<li>,
<dl>,
<dt>treeview
Mon préféré était treeview de bassistance, mais ils ont arrêté le développement et donc la compatibilité avec les futures versions de jQuery ne sera pas assuré. Cependant, si vous n’avez pas l’intention de mettre à jour votre jQuery, je vous le conseille.
Le code est on ne peut plus simple : il suffit de donner un identifiant à la racine de votre liste et de lui appliquer le plugin :
<ul id="monArbreTreeview">
<li>1-1</li>
<li>1-2</li>
<li>1-3
<ul>
<li>2-1</li>
<li>2-2</li>
</ul>
</li>
<li>1-4
<ul>
<li>2-3</li>
<li>2-4</li>
<li>2-5
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
<li>3-6</li>
</ul>
</li>
<li>2-6</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$("#monArbreTreeview").treeview();
</script>- 1-1
- 1-2
- 1-3
- 2-1
- 2-2
- 1-4
- 2-3
- 2-4
- 2-5
- 3-1
- 3-2
- 3-3
- 3-4
- 3-5
- 3-6
- 2-6
jsTree
Ce deuxième plugin fonctionne comme le premier. C’est jsTree. Le principale différence consiste en le fait que la liste doit être contenue dans un <div>. Un inconvénient est que les listes doivent contenir des liens. Appliquons le au même exemple adapté à jsTree avec div et liens :
<div id="monArbreJsTree">
<ul>
<li><a href="#">1-1</a></li>
<li><a href="#">1-2</a></li>
<li><a href="#">1-3</a>
<ul>
<li><a href="#">2-1</a></li>
<li><a href="#">2-2</a></li>
</ul>
</li>
<li><a href="#">1-4</a>
<ul>
<li><a href="#">2-3</a></li>
<li><a href="#">2-4</a></li>
<li><a href="#">2-5</a>
<ul>
<li><a href="#">3-1</a></li>
<li><a href="#">3-2</a></li>
<li><a href="#">3-3</a></li>
<li><a href="#">3-4</a></li>
<li><a href="#">3-5</a></li>
<li><a href="#">3-6</a></li>
</ul>
</li>
<li><a href="#">2-6</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#monArbreJsTree").jstree();
Il est possible de l’intégrer à une interface jquery-UI avec les options suivantes :
$("#monArbreJsTree").jstree({
"plugins" : [ "html_data", "ui", "themeroller" ]
});
Attention cependant : cette option n’est pas compatible avec internet explorer et bugue avec chrome.
