Treeview tafeltree

Soyez le premier à donner votre avis sur cette source.

Vue 40 782 fois - Téléchargée 4 600 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

Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015

Merci pour la réponse.
En fait c'est pour faire site (sans serveur) de gestion de gestion de documents, mais je ne veux pas un truc trop lourd, il faut que ce soit facile à maintenir, (ajout suppression de document). D’ailleurs je vais sûrement faire une petite base avec Access et une génération automatique des tableaux.
Et après réflexion, je vais utiliser les deux mais séparément.
Un menu principale avec l'arbre et des liens qui pointes sur des documents séparés, d'autant que ces document peuvent être du html mais aussi du word, pdf, excel, ....
Pour l'instant ce n'est qu'un projet.
Encore merci pour cette source, même si mon choix n'est pas encore arrêté.
JJDAI
Messages postés
122
Date d'inscription
mardi 19 novembre 2002
Statut
Membre
Dernière intervention
10 mars 2011

Salut!

je sais que c'est un peu dommage, mais quand on voit ce que proposent d'autres librairies (comme jQuery, mootools ou ExtJs), on se dit que bon, réinventer la roue, c'est chouette pour l'apprentissage, mais après... ;-)

mais bref! Ceci dit, pour la doc, c'est du fait main pur et dur. Pas de dynamisme ou quoi que ce soit. Là-dessus, pas de quoi s'éterniser trop. Si tu veux faire un mixe, ce n'est peut-être pas impossible. Sachant qu'un noeud de l'arbre peut contenir du HTML, tu peux le styler un max pour qu'au moment où tu l'ouvres, ça déchire visuellement. Tu devrais pouvoir t'en sortir avec les CSS.

Bonne chance!
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015

Bonjour:

Citation:
Je n'ai pas encore mis à jour le site, mais je vais malheureusement laisser tomber le dev de cet arbre. ....

C'est bien dommage, car il me plais bien cet arbre, et je vais quand même l'utiliser malgré tout.

Une petite question subsidiaire, en jetant un œil sur la doc, je me suis rendu compte que ce qu’il me fallait c’était un mixte entre l'arbre, et la technique utilisées dans la doc.
Y a t-il un outil ou une librairie pour générer une doc comme ça (avec les paragraphe qui s'ouvre e se ferment l'insertion de code colorisé, ...)

JJDAI
Messages postés
1
Date d'inscription
samedi 20 octobre 2007
Statut
Membre
Dernière intervention
4 novembre 2008

Bonjour, j'essai de generer une stucture en passant par ajax (en m'inspirant de json ^^) mais rien ne s'affiche voilà mon code pour recupérer la structure

function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
var struct = [ file('/admin/arborescence_list.php') ];

ma page php appelé
<?php
/*
* Programme: arborescence_liste.php
* Description: page qui va récupérer l'arbo dans la bdd
*/

$selectTarget = <<<eod
select * from TARGET
eod;
$stmt = $database->execute($selectTarget);

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
$json = "";
//$json .= "[";
$rc = false;
//récupération des objectifs
while ($row = $database->next_array($stmt))
{
if($rc) $json .= ", ";
$json .= <<<eod
{\n
'id' : '$row[ID_TARGET]',\n
'txt' : '$row[TARGET_NAME]'
eod;
//récupération des compéténces associées à l'objectif
$selectCompetence = <<<eod

eod;
$stmtComp = $database->execute($selectCompetence);
if($database->return_row($stmtComp) >= 1) $json .= " ,items : [\n";
$rc2 = false;
while ($rowComp = $database->next_array($stmtComp))
{
if($rc2) $json .= ",";
$json .= <<<eod
{
'id' : '$rowComp[ID_COMPETENCE]',
'txt' : '$rowComp[COMPETENCE_NAME]'
eod;
// récupération des activités associées
$selectActivities = <<<eod

eod;
$stmtAct = $database->execute($selectActivities);
if($database->return_row($stmtAct) >= 1) $json .= ", items : [\n";
$rc3 = false;
while($rowAct = $database->next_array($stmtAct))
{
if($rc3) $json .= ", ";
$json .= <<<eod
{
'id' : '$rowAct[ID_ACTIVITY]',
'txt' : '$rowAct[ACTIVITY_TITLE]'
}
eod;
$rc3 = true;
}
if ($rc3) $json .= "]\n";
$json .= "}\n";
$rc2 = true;
}
if($rc2) $json .= "]\n";
$json .= "}\n";
$rc = true;
}
//$json .= "]";
echo $json;
?>
Messages postés
122
Date d'inscription
mardi 19 novembre 2002
Statut
Membre
Dernière intervention
10 mars 2011

Salut à toutes z'et à tous,

Je n'ai pas encore mis à jour le site, mais je vais malheureusement laisser tomber le dev de cet arbre. Ce n'est pas par flemme, loin de là ;-). Mais je l'avais conçu au départ parce que rien de similaire n'existait à l'époque. Depuis un peu plus d'une année, une librairie excellente a vu le jour, du nom de Ext JS (http://www.extjs.com). Je précise que ce n'est pas de la pub gratuite. C'est vraiment une alternative SUPERBE à mon arbre. Cette librairie est énorme (non mais franchement, ils ont fait du très très bon boulot) et elle contient plein de choses, dont un arbre qui est ultra performant. Je l'utilise maintenant en lieu et place du mien et j'arrive à faire tout ce que je faisais avec le mien. Son utilisation est évidemment différente, mais une fois qu'on l'a en main, c'est de la vrai bombe!

quelques exemples:
drag&drop pour gérer l'ordre des éléments: http://www.extjs.com/deploy/dev/examples/tree/reorder.html
"tree-table" superbe : http://www.extjs.com/deploy/dev/examples/tree/column-tree.html
drag&drop entre arbres : http://www.extjs.com/deploy/dev/examples/tree/two-trees.html

Pour voir comment c'est fait, ils proposent le fichier js en download. Il y a besoin que de 3 include pour faire marcher le binz:
1) ext-all.css
2) ext-base.js
3) ext-all.js

A noter un truc essentiel: Ext a plusieurs "adapteurs", c'est à dire que vous pouvez dire que tout le framework se base sur Prototype.js, Yahoo-utiils ou un truc Ext-made. Donc si vous utilisez déjà Prototype, ben y'a pas de soucis, vous pouvez continuer à l'utiliser. Bref, c'est énorme.

Voilà encore quelques autres liens:
introduction: http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0
faq: http://extjs.com/learn/Ext_FAQ

Cette librairie est bien entendu gratuite, sous licence LGPL (quoiqu'ils sont entrain de passer en GPL). Plus d'info ici: http://www.extjs.com/products/license.php

Par ailleurs, Ext est maintenu par une foule de développeurs pro, contrairement au mien où je suis seul dessus (et pour dire franchement, ça fait bientôt 6 mois que je n'y ai plus retouché du tout...)
Bref, pour toutes ces raisons, j'ai stoppé le dev de mon arbre, parce qu'à terme, il ne fonctionnera plus. En terme de pérennité, Ext est un choix nettement meilleur, sincérement. Je profite maintenant du boulot des autres. ça fait du bien, de temps en temps :-)!

Aller, encore désolé, mais bonne chance pour la suite!
Afficher les 65 commentaires

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.