TREEVIEW TAFELTREE

Commentaire de iubito le 28/08/2006 06:39:35

Excellent ! (je ne vois pas quoi dire d'autre !)

et je confirme que ça marche avec Opera 9.01 (Windows) !

Commentaire de vduffaut le 28/08/2006 10:26:50

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.

Commentaire de vduffaut le 28/08/2006 11:56:13

Effectiement le ZIP est correct. Sans doute le problème d'heure est le bon.
Merci

Commentaire de rekam le 28/08/2006 18:02:30

Hello, la sérialisation est possible. Elle existe déjà plus ou moins (méthode toString). Cependant, ce que tu dis là est complètement envisageable, moyennant un peu de prog. Je vais m'y atteler bientôt, mais je vais d'abords terminer une fonctionnalité très utile que je suis entrain de développer. Je vous tiens tous au courant! A+

Commentaire de iubito le 30/08/2006 09:42:54

C'est une bonne idée ça !

Bon je garde ce code sous le coude, ça me servira sûrement pour le boulot ;) mais pas pour tout de suite.

Commentaire de rekam le 31/08/2006 09:21:25

Salut,

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+!

Commentaire de rekam le 31/08/2006 14:15:15

ET VOILA, cher (ou chère...) jmecodol, on peut dorénavent obtenir la structure courante de l'arbre en appelant la méthode " serialize() " (applicable autant à l'arbre tout entier qu'à une branche en particulier).

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+!

Commentaire de rekam le 01/09/2006 14:10:30

Et encore des nouveautés, pour les interessés :

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

Commentaire de voisinpi le 01/09/2006 20:58:50

Très bon boulot ! Ça tombe à pic, je cherchais justement un composant de ce type, efficace et complet, et je venais de découvrir prototype et aculous en me disant que j'allais essayer de le mettre en oeuvre... :)

Merci beaucoup !

Commentaire de chalutvous le 21/09/2006 14:16:19

Cet outil à tout pour plaire !!!
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 !!!

Commentaire de FREMYCOMPANY le 22/09/2006 19:38:18

Salut,

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")

Commentaire de FREMYCOMPANY le 24/09/2006 19:48:03

En effet, je n'avais pas vu que tu avais prévu cette option aussi...

Dans ce cas, je n'ai rien dit ;)

Commentaire de darhackiem le 02/10/2006 16:55:34

Bonjour !
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 ?

Commentaire de digit_al le 06/10/2006 22:33:48

Salut Rekam,

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&copy avec impatience (de preference avec un modificateur comme la touche Ctrl)

Commentaire de denolfj le 24/11/2006 16:27:00

Magnifique , joli et stable !! Et en plus il y a de la doc !!!

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

Commentaire de rekam le 27/11/2006 10:31:01

Oui, j'ai oublié de dire que l'adresse du site a changé. Maintenant c'est :

http://tafel.developpez.com/

Commentaire de Abalam2 le 28/12/2006 15:41:28

Comme ajouté sur le forum de smarty ici :
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 <abalam -at- aewd -dot- net>
* 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' => "'<span>Ses méthodes</span>'"
                     )
                     ,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 .= '<div id="'.$id.'"></div>';
   $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;
}
?>

Commentaire de rekam le 20/01/2007 01:05:21

Et hop, encore une mise à jour! Avec pas mal d'optimisation et surtout l'ajout de switchWith() et replace() pour les branches

Commentaire de rekam le 23/04/2007 23:35:05

Tout à fait juste lorsqu'on drop une branche en position de root, elle se coïnce, car pour l'instant, je rencontre des problèmes de redrag&drop sur ce niveau...

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

Commentaire de Gwinyam le 24/04/2007 23:14:22

En fait j'ai un problème par contre avec la serialisation, je n'arrive pas à l'effecteur tout simplement...

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' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Accueil</td></tr></table>',
'check' : 0

},{
'id' : '2',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Partenariat</td></tr></table>',
'check' : 0

},{
'id' : '3',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>News</td></tr></table>',
'check' : 0
,'items' : [
{
'id' : '4',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Mon article 2</td></tr></table>',
'check' : 0
,'items' : [
{
'id' : '5',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Détail article 2 A</td></tr></table>',
'check' : 0
,'items' : [
{
'id' : '6',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Sous détail</td></tr></table>',
'check' : 0
}]},{
'id' : '7',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Détail article 2 B</td></tr></table>',
'check' : 0
}]},{
'id' : '8',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Mon article 1</td></tr></table>',
'check' : 0
}]},{
'id' : '9',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Références</td></tr></table>',
'check' : 0
,'items' : [
{
'id' : '10',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Sites internet</td></tr></table>',
'check' : 0

},{
'id' : '11',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Logiciels</td></tr></table>',
'check' : 0
}]},{
'id' : '12',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Contact1</td></tr></table>',
'check' : 0

},{
'id' : '13',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Contact2</td></tr></table>',
'check' : 0

},{
'id' : '14',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="test.php"><img src="imgs/lock.gif" border="0" alt="D&eacute;sctiver"></a></td><td>Evenements</td></tr></table>',
'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>
<div id="myTree" style="position: absolute; top: 120px;"></div>

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

Commentaire de Gwinyam le 25/04/2007 09:47:48

Euh...ça marche pas pour autant en fait...

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' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(9); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Accueil</td></tr></table>'

},{
'id' : '2',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(10); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Partenariat</td></tr></table>'

},{
'id' : '3',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(11); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>News</td></tr></table>'
,'items' : [
{
'id' : '4',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(13); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Mon article 2</td></tr></table>'
,'items' : [
{
'id' : '5',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(17); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Détail article 2 A</td></tr></table>'
,'items' : [
{
'id' : '6',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(18); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Sous détail</td></tr></table>'
}]},{
'id' : '7',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(19); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Détail article 2 B</td></tr></table>'
}]},{
'id' : '8',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(12); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Mon article 1</td></tr></table>'
}]},{
'id' : '9',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(14); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Références</td></tr></table>'
,'items' : [
{
'id' : '10',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(15); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Sites internet</td></tr></table>'

},{
'id' : '11',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(16); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Logiciels</td></tr></table>'
}]},{
'id' : '12',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(20); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Contact1</td></tr></table>'

},{
'id' : '13',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(21); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Contact2</td></tr></table>'

},{
'id' : '14',
'txt' : '<table border="0" cellpadding="0" cellspacing="0"><tr><form action="" method="" onsubmit="desactiver(22); return false;"><td><input type="image" src="imgs/lock.gif" /></td></form><td>Evenements</td></tr></table>'

} ]
}
];


// 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>
<div id="myTree" style="position: absolute; top: 120px;"></div>
<input type="button" onclick="sauvegarder();" value="test" style="position: absolute; top: 420px;">

Il me retourne toujours la même erreur...

Commentaire de Gwinyam le 25/04/2007 15:08:12

En effet, bien vu.

Je te remercie!!!
Gwinyam

Commentaire de gen76 le 09/06/2007 02:15:14

super !

SVP pouvez vous m'aider a le transformer (si possible) : je veus utiliser le tree comme menu dans un cadre ( frame ) ?

merci

Commentaire de gen76 le 11/06/2007 11:24:53

>> REKAM

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

Commentaire de ThoMiNou le 03/08/2007 15:54:53

Est-ce qu'il serait possible d'avoir un exemple de l'utilisation de la méthode onOpenPopulate un peu plus concret que dans la documentation?

Merci :)

Commentaire de coubi64 le 28/11/2007 09:45:28

Bonjour,

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.

Commentaire de kubiac88 le 03/12/2007 11:07:19

Vraiment nickel, 10/10.

Commentaire de DanaX le 29/12/2007 22:10:02

Tout d'abord je tiens à te remercier pour ce magnifique exemple de code propre et proposant des fonctionnalitées incroyables que je n'ai pu retrouver ailleurs. Cependant, le temps d'affichage est assez long pour environ 200 noeuds, l'affichage prend 7-8 secondes ce qui est génant en comparaison du treeview tigra treemenu.
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.

Commentaire de DanaX le 30/12/2007 21:00:05

Merci pour ta réponse rapide, j'avoue avoir pensé à cette solution mais je ne peux accéder aux forums => affichage d'un message 'Ah ben pas de bol, vous êtes considéré comme spam. Pour utiliser le forum, il vous faut passer par le site officiel : par ici' et j'ai beau essayé de créer un compte ou autre ca affiche ce message.

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

Commentaire de Noizet le 21/05/2008 21:10:21

En tout cas, superbe code!
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?

Commentaire de norgong le 04/11/2008 17:02:44

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;
?>

Commentaire de rekam le 10/06/2011 15:45:35

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!