TafelTree-view (Javascript)

Treeview basé sur la libraire Script Aculous

Installation pas-à-pas

Téléchargement du script

Premièrement, il s'agit de télécharger l'arbre. La dernière version de cet arbre est disponible sur SourceForge (ainsi que le CVS, voir la page d'accueil). Elle est au format ZIP uniquement.

TafelTree v1.9.1, 2007-07-23

Dans le HEAD

Voici les petites choses à mettre dans le HEAD. Il faut bien entendu tenir compte des chemins.

1
2
3
4
5
6
7

<head>

</head>

Il s'agit ensuite de placer dans le BODY l'élément qui contiendra l'arbre.

1
2
3
4
5
6

<body>

</body>

Définition de la structure

Pour définir la structure, rien de plus simple. Il suffit de créer un objet Javascript JSON. Cette description particulière permet d'obtenir rapidement et facilement un tableau d'objets qui définissent chaques branches

On peut définir la structure aussi bien dans le HEAD que dans le BODY. Dans l'exemple, on l'appellera dans le BODY.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Structure de base représentant une racine avec deux

// sous-branches

var struct = [

{

'id' : 'root_1',

'txt' : 'Racine 1',

'items' : [

{

'id' : 'branch_1',

'txt' : 'Branche 1'

},{

'id' : 'branch_2',

'txt' : 'Branche 2'

}

]

}

];

</script>

Initialisation

L'initialisation de l'arbre se fait après le chargement complet de la page. Une méthode est appelée à cet effet. Il s'agit de TafelTreeInit ().

Tout comme la structure, on peut appeler cette fonction aussi bien dans le HEAD que dans le BODY. Dans l'exemple, on l'appellera dans le BODY.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// On déclare le tree à l'extérieur de la fonction.

// Ainsi, il sera accessible de manière globale.

var tree = null;

// Initialisation de l'arbre. Cette fonction est appelée

// automatiquement à la fin du load de la page

function TafelTreeInit () {

tree = new TafelTree('myTree', struct, {

'generate' : true,

'imgBase' : 'imgs/',

'width' : '100%', // valeur par défaut : 100%

'height' : '150px', // valeur par défaut : auto

'openAtLoad' : true,

'cookies' : false

});

}

</script>

Une description complète des options que l'on peut mettre dans le constructeur est disponible ici.

Résultat

Choix des langues

Téléchargement

Télécharger la version v1.9.1

Cliquez ici

Documentation

Une documentation complète est accessible ici

Smarty

Un module Smarty a été développé pour l'arbre. Merci à Abalam! Module smarty

Ils l'utilisent

Déjà des projets intègrent cette librairie.

Treeview JS TafelTree

2007-07-23, Tafel. Optimisé pour Mozilla Firefox