Treeview tafeltree

Télécharger le projet
Commenter

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/
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (rekam)