Présentation dynamique d’une arborescence avec jQuery

Après avoir vu comment gérer une arborescence et comment la présenter de façon statique, voyons maintenant comment offrir la possibilité de naviguer dans l’arbre sans changer de page. Nous nous imposons les contraintes suivantes :

  1. Le traitement javascript devra être non-obstrusif ;
  2. Lorsqu’une catégorie est cliquée, la page d’arrivée doit faire apparaître la branche de la catégorie choisie dépliée (enfants éventuels + ancêtres) et les autres repliées.

1. Installation du plugin jQuery, TreeView

Nous choisissons d’utiliser la librairie javascript jQuery et l’un de ses plugins, TreeView. Le plugin offre plusieurs styles pour la présentation de l’arborescence que nous pouvons voir sur cette page d’exemples. Nous choisissons le premier exemple, « Sample 0″.

Nous téléchargeons l’archive et répartissons son contenu de la façon suivante :

  • jquery.treeview.pack.js (la version la plus compacte) dans le dossier {app}/webroot/js/
  • jquery.treeview.css dans le dossier {app}/webroot/css/
  • images/treeview-default-line.gif et images/treeview-default.gif dans le dossier {app}/img/ (les deux images nécessaires à la présentation du « Sample 0″)

2. Génération de l’arbre

Comme nous souhaitons que l’ajout du javascript soit non-obstrusif, la navigation dans l’arborescence doit être possible si le javascript est désactivé ou indisponible sur le navigateur client. Nous reprenons donc le code présenté dans le sujet précédent, quasiment à l’identique :

// {app}/app_controller.php
class AppController extends Controller
{
	var $helpers = array('Html', 'Form', 'Tree');
	var $uses = array('Category');
 
	function beforeRender()
	{
		$this->Category->recursive = -1;
		$layout_categories = $this->Category->children(false);
		$this->set('layout_categories', $layout_categories);
	}
}
// /views/layout/default.ctp
echo $tree->generate(
	$layout_categories,
	array(
		'model'   => 'Category',
		'element' => 'category_layout',
		'id'      => 'arborescence',
	)
);

Seul différence ici, l’ajout de l’identifiant ‘arborescence’ au premier <ul> de la liste, qui va permettre au plugin TreeView d’identifier l’élément à transformer en arbre.

// /views/elements/category_layout.ctp
echo $html->link(
	$data['Category']['libelle'],
	array(
		'controller' => 'categories',
		'action'     => 'view',
		$data['Category']['id']
	)
);
// {app}/controllers/categories_controller.php
function view($id = null)
{
	$category = $this->Category->read(null, $id);
 
	$this->set(compact('category'));
}

Dans l’action du Contrôleur Categories, nous n’essayons plus de retrouver le chemin parcouru jusqu’à la catégorie cliquée, le plugin sera en effet capable d’afficher lui-même la catégorie choisie dépliée avec ses enfants et ses ancêtres en se basant sur l’url de la page.

3. Mis en place du plugin

Il ne nous reste qu’à appeler la librairie jQuery et le plugin TreeView dans le header du layout.

// /views/layout/default.ctp
<head>
<?php e($javascript->link('http://www.google.com/jsapi')); ?> 
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<?php
e($javascript->link('jquery.treeview.pack.js'));
e($javascript->link('jquery.treeview.init.js'));
e($html->css('jquery.treeview.css', null, array('media' => 'screen')));
?> 
</head>

Voyons l’effet de ces 5 lignes :

  • Les deux premières lignes servent à inclure la librairie javascript jQuery en se servant d’un service gratuit de Google, qui se charge de mettre à disposition du site la version choisie de jQuery, ici la 1.2.6. Nous économisons un peu de bande passante, mais surtout nous profitons de la vitesse de réponse des serveurs de Google, et du fait qu’il est possible que le navigateur client ait déjà visité un site qui profite de ce service avant d’arriver sur le nôtre, et donc que la librairie soit déjà présente dans le cache ;
  • la 3ème ligne inclut le plugin TreeView ;
  • la 4ème ligne inclut un petit bout de code javascript que nous allons créer juste après pour initialiser le plugin ;
  • la 5ème ligne inclut la feuille de style CSS pour présenter l’arborescence.

4. Initialisation du plugin TreeView

Il ne nous reste qu’à créer un petit fichier javascript pour initialiser le plugin :

// {app}/webroot/js/jquery.treeview.init.js
$(document).ready(function(){
	$('#arborescence').treeview({
		persist:   'location',
		collapsed: true,
		animated:  'fast'
	});
});

Voyons les options définies :

  • persist : cette option peut prendre deux valeurs : ‘cookie’ et ‘location’. Avec ‘cookie’, le plugin se sert d’un cookie pour savoir quelle branche afficher, avec ‘location’, le plugin compare l’url en cours avec chaque url de l’arbre ;
  • collapsed : si vrai, l’arbre est affiché replié sauf la branche de la catégorie choisie ; si faux, l’arbre est affiché déplié par défaut, quelle que soit la catégorie cliquée ;
  • animated : définie la vitesse d’animation lors de l’ouverture ou la fermeture d’une branche. Si cette option n’est pas définie, il n’y aura pas d’animation.
Nous laissons le lecteur explorer les autres options du plugin sur cette page : TreeView options.

Pierre-Emmanuel Fringant

Articles connexes

Participez

Pour insérer une portion de code, utilisez <pre lang="php">...</pre>