TREEVIEW TAFELTREE
cs_Kimjoa
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
27 août 2006 à 03:44
Utilisateur anonyme - 10 juin 2011 à 16:21
Utilisateur anonyme - 10 juin 2011 à 16:21
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/39199-treeview-tafeltree
https://codes-sources.commentcamarche.net/source/39199-treeview-tafeltree
10 juin 2011 à 16:21
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
10 juin 2011 à 15:45
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!
10 juin 2011 à 15:37
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
4 nov. 2008 à 17:02
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;
?>
22 mai 2008 à 23:05
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!
21 mai 2008 à 21:10
Par contre, j'ai un soucis, il met impossible d'aller sur ton forum, car il me prend tout le temps pour un spam :-(
Alors je pose ma question ici. J'ai fait un formulaire pour qu'on puisse ajouter le nom qu'on veut a une branche et je l'insère avec la fonction branch.insertIntoLast(item); prévu à cet effet. Il m'ajout la branche une fois que j'ai cliqué sur mon bouton et 1 sec après elle disparaît quand ma page se recharge. Peux-tu me dire comment faire pour qu'elle reste?
16 mai 2008 à 01:06
Quel superbe composant et surtout avec une doc comme je n'en ai jamais vue !
30 déc. 2007 à 21:00
Parcontre, il est vrai que si tu arrives à afficher l'arbre aussi rapidement que dans tigramenu ca serait génial. Mais je ne vois pas trop la différence avec tigra treemenu sur le format final d'affichage de l'arbre.
Cordialement,
Daniel
30 déc. 2007 à 17:03
alors non, pas vraiment, en fait. Il faut que je fasse une refonte complète de la structure de l'arbre. Cela dit, tu peux regardere du coté de "onOpenPopulate", qui te permet de charger les noeuds petit-à-petit. Regarde sur le forum du site (tafel.developpez.com).
a+!
rekam
29 déc. 2007 à 22:10
Existe t'il une solution permettant d'optimiser le temps d'affichage(hormis l'utilisation du fichier js optimiser)? A moins qu'il y est une erreur de mon côté mais tous s'affiche parfaitement sans erreur de js.
Merci encore pour ce magnifique travail.
6 déc. 2007 à 10:23
j'ai pu régler mon poblème grace à rekam ;) merci encore
a +
3 déc. 2007 à 11:07
2 déc. 2007 à 22:51
bravo pour le big boulot vraiment impréssionnat
voilà je voudrais créer deux arbres l'un en dessous de l'autre
j'ai éssayé avec ce code mais il ne m'ffiche rien :(
svp aidez moi à y remédier car je galère là :s
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:/Mes Sites/Helpdesk/HELPDESK_WEB/tafelTree_1_9_1/tafelTree/css/tree.css" />
<script type="text/javascript" src="C:/Mes Sites/Helpdesk/HELPDESK_WEB/tafelTree_1_9_1/tafelTree/js/prototype.js"></script>
<script type="text/javascript" src="C:/Mes Sites/Helpdesk/HELPDESK_WEB/tafelTree_1_9_1/tafelTree/js/scriptaculous.js"></script>
<script type="text/javascript" src="C:/Mes Sites/Helpdesk/HELPDESK_WEB/tafelTree_1_9_1/tafelTree/Tree.js"></script>
</head>
<script type="text/javascript">
// Structure de base représentant une racine avec deux
// sous-branches
var struct = [
{
'id' : 'root_1',
'txt' : 'Admin',
'items' : [
{
'id' : 'branch_1',
'txt' : 'Utilisateur'
},{
'id' : 'branch_2',
'txt' : 'Types requètes '
}
]
}
];
</script>
<script type="text/javascript">
// 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' : 'C:/Mes Sites/Helpdesk/HELPDESK_WEB/tafelTree_1_9_1/tafelTree/imgs/',
'width' : '100%', // valeur par défaut : 100%
'height' : '150px', // valeur par défaut : auto
'openAtLoad' : true,
'cookies' : false
});
}
</script>
<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>
// deuxième arbre
<script type="text/javascript">
// Structure de base représentant une racine avec deux
// sous-branches
var struct = [
{
'id' : 'root_2',
'txt' : 'User',
'items' : [
{
'id' : 'branch_3',
'txt' : 'Créer'
},{
'id' : 'branch_4',
'txt' : 'Supprimer '
}
]
}
];
</script>
<script type="text/javascript">
// On déclare le tree à l'extérieur de la fonction.
// Ainsi, il sera accessible de manière globale.
var treee = null;
// Initialisation de l'arbre. Cette fonction est appelée
// automatiquement à la fin du load de la page
function TafelTreeInit () {
treee = new TafelTree('myTreee', structt, {
'generate' : true,
'imgBase' : 'C:/Mes Sites/Helpdesk/HELPDESK_WEB/tafelTree_1_9_1/tafelTree/imgs/',
'width' : '100%', // valeur par défaut : 100%
'height' : '150px', // valeur par défaut : auto
'openAtLoad' : true,
'cookies' : false
});
}
</script>
<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 structt = [
{
'id':'root2',
'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':'child2',
'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 treee = new TafelTree('test3', structt, {
'generate' : true,
'imgBase' : 'tree/imgs/',
'width' : '100%',
'height' : 'auto',
'defaultImg' : 'page.gif',
'defaultImgOpen' : 'folderopen.gif',
'defaultImgClose' : 'folder.gif'
});
</script>
</html>
bonne continuation
28 nov. 2007 à 09:45
Déjà bravo pour ce travail formidable, c'est bluffant!
Je travaille avec des jsp et j'aimerais afficher l'arborescence côté serveur pour y faire des manipulations sur les fichiers.
Votre script correspond à ce que je veux afficher mais je voudrais savoir si cela est faisable et comment, j'ai un peu de mal à relier votre script aux échanges avec le serveur.
Merci.
3 oct. 2007 à 10:31
3 août 2007 à 15:54
Merci :)
31 juil. 2007 à 11:31
Merci Merci!!
11 juin 2007 à 11:24
rebonjour , le transformer : l'adapter : garder l'aspet visuell en l'utilisant comme menu
[+]--{dossier}
|
|
[+]----{sous dossier}
|
|-----{ element 1 }
dynamique , visuell : l'ouverture des menu et sous menu par clic
10 juin 2007 à 22:15
salut, pourrais-tu poster ce problème dans le forum (http://tafel.developpez.com) avec de plus amples informations, genre tout ton code où ce qu'il te semble le plus pertinent ? si c'est un bug, c'est inquiétant.
>> gen76
salut aussi, le transformer, c'est-à-dire ? L'utiliser comme menu ? tu devrais pouvoir t'en sortir en utilisant la structure <li>, du style :
<li tid="b1">[lien1.html Lien 1]</li>
...etc...
a+
rekam
9 juin 2007 à 02:15
SVP pouvez vous m'aider a le transformer (si possible) : je veus utiliser le tree comme menu dans un cadre ( frame ) ?
merci
23 mai 2007 à 22:41
Une question:
j'ai pris le script exemple. J'ai ajouté un bouton dans le body de la page qui ajoute un item au noeud selectionné:
var selected = tree.getSelectedBranches();
for (var i = 0; i < selected.length; i++)
{
var item = {
"id" : "branch2"+i,
"txt" : "child last",
}
selected[i].insertIntoLast(item);
}
Mais ca ne marche pas. L'arbre me dit qu'il n'a pas de noeud selectionné. J'ai l'impression que le clic sur le bouton fait "perdre" le focus de l'item. Il reste coloré en bleu mais ne semble pas se considérer comme selectionné...
Quelqu'un a t il une réponse ?
25 avril 2007 à 15:08
Je te remercie!!!
Gwinyam
25 avril 2007 à 12:21
en l'occurrence, tu redéfinis ta variable "tree" dans la fonction TafelTreeInit(). Toi tu fais :
var tree = new TafelTree(..)
or tu dois faire :
tree = new TafelTree(...)
Le fait de ne pas mettre le "var" signifie que tu récupères la variable globale (je résume, mais en gros, c'est ce qui va se passer). Donc en ne mettant pas le "var", tu vas créer l'arbre dans le "tree" défini en amont. Là, ce que tu fais, c'est que tu définis une variable juste pour cette fonction, qui s'appelle "tree", certes, mais qui n'a rien à voir avec la variable globale.
Voilà, a+
rekam
25 avril 2007 à 09:47
Je te mets mon nouveau code:
<script type="text/javascript">
// Structure de base représentant une racine avec deux sous-branches
var struct=[
{
'id' : 'tete',
'txt' : 'Site',
'items' : [
{
'id' : '1',
'txt' : '<form action="" method="" onsubmit="desactiver(9); return false;">, </form>Accueil
'
},{
'id' : '2',
'txt' : '<form action="" method="" onsubmit="desactiver(10); return false;">, </form>Partenariat
'
},{
'id' : '3',
'txt' : '<form action="" method="" onsubmit="desactiver(11); return false;">, </form>News
'
,'items' : [
{
'id' : '4',
'txt' : '<form action="" method="" onsubmit="desactiver(13); return false;">, </form>Mon article 2
'
,'items' : [
{
'id' : '5',
'txt' : '<form action="" method="" onsubmit="desactiver(17); return false;">, </form>Détail article 2 A
'
,'items' : [
{
'id' : '6',
'txt' : '<form action="" method="" onsubmit="desactiver(18); return false;">, </form>Sous détail
'
}]},{
'id' : '7',
'txt' : '<form action="" method="" onsubmit="desactiver(19); return false;">, </form>Détail article 2 B
'
}]},{
'id' : '8',
'txt' : '<form action="" method="" onsubmit="desactiver(12); return false;">, </form>Mon article 1
'
}]},{
'id' : '9',
'txt' : '<form action="" method="" onsubmit="desactiver(14); return false;">, </form>Références
'
,'items' : [
{
'id' : '10',
'txt' : '<form action="" method="" onsubmit="desactiver(15); return false;">, </form>Sites internet
'
},{
'id' : '11',
'txt' : '<form action="" method="" onsubmit="desactiver(16); return false;">, </form>Logiciels
'
}]},{
'id' : '12',
'txt' : '<form action="" method="" onsubmit="desactiver(20); return false;">, </form>Contact1
'
},{
'id' : '13',
'txt' : '<form action="" method="" onsubmit="desactiver(21); return false;">, </form>Contact2
'
},{
'id' : '14',
'txt' : '<form action="" method="" onsubmit="desactiver(22); return false;">, </form>Evenements
'
} ]
}
];
// On déclare le tree à l'extérieur de la fonction. Ainsi, il sera accessible de manière globale.
var tree = null;
// Function de drop
function funcDrop1 (move, drop, finished)
{
if (!finished)
{
return true;
}
}
function funcDrop3 (move, drop, response, finished)
{
if (!finished)
{
var obj = eval(response);
}
return true;
}
// Initialisation de l'arbre. Cette fonction est appelée automatiquement à la fin du load de la page.
function TafelTreeInit ()
{
var tree = new TafelTree('myTree', struct, {
'generate' : true,
'imgBase' : 'imgs/',
'defaultImg' : 'page.gif',
'defaultImgOpen' : 'folderopen.gif',
'defaultImgClose' : 'folder.gif',
'behaviourDrop' : 'cibling',
'dropALT' : true,
'dropCTRL' : true,
'onDrop' : funcDrop1,
'showSelectedBranch' : false,
'cookies' : false,
'openAtLoad' : true,
'onDropAjax' : [funcDrop3, 'op/op.vide.php']
});
}
var handleSuccess = function(o)
{
if(o.responseText !== undefined)
{
alert(o.responseText);
}
};
var handleFailure = function(o)
{
if(o.responseText !== undefined)
{
chTXT = "Transaction id: " + o.tId + "\n";
chTXT += "HTTP status: " + o.status + "\n";
chTXT += "Status code message: " + o.statusText;
alert(chTXT);
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};
var sUrl = "";
var postData = "";
function sauvegarder()
{
var sUrl = "op/op.ordre.enreg.php";
var branch = tree.getBranchById("tete");
var postData = "arbre="+branch.serialize(true);
makeRequest(sUrl, postData);
return true;
}
function activer(id)
{
var sUrl = "op/op.art.activ.php";
var postData = "id="+id;
makeRequest(sUrl, postData);
return true;
}
function desactiver(id)
{
var sUrl = "op/op.art.desactiv.php";
var postData = "id="+id;
makeRequest(sUrl, postData);
return true;
}
function makeRequest(sUrl, postData)
{
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
}
</script>
Il me retourne toujours la même erreur...
25 avril 2007 à 08:50
c'est normal, à ce moment l'arbre n'est pas encore créé. La fonction TafelTreeInit() est appelée lorsque la page à fini de loader (onload event). Or ton "var branch = tree.getBranchById("tete");" est situé dans le flux normal de l'exécution du script :
function TafelTreeInit() {
tree = new TafelTree(...);
...
}
var branch = tree.getBranchById("tete");
Autrement dit, ce n'est pas parce que le "var branch=" est sous la fonction qu'il sera exécuté après.
Pour que ça marche, soit tu mets ça sous la création de l'arbre, mais toujours dans la fonction TafelTreeInit(), soit tu fais, par exemple, un onclick où tu exécutes ton "var branch=", comme ça, tu peux attendre patiemment le chargement de la page avant de le lancer.
a+
rekam
24 avril 2007 à 23:14
Je me mets mon bout de code en espérant que vous y verrez la solution:
<script type="text/javascript">
// Structure de base représentant une racine avec deux sous-branches
var struct=[
{
'id' : 'tete',
'txt' : 'Site',
'check' : 0,
'items' : [
{
'id' : '1',
'txt' : '[test.php ], Accueil
',
'check' : 0
},{
'id' : '2',
'txt' : '[test.php ], Partenariat
',
'check' : 0
},{
'id' : '3',
'txt' : '[test.php ], News
',
'check' : 0
,'items' : [
{
'id' : '4',
'txt' : '[test.php ], Mon article 2
',
'check' : 0
,'items' : [
{
'id' : '5',
'txt' : '[test.php ], Détail article 2 A
',
'check' : 0
,'items' : [
{
'id' : '6',
'txt' : '[test.php ], Sous détail
',
'check' : 0
}]},{
'id' : '7',
'txt' : '[test.php ], Détail article 2 B
',
'check' : 0
}]},{
'id' : '8',
'txt' : '[test.php ], Mon article 1
',
'check' : 0
}]},{
'id' : '9',
'txt' : '[test.php ], Références
',
'check' : 0
,'items' : [
{
'id' : '10',
'txt' : '[test.php ], Sites internet
',
'check' : 0
},{
'id' : '11',
'txt' : '[test.php ], Logiciels
',
'check' : 0
}]},{
'id' : '12',
'txt' : '[test.php ], Contact1
',
'check' : 0
},{
'id' : '13',
'txt' : '[test.php ], Contact2
',
'check' : 0
},{
'id' : '14',
'txt' : '[test.php ], Evenements
',
'check' : 0
} ]
}
];
// On déclare le tree à l'extérieur de la fonction. Ainsi, il sera accessible de manière globale.
var tree = null;
// Function de drop
function funcDrop1 (move, drop, finished)
{
if (!finished)
{
return true;
}
}
function funcDrop3 (move, drop, response, finished)
{
if (!finished)
{
var obj = eval(response);
}
return true;
}
// 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/',
'defaultImg' : 'page.gif',
'defaultImgOpen' : 'folderopen.gif',
'defaultImgClose' : 'folder.gif',
'behaviourDrop' : 'cibling',
'dropALT' : true,
'dropCTRL' : true,
'checkboxes' : true,
'onDrop' : funcDrop1,
'showSelectedBranch' : false,
'cookies' : false,
'openAtLoad' : true,
'onDropAjax' : [funcDrop3, 'op/op.vide.php']
});
}
var div = document.getElementById('container');
var handleSuccess = function(o)
{
if(o.responseText !== undefined)
{
alert("Sauvegarde Réussie\n"+o.responseText);
}
};
var handleFailure = function(o)
{
if(o.responseText !== undefined)
{
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};
var sUrl = "op/op.ordre.enreg.php";
var branch = tree.getBranchById("tete");
var postData = "arbre="+branch.serialize(true);
function makeRequest(){
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
}
</script>
Et il me retourne:
'tree' a la valeur Null ou n'est pas un objet.
Pour la ligne:
var branch = tree.getBranchById("tete");
J'avoue que je suis un peu embêté...si jamais vous trouvez, merci d'avance
24 avril 2007 à 22:29
23 avril 2007 à 23:35
Sinon, effectivement, j'ai fait bizarrement le "par défaut". Dans la prochaine version, ça va tout changer (je rassure les utilisateurs, il n'y aura pas de problèmes de compatibilité)
a+
rekam
23 avril 2007 à 15:04
Sincèrement, c'est un très bon script, il répond justement à un problème que je me posais pour un projet que je développe.
Contrairement aux autres commentaires, j'ai quelques remarques "négatives" sur ce script:
- Pourquoi ne pas avoir mis le drag&cibling de façon naturelle puis le drag&drop avec l'aide la touche ALT?
- bug: quand tu prends une branche que tu la mets au dessus de la branche principale avec la touche alt appuyée, automatiquement elle sort et là c'est fini elle est bloquée, j'ai essayé avec toutes les branches, après le menu est totalement bloqué, c'est pas cool...
Pour le drag&cibling, j'ai peut-être raté un truc dans la configuration, donc n'hésitez pas à me dire comme inverser ;)
Dans tous les cas merci pour ce superbe treeview de très haute qualité :)
20 janv. 2007 à 01:05
3 janv. 2007 à 10:34
et si jamais, y'a un forum sur le site pour les éventuels (et bien évidemment rares) problèmes.
a+!
rekam
28 déc. 2006 à 15:41
http://www.phpinsider.com/smarty-forum/viewtopic.php?p=37934#37934
Voici le code source de mon plug in smarty pour tafelTree :
<?php
/**
* Smarty plugin
* @package Smarty
* @subpackage plugins
*/
/**
* Smarty {tafelTree} function plugin
*
* Type: function
* Name: tafelTree
* Purpose: make a tafelTree from PHP array structure
* Version: 0.1
* @link http://tafel.developpez.com/
* @author Yann-Gaël GAUTHERON
* Example:
Note that values are javascript code or strings, if it's strings you must add a JS quote inside de PHP quote like
$struct = array(
array(
"id" => "'root0'"
,"txt" => "'root 0'"
)
,array(
'id' => "'root1'"
,'txt' => "'TafelTree JS'"
,'img' => "'base.gif'"
,'items' => array(
array(
'id' => "'child1'"
,'txt' => "'L\'objet en question'"
,'items' => array(
array(
'id' => "'child2'"
,'txt' => "'Ses méthodes'"
)
,array(
'id' => "'3'"
,'txt' => "'Ses propriétés'"
)
,array(
'id' => "'child4'"
,'txt' => "'Ses functions utilisateur (genre onclick)'"
,'onclick' => 'function(branch){alert("le texte de ce noeud est le suivant => \n" + branch.struct.txt);}'
,'items' => array(
array(
'id' => "'blu'"
,'txt' => "'hop'"
,'check' => 1
,'tooltip' => "'Mon joli tooltip'"
)
)
)
)
)
)
)
);
* @param array
* @param Smarty
* @return string
*/
function smarty_function_tafelTree($params, &$smarty)
{
/* Initialize */
$attributes = array(
'generate'=>"true",
'imgBase' => "'js/tafelTree/imgs/'",
'openAtLoad'=>"true",
'cookies'=>"true",
'multiline'=>"true",
'defaultImg'=>"'page.gif'",
'defaultImgSelected'=>"'globe.gif'",
'defaultImgOpen'=>"'folderopen.gif'",
'defaultImgClose'=>"'folder.gif'",
'defaultImgCloseSelected'=>"'unlock.gif'",
'defaultImgOpenSelected'=>"'imgfolder.gif'",
'rtlMode'=>"false",
'dropALT'=>"false",
'checkboxesThreeState'=>"true",
'behaviourDrop'=>"'sibling'",
);
foreach ($params as $_key=>$_value) {
switch ($_key) {
case 'struct':
case 'id':
$$_key = $_value;
break;
case 'generate':
case 'imgBase':
case 'openAtLoad':
case 'cookies':
case 'ondrop':
case 'multiline':
case 'defaultImg':
case 'defaultImgSelected':
case 'defaultImgOpen':
case 'defaultImgClose':
case 'defaultImgCloseSelected':
case 'defaultImgOpenSelected':
case 'rtlMode':
case 'dropALT':
case 'checkboxesThreeState':
case 'behaviourDrop':
case 'onclick':
$attributes[$_key] = (string)$_value;
break;
default:
$smarty->trigger_error("[tafelTree] parametre inconnu $_key", E_USER_WARNING);
}
}
if (empty($id) || empty($struct)) {
$smarty->trigger_error("[tafelTree] attribut 'id' et 'struct' requis");
return false;
}
$html .= '
';
$html .= '<script type="text/javascript">/*<![CDATA[*/';
function to_json($array) {
foreach ($array as $k => $i) {
if (is_array($i)) {
$i = to_json($i);
}
if ($array[0]) { /* Index numériques */
$data[] = $i;
} else { /* Index associatifs */
$data[] = "'".$k."':".$i;
}
}
$s = implode(",",$data);
if ($array[0]) { /* Index numériques */
return "[".$s."]";
} else { /* Index associatifs */
return "{".$s."}";
}
}
$html .= 'new TafelTree("'.$id.'", '.to_json($struct).', '.to_json($attributes).");";
$html .= '/*]]>*/</script>';
return $html;
}
?>
11 déc. 2006 à 10:37
J'ai également intégré un mode RTL (droite à gauche), histoire que l'arbre s'affiche à droite plutôt qu'à gauche.
a+
rekam
27 nov. 2006 à 10:31
http://tafel.developpez.com/
27 nov. 2006 à 10:26
Alors voilà, nouvelle mouture de site, et surtout : doc en anglais ! (mais pourquoi "surtout"...?) Enfin bref, plein de monde me demandaient une doc en anglais. Ainsi fut dzi, ainsi fut fait.
Mais rassurez-vous, la doc en français existe toujours et existera toujours! Vive Molière! A+
24 nov. 2006 à 16:27
Bravo !!
Nous avons développer un framework AJAX basé sur prototype.js : http://sourceforge.net/projects/salto-framework/
Je pense intégrer ta treeview si tu n'y vois pas d'inconvénient ;-)
Sinon, question subsidiaire, as-tu une doc en Anglais ?
Jerome
23 oct. 2006 à 13:21
a+!
rekam
6 oct. 2006 à 22:33
Bravo pour ce travail, je vais de ce pas essayer de mettre ton code oeuvre.
Si tu cherches un espace d'hebergement de meilleure qualite que lycos, contacte-moi.
Merci pour ta contribution.
PS: j'attend le drag© avec impatience (de preference avec un modificateur comme la touche Ctrl)
2 oct. 2006 à 17:17
oui c'est prévu. Le drag-clone, le multi-drag, le scroll-drag. Tout ça est prévu. La copie viendra plus vite que les autres, soit dit en passant :P
a+
rekam
2 oct. 2006 à 16:55
Super boulot, y'a pas à dire !
Dans le cas d'un drag'n drop, est-il (ou sera-t-il) de fonctionner en mode clône ? c'est à dire qu'il n'y ait pas un déplacement, mais plutôt une copie de l'élément ?
25 sept. 2006 à 15:41
Maintenant, on peut faire du "drop as sibling" en maintenant ALT appuyé pendant le drop. Il y a aussi un système d'options rajouté au constructeur. Exemple :
# var tree = new TafelTree('test2', struct, 'tree/imgs/', '100%', 'auto', {
# 'generate' : true,
# 'defaultImg' : 'page.gif',
# 'defaultImgOpen' : 'folderopen.gif',
# 'defaultImgClose' : 'folder.gif'
# });
En fait, toutes les fonctions à faire avant le generate() peuvent maintenant s'écrire comme ci-dessus (toujours plus d'infos sur mon site).
a+
rekam
24 sept. 2006 à 19:48
Dans ce cas, je n'ai rien dit ;)
23 sept. 2006 à 22:21
l'utilisation des cookies existe déjà. Enfait, à chaque fois que tu ouvres ou fermes une branche, ça sauve l'état dans un cookie. Ensuite, dans que le cookie est actif, l'état de l'arbre persiste (donc après une fermeture de l'arbre également). Mais effectivement, ça ne persiste pas pendant des jours. En tous les cas, tu peux recharger la page (ou la fermer, pour autant que je sache) et t'auras toujours le dernier état de l'arbre.
Est-ce bien là où tu voulais en venir ? a+
22 sept. 2006 à 19:38
Le travail est tout simplement magnifique, quoique légèrement trop complexe... il serait intéressant d'avoir une version light ;)
je trouverais aussi intéressant d'ajouter un service "session"...
En soit ca parait rébarbatif et pas facile à faire, mais le principe est simple : - dsl pour les notations, je part d'un code perso JS made in FremyCompany ;) -
function Tree(args) {
var This=this;
// ...
this.name=name;
this.saveOnExit=saveOnExit;
window.OnUnLoad.addHandler(function() {
if (This.saveOnExit && This.name) {
document.cookie=escape(This.name)+"="+escape(This.getHTML())
}
})
// ...
}
Tree.LoadFromSession(name) {
var This=new Tree(args)
try {
This.parseHTML(getCookieValue(name));
} finanlly {
return This;
}
}
Tree.prototype.parseHTML=function(HTML) {
var divContent=document.createElement("div");
divContent.innerHTML=HTML;
//
// L'étape la plus complexe à mettre en oeuvre
// Analyse du contenu
//
}
// Utilisation : page1
var t=new Tree(args, /*name*/"Tree1", /*saveOnExit*/ true);
// Utilisation : page2
var t=Tree.LoadFromSession("Tree1")
22 sept. 2006 à 10:51
la prochaine mise à jour aura un "drag&drop" pour les ordonner entre eux (en maintenant ALT appuyé lors du drop...)
Je vais tâcher de mettre tout ça en ligne ce we, si j'arrive à capter internet chez moi....
a+
21 sept. 2006 à 14:16
Mais il lui manque encore une chose, je trouve : pouvoir drag'n dropper les items pour les ordonner entre eux (car jusque là le drag'n drop se fait pour entrer ou sortir un noeud dans un un autre noeud).
Voilà ma petite contribution ergonomique.
Merci et Bravo !!!
7 sept. 2006 à 17:41
1 sept. 2006 à 20:58
Merci beaucoup !
1 sept. 2006 à 17:41
enjoy!
rekam
1 sept. 2006 à 14:10
Ajout de la fonctionnalité " tooltip ". De plus, j'ai rajouté branch.getText(), getIcon(), getOpenIcon(), getCloseIcon(), getCurrentIcon, setIcons(), setText() et getChildren().
Pour les tooltip, c'est très simple : lorsqu'on paramètre la branche, on fait "tooltip" : "Mon toolTip" et voilà !
au plaisir
31 août 2006 à 14:34
c'est une structure hyper utile,
bravo aux deV et génial cS .
31 août 2006 à 14:15
Cette string est la représentation JSON de la structure, donc par exemple, s'il y a juste une racine avec une branche, on aura :
[{'id':'root','txt':'Root','items':[{'id':'branche','txt':'Branche'}]}]
A+!
31 août 2006 à 09:22
31 août 2006 à 09:21
oui, c'est possible ! Il y a un problème d'affichage. L'élément draggé est caché lorsqu'on sort du DIV. C'est évitable en mettant overflow: visible dans tafel.css.
Sinon, c'est la méthode bind() qui permet de faire ça :
var t1 = new TafelTree('div1', struct1);
var t2 = new TafelTree('div2', struct2);
t1.bind(t2);
Et voilà, ensuite le drag&drop devient possible entre les deux arbres.
a+!
31 août 2006 à 00:40
très beau travail !
Est-il possible de faire du drag & drap entre 2 arbres différents ? Si oui comment mettre ça en place ?
Merci !
30 août 2006 à 09:42
Bon je garde ce code sous le coude, ça me servira sûrement pour le boulot ;) mais pas pour tout de suite.
30 août 2006 à 09:26
J'ai rajouté une fonction bien utile, qui est " monTree.setOnOpenPopulate(func, link) " et qui sert à loader les enfants lorsqu'on ouvre la branche. En gros, c'est simple, il suffit de dire que la branche peut avoir des enfants avec la propriété " canhavechildren ", et ensuite spécifier la méthode javascript et le lien vers la page serveur. Et le tour est joué !
Pour des infos plus détaillées, comme d'hab, c'est sur le site :
http://membres.lycos.fr/tafelmak/arbre.php
28 août 2006 à 18:02
28 août 2006 à 17:14
c'est étonnant tout ce qu'on ( que tu )
peut faire avec javascript .
je me demandais un truc quand même,
le nouveau TreeView ( modifié par le client ),
est ce qu'il est possible de le récupérer
après l'avoir édité :
par exemple avec un bouton "envoyer" .
et on récupèrerai dans une classe php par exemple .
en tout cas c'est SUPER !!!
je me souviens quand j'était en 1ère année de fac (Ya 4 ans),
le javascript faisait pas 1/10ème de ce qu'on trouve aujourd'hui .
aller a ciao,
bonne continuation .
28 août 2006 à 11:56
Merci
28 août 2006 à 11:13
28 août 2006 à 10:26
Bonne continuation.
28 août 2006 à 10:13
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
28 août 2006 à 06:39
et je confirme que ça marche avec Opera 9.01 (Windows) !
27 août 2006 à 03:44