doc

TafelTree-view (Javascript)

Treeview basé sur la libraire Script Aculous

Exemples

Drag & Drop simple

Voici comment faire un drag&drop simple au sein d'un même arbre

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

var tree1 = null;

///

// Fonction de drop

//

// Appelée une fois avant que le drop soit effectif (quand

// finished = false) et une fois après (quand finished vaut

// true)

//

// Retourner true permettra de valider le drop

///

function funcDrop1 (move, drop, finished) {

if (!finished) {

if (confirm('Tu confirmes le drop ?')) {

return true;

} else {

return false;

}

} else {

alert ('Le drop est effectué');

}

}

 

///

// Génération de l'arbre avec une fonction de drop

///

function TafelTreeInit () {

tree1 = new TafelTree ('drag1', struct1, {

'generate' : true,

'imgBase' : 'imgs/',

'defaultImg' : 'page.gif',

'defaultImgOpen' : 'folderopen.gif',

'defaultImgClose' : 'folder.gif',

'onDrop' : funcDrop1,

'behaviourDrop' : 'child', // child ou sibling

// ou childcopy ou siblingcopy

'dropALT' : true, // defaut : true

'dropCTRL' : true // defaut : true

});

}

 

Drag & Drop simple entre deux arbres

Il est possible de faire des drag&drop entre deux ou plusieurs arbres. Voici un exemple basique d'un échange entre deux arbres

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

///

// Fonction de drop pour l'exemple 2

///

function funcDrop2 (move, drop, finished) {

// On ne vérifie pas le drop. Il se fera quoiqu'il arrive

if (finished) {

var _drag = move.getText();

var _drop = drop.getText();

var _treeMove = move.tree.id;

var _treeDrop = drop.tree.id;

alert ('Droppé ' + _drag + ' (' + _treeMove + ') sur '

+ _drop + ' ('+ _treeDrop + ')');

}

// Ne pas oublier de retourner true, sinon le drop sera

// ineffectif

return true;

}

 

///

// La génération de tous les arbres se fait dans la fonction

// TafelTreeInit()

///

function TafelTreeInit () {

tree1b = new TafelTree ('drag1b', struct1, {

'generate' : true,

'imgBase' : 'imgs/',

'defaultImg' : 'page.gif',

'defaultImgOpen' : 'folderopen.gif',

'defaultImgClose' : 'folder.gif',

'onDrop' : funcDrop2

});

tree2 = new TafelTree ('drag2', struct2, {

'generate' : true,

'rtlMode' : true, // Pour le fun : right-to-left Mode

'imgBase' : 'imgs/',

'defaultImg' : 'globe.gif',

'defaultImgOpen' : 'imgfolder.gif',

'defaultImgClose' : 'folder.gif',

'onDrop' : funcDrop2,

'bind' : [tree1]

});

}

 
 

Drag & Drop en copie

On peut faire des drag&drop où la branche est copiée (et non déplacée). Par défaut, il faut appuyer sur CTRL au moment du drop. On peut aussi setter le copyDrag comme comportement par défaut grâce à setBehaviourDrop(). Dans l'exemple ci-dessous, on va manipuler une branche copiée suite à un drag&drop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

///

// Fonction de drop pour l'exemple de copie

///

function funcDropCopy (move, drop, finished, copy) {

// On attend que le drop soit fait. On récupère la branche

// copiée et on lui change son texte

if (finished) {

if (copy) {

// Dans ce cas précis, on ne s'occupe pas des

// enfants, mais uniquement de la branche droppée

copy.setText(move.getText() + " copiée");

}

}

return true;

}

 

 

///

// La génération de l'arbre dans TafelTreeInit()

///

function TafelTreeInit () {

treeCopy = new TafelTree ("dragCopy", structCopy, {

"generate" : true,

"imgBase" : "imgs/",

"defaultImg" : "page.gif",

"defaultImgOpen" : "folderopen.gif",

"defaultImgClose" : "folder.gif",

"onDrop" : funcDropCopy,

"behaviourDrop" : "childcopy"

});

}

 

Drag & Drop Ajax 1

Le drag&drop ajax intègre nativement la gestion des réponses serveurs. Très utile notamment pour valider un drop de manière complexe (nécessitant des requêtes sur une base de données, par exemple)

Ci-dessous le fichier PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<?php

 

$okDrop = false;

$msg = 'Erreur dans POST';

 

// On vérifie qu'il y a bien quelque chose qui vient

// de la page en POST

// Les variables disponibles sont :

// - drag = JSON de la branche qui a bougé

// - drop = JSON de la branche sur laquelle on a déposé le drag

// - drag_id = id de la branche qui a bougé

// - drop_id = id de la branche sur laquelle on a déposé le drag_id

// - treedrag_id = id de l'arbre d'où est tiré la branche qui a bougé

// - treedrop_id = id de l'arbre qui accueille la branche qui a bougé

// - sibling = 0 si on le drop comme fils, 1 s'il est comme frère

if (isset($_POST['drop'])) {

 

// Toutes les variables viennent en POST. Pas

// de GET ici

 

// Récupération des ids (élément drag et drop)

$dragID = $_POST['drag_id'];

$dropID = $_POST['drop_id'];

 

// On peut vérifier s'il s'agit d'un drop "as

// sibling" ou "as child"

if (!$_POST['sibling']){

// Droppé comme nouvelle fille

// check si on peut faire le drop ou non

$okDrop = true;

$msg = 'Tout est ok';

} else {

// Droppé comme nouvelle soeur (même niveau)

// check si on peut faire le drop ou non

$okDrop = false;

$msg = 'On ne drop pas comme soeur!';

}

}

 

 

// Ici, on renvoie un objet JSON (carrément!). Il faut

// savoir que la réponse peut être absolument n'importe

// quoi. Il faut juste la traiter comme il faut en

// Javascript après...

if ($okDrop) {

echo "({";

echo "'ok' : true,";

echo "'msg' : '".$msg."'";

echo "})";

} else {

echo "({";

echo "'ok' : false,";

echo "'msg' : '".$msg."'";

echo "})";

}

 

?>

 

Puis le code Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// Fonction de drop Ajax

function funcDrop3 (move, drop, response, finished) {

// On vérifie avant que le drop soit fait. A ce moment là

// la requête Ajax est effectuée, mais pas le drop.

if (!finished) {

// On évalue la réponse Ajax. L'objet contient donc

// une propriété "ok" et une autre "msg"

var obj = eval(response);

if (!obj.ok) {

alert ('Problème : ' + obj.msg);

return false;

}

}

return true;

}

 

///

// Génération de l'arbre avec une fonction de drop

///

function TafelTreeInit () {

tree3 = new TafelTree ('drag3', struct3, {

'generate' : true,

'imgBase' : 'imgs/',

'defaultImg' : 'page.gif',

'defaultImgOpen' : 'folderopen.gif',

'defaultImgClose' : 'folder.gif',

'onDropAjax' : [funcDrop3, 'server/sampleDrop1.php']

});

}

 

Essaie maintenant de faire un drag&drop en gardant ALT appuyé... Surprise ? N'y aurait-il pas, par hasard, une alert te signigiant qu'il y a un problème ? Espérons-le, sinon ça veut dire que mon arbre marche pô...

A noter que dans cet exemple, il aurait suffit d'ajouter "dropALT : false" dans le constructeur de l'arbre pour faire la même chose. Disons que c'était juste pou l'exemple, quoi.

Téléchargement

Télécharger la version v1.9.1

Cliquez ici

 

Documentation

Une documentation complète est accessible ici

 

Smarty

Un module Smarty a été développé pour l'arbre. Merci à Abalam! Module smarty

 

Ils l'utilisent

Déjà des projets intègrent cette librairie.
 

Treeview JS TafelTree

2007-07-23, Tafel. Optimisé pour Mozilla Firefox