begin process at 2008 07 06 04:49:40
1 205 464 membres
43 nouveaux aujourd'hui
14 119 membres club

Vous ne trouvez pas de réponse ŕ votre problčme ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bęte, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

TREEVIEW TAFELTREE


Information sur la source

Catégorie :Menu & Co Classé sous : arbre, treeview, ajax, tree, menu Niveau : Initié Date de création : 21/08/2006 Date de mise ŕ jour : 20/01/2007 01:01:35 Vu / téléchargé: 22 661 / 3 003

Note :
9,65 / 10 - par 20 personnes
9,65 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (61)
Ajouter un commentaire et/ou une note

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

  • <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>
<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/
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !