Une fois n'est pas coutume, je vais vous présenter aujourd'hui un petit outil JavaScript qui va nous permettre de présenter sous la forme d'un arbre hiérarchique, l'organigramme de votre organisation professionnelle par exemple. Le principe, c'est d'avoir un point de départ de notre arbre n-aire à partir duquel va découvrir tout un ensemble de subordonnés. Je m'appuie sur la bibliothèque Javascript TreeData.js de Raphaël MORIM pour cet outil

Le besoin

Dans le cadre de mes fonctions de documentation, je dois présenter un arbre à partir duquel nous allons pouvoir trouver le chef, son adjoint, les sections de notre bureau, les cellules de notre bureau ainsi qu'éventuellement des sous-cellules. Bref, un arbre n-aire.

Le fonctionnement

Pour pouvoir afficher un arbre sur une page web, je me suis plutôt orienté vers des outils de type JavaScript. (oui oui moi et javascrpt, une grande histoire de haïssement !) C'est la raison pour laquelle, j'utilise une bibliothèque toute faite dénommée treedata.js.
Au point de départ, je cherchais une bibliothèque qui puisse me prendre en paramètre un fichier XML, à partir du qui a eu aurait découlé un arbre hiérarchique. Ne trouvant pas ce que je cherchais, je me suis attardé sur cette bibliothèque, qui ne prend pas un fichier XML mais un "fichier" (ou des données plutôt) au format JSON qui permet lui aussi de décrire une organisation hiérarchique.
Cette organisation, elle n'est pas stockée dans un fichier hiérarchisés des formats que je stipule ci-dessus, mais une forme de hiérarchie existe toutefois.
Ainsi, dans le fichier de génération de notre arbre, nous allons le décrire via un format JSON. Une fois la description de cet arbre réalisé, le script lance une procédure qui va prendre deux paramètres, le premier correspondant à la description hiérarchique de notre JSON, le deuxième étant tout simplement le nom de la DIV généré qui va stocker le contenu à l'affichage.
Le JSON à la forme suivante :
{value : "<div class=\"bureau\">Bureau NOM-DU-BUREAU</div>", parent : ""},
						a : {value : "<?php include('cdb.htm');?>", parent : "titre_arbre"},
						b : {value : "<div class=\"role\">Adjoint chef de bureau</div><div class=\"nominatim\"><span class=\"niveau\">Monsieur</span><span class=\"nom\">ONE</span></div><div class=\"telephone_FT\">03 83 00 00 00</div><div class=\"telephone_INTERNE\">01 42 01 34 00</div> ", parent : "a"},
						c : {value : "<div class=\"role\">Adjoint chef de bureau</div><div class=\"nominatim\"><span class=\"niveau\">Monsieur</span><span class=\"nom\">JAMAISTERMINE</span></div><div class=\"telephone_FT\">03 83 00 00 01</div><div class=\"telephone_INTERNE\">87 42 01 34 00</div> ", parent : "a"},
						d : {value : "D", parent : "c"},
						e : {value : "E", parent : "b"},
						f : {value : "F", parent : "c"},
						g : {value : "G", parent : "f"},
					 
						h : {value : "D", parent : "c"},
						i : {value : "E", parent : "b"},
						j : {value : "F", parent : "b"},
				};
  1. Remarquez que l'outil gère la hiérarchie en stipulant un paramère "parent". Ainsi, les noeuds peuvent être rajouté à n'importe quel endroit du code.
  2. Remarquez aussi que je peux gérer via des include php  des pages html externes. C'est très utile lorsque vous avez un fort turn-over sur un poste, qu'il sooit volontaire ou non !

Le chargement de bibliothèques

Je n'ai toujours pas honte de dire que je suis une véritable buse en Javascript, et je réutilise des choses déjà existantes. C'est la raison pour laquelle je me suis basé sur la bibliothèque treedata.js à laquelle j'ai ajouté ma petite touche personnelle PHP.
En effet, connaissant personnellement la personne qui va faire une mise à jour, c'est-à-dire moi, j'ai souhaité mettre en place un système facile pour retrouver son propre code que nous avons affiché sur chacune des feuilles de cet arbre.
C'est la raison pour laqulle  j'utilise, en PHP, la fonction d'inclusion include qui permet de charger un fichier externe HTML. (on peut peut etre le faire en javascript, je l'ignore) En effet, je vais créer autant de fichiers HTML que de feuilles de mon arbre, et lorsor du changement nominatif d'un personnel, je n'aurais qu'à éditer et corriger un et un seul fichier externe.
Se pose alors et à question dans le cas de rajout d'un nœud dans l'arbre, en d'autres termes l'ouverture d'un poste dans notre organisation, autant dire on n'est pas prêt d'en rajouter régulièrement.
Et même si un nouveau poste se crée, il suffit d'éditer le fichier de description de l'arbre pour rajouter une simple feuille à notre arbre.

Pourquoi utiliser une inclusion php ?

Comme je le disais, l'inclusion permet d'avoir stocké des données dans des entités indépendantes externes. Dans notre cas, ces entités sont simplement des fichiers HTML. Ainsi, en cas de correction d'identité, inutile de retoucher au code javascript, éditer un simple fichier HTML suffira.
En revanche, et vous aurez entièrement d'accord si vous me faites cette réflexion, le jour ou une nouvelle feuille est à créer ou à supprimer dans cet arbre, il faudra forcément retoucher la structure du code de l'arbre en JSON. Cependant, l'inclusion de fichiers externe permet d'avoir une visibilité du code beaucoup plus clair. Et je ne le cache pas, c'est exactement ce que je recherchais avec ses inclusions.
 
Dans les tabs suivantes, celles mentionnées par une * sont les ficihers aps de moi !