Treeview tafeltree

Soyez le premier à donner votre avis sur cette source.

Vue 40 519 fois - Téléchargée 4 299 fois

Description

Après moult recherches sur le web, je n'ai pas trouvé de treeview opensource et gratuit pouvant faire tout ce dont j'avais envie. J'ai donc développé ce petit arbre bien sympa, avec une bonne grosse poignée d'options diverses et variées, comme le drag&drop, les checkbox, les événements, etc.

Il est basé sur la librairie de Script Aculous (http://script.aculo.us). C'est une superbe librairie JS avec moults effets, drag&drop et j'en passe.

Voici une petite liste non-exhaustive des possibilités (pour tout voir, il vaut mieux aller sur le site : http://tafel.developpez.com/

- gestion complète du clavier (ctrl+x et compagnie, navigation, etc)
- RTL mode (affichage de droite à gauche)
- création de l'arbre avec JSON ou avec des simples UL - LI
- plusieurs arbres sur la même page
- drag&drop (dans l'arbre ou entre plusieurs arbres)
- checkboxes (à 2 ou 3 états)
- édition du texte
- ouverture d'une seule branche à la fois
- possibilité de mettre ses propres paramètres pour les branches
- gestion des événements (onclick, ondblclick, onmouseover, onmouseout, onload, onedit, et j'en passe)
- drag&drop ajax (voir la doc pour plus d'info)
- copy-drag
- insertion de branches où on veut dans l'arbre avec insertBefore(), insertAfter(), insertIntoFirst() et insertIntoLast()
- multi-ligne
- branche "HTMLisable" à souhait
- et encore bien d'autres choses

Pour voir toute la doc, allez faire un tour sur le site :

http://tafel.developpez.com/

Source / Exemple :


<script type="text/javascript">
	// Cette fonction est automatiquement appelée au chargement de la page
	function TafelTreeInit() {
		// L'item dont l'id vaut "specialOpen" n'a pas d'enfants. Au moment de cliquer dessus,
		// c'est le serveur qui donnera les informations concernant les enfants
		var struct = [
		{
			'id':'root1',
			'txt':'Element racine',
			'img':'page.gif', // Image s'il n'a pas d'enfants
			'imgopen':'folderopen.gif', // Image s'il a des enfants et qu'il est ouvert
			'imgclose':'folder.gif', // Image s'il a des enfants et qu'il est fermé
			'items':[
				{
				'id':'child1',
				'txt':'Un enfant',
				'img':'page.gif',
				'tooltip':'Un petit tooltip sympa',
				},
				{
				'id':'specialOpen',
				'txt':'Les enfants sont sur le serveur',
				'img':'page.gif',
				'imgopen':'folderopen.gif',
				'imgclose':'folder.gif',
				'canhavechildren':true,
				'onopenpopulate':function(branch, response){ return true;},
				'openlink':'scripts/open.php'
				}
			]
			}
		];
		var tree = new TafelTree('test2', struct, {
			'generate' : true,
			'imgBase' : 'tree/imgs/',
			'width' : '100%',
			'height' : 'auto',
			'defaultImg' : 'page.gif',
			'defaultImgOpen' : 'folderopen.gif',
			'defaultImgClose' : 'folder.gif'
		});
	}
</script>
<div id="test2"></div>

Conclusion :


A disposition, il y a de la documentation en français et en anglais. Le site comporte également des exemples et un forum, pour celles et ceusses qui auraient des questions.

L'arbre est compatible IE, firefox (pc, mac, linux), Safari, Opera et Konqueror.

Pour plus de doc, allez voir l'adresse :
http://tafel.developpez.com/

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_Kimjoa
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
Ouaou c tros cool ton arbre c pile poil ce qui me fallait, en plus moi qui suit debutant en javascript tu y explique tout les détaille pour l'installer correctement.je te mais 10/10 meme si je comprend rien au code , c vraiment tros beau mieux que windows!! merci!
cs_iubito
Messages postés
629
Date d'inscription
mercredi 3 juillet 2002
Statut
Membre
Dernière intervention
9 octobre 2006
-
Excellent ! (je ne vois pas quoi dire d'autre !)

et je confirme que ça marche avec Opera 9.01 (Windows) !
rekam
Messages postés
122
Date d'inscription
mardi 19 novembre 2002
Statut
Membre
Dernière intervention
10 mars 2011
-
Yop!
Merci bien pour ces commentaires. Si jamais vous avez des idées de comportements à ajouter, n'hésitez pas. Là, je planche sur un multi-drag&drop, mais c'est pas évident. Je vais peut-être ajouter d'autres choses entre-temps ;)

Bref, merci et a+
rekam
vduffaut
Messages postés
31
Date d'inscription
mardi 13 avril 2004
Statut
Membre
Dernière intervention
3 mars 2008
-
Très propre ! Bravo pour ce code qui me donne d'organisation des idées pour mon site. J'ai mis 10. En revanche sur le site Web cité, le ZIP est invalide alors que l'explication est bien faite.

Bonne continuation.
rekam
Messages postés
122
Date d'inscription
mardi 19 novembre 2002
Statut
Membre
Dernière intervention
10 mars 2011
-
Salut! Qu'entends-tu par invalide ? J'arrive à le télécharger et le Tree.js qui est dedans fonctionne aussi. Ce qui est possible, c'est que tu aies tenté de télécharger le ZIP juste au moment où je mettais à jour (vers 10h15, par là).

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.