TafelTree-view (Javascript)

Treeview basé sur la libraire Script Aculous

Documentation

Documentation offline

Format HTML

TafelTree est un arbre Javascript open source qui permet de faire énormément de choses, ou presque. Il est basé sur JSON et DOM, notamment. La structure HTML, complètement transparente (l'utilisateur touille tout via du javascript, bien entendu) est comme ceci :

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

<td class="canevas"><div class="content">Racine</div></td>

</tr></tbody></table>

Enfant 1</div></td>

</tr></tbody></table>

</div>

Enfant 2</div></td>

</tr></tbody></table>

<td><img class="openable"

src="../imgs/line2.gif"/></td>

Enfant avec enfant</div></td>

</tr></tbody></table>

</div>

Propriétés TafelTreeBranch de structure

Propriétés TafelTreeBranch basiques

id (string)

Obligatoire

L'id utilisateur de la branche. Doit être unique. Attention, donc, lors de drag'n drop entre deux arbres, de bien vérifier que le tag de l'élément dropé n'existe pas encore.

1
2
3
4
5
6
7
8

var branch = {

"id" : "myId",

"txt" : "My super text"

}

// UL - LI

<li id="myId">My super text</li>

txt (string)

Obligatoire

Le texte affiché à coté de l'icône

1
2
3
4
5
6
7
8

var branch = {

"id" : "myId",

"txt" : "My super text"

}

// UL - LI

<li id="myId">My super text</li>

acceptdrop (boolean)

Optionnel. Par défaut : true

True pour pouvoir droper des éléments sur la branche, false pour rendre cette action impossible.

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"acceptdrop" : true

}

// UL - LI

<li id="myId" Tacceptdrop="1">My super text</li>

canhavechildren (boolean)

Optionnel. Par défaut : false

Mettre true pour dire que la branche peut avoir des enfants. Est nécessaire lorsqu'on utilise la fonction onopenpopulate(). Cela permet de faire apparaître le " + " pour ouvrir la branche alors qu'elle n'a pas encore d'enfants.

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"canhavechildren" : true

}

// UL - LI

<li id="myId" Tcanhavechildren="1">My super text</li>

check (integer)

Optionnel. Par défaut : 0

Mettre 1 pour que la branche soit chechée d'office, s'il y a les checkboxes activées

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"check" : 1

}

// UL - LI

<li id="myId" Tcheck="1">My super text</li>

draggable (boolean)

Optionnel. Par défaut : true

True pour pouvoir dragger la branche, false pour rendre cette action impossible. N'a aucun effet s'il n'y a pas de fonction setOnDrop() ou setOnDropAjax() définie. (ou encore ondrop ou ondropajax)

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"draggable" : true

}

// UL - LI

<li id="myId" Tdraggable="1">My super text</li>

editable (boolean)

Optionnel. Par défaut : 1

Indique si la branche peut être éditée ou non. Si la fonciton onEdit() existe, mettre ce paramètre à false permet d'empêcher l'édition malgré tout

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"editable" : false

}

// UL - LI

<li id="myId" Teditable="0">My super text</li>

img (string)

Optionnel. Par défaut : pas d'image

L'icône affiché lorsque la branche n'a pas d'enfants.

1
2
3
4
5
6
7
8
9
10
11

var branch = {

"id" : "myId",

"txt" : "My super text",

"img" : "anImg.gif",

"imgopen" : "anImg.gif",

"imgclose" : "anImg.gif"

}

// UL - LI

<li id="myId" Timg="anImg.gif" Timgopen="anImg.gif" Timgclose="anImg.gif">My super text</li>

imgclose (string)

Optionnel. Par défaut : le même que img

L'icône affiché lorsque la branche a des enfants et est fermée.

1
2
3
4
5
6
7
8
9
10
11

var branch = {

"id" : "myId",

"txt" : "My super text",

"img" : "anImg.gif",

"imgopen" : "anImg.gif",

"imgclose" : "anImg.gif"

}

// UL - LI

<li id="myId" Timg="anImg.gif" Timgopen="anImg.gif" Timgclose="anImg.gif">My super text</li>

imgopen (string)

Optionnel. Par défaut : le même que img

L'icône affiché lorsque la branche a des enfants et est ouverte.

1
2
3
4
5
6
7
8
9
10
11

var branch = {

"id" : "myId",

"txt" : "My super text",

"img" : "anImg.gif",

"imgopen" : "anImg.gif",

"imgclose" : "anImg.gif"

}

// UL - LI

<li id="myId" Timg="anImg.gif" Timgopen="anImg.gif" Timgclose="anImg.gif">My super text</li>

imgselected (string)

Optionnel. Par défaut : le même que img

L'icône affiché lorsque la branche n'a pas d'enfants et est sélectionnée.

1
2
3
4
5
6
7
8
9
10

var branch = {

"id" : "myId",

"txt" : "My super text",

"imgselected" : "anImgSelect.gif",

"img" : "anImg.gif"

}

// UL - LI

<li id="myId" Timg="anImg.gif" Timgselected="anImgSelect.gif">My super text</li>

imgcloseselected (string)

Optionnel. Par défaut : le même que imgclose

L'icône affiché lorsque la branche a des enfants et est fermée et sélectionnée.

1
2
3
4
5
6
7
8
9
10

var branch = {

"id" : "myId",

"txt" : "My super text",

"imgcloseselected" : "anImgSelect.gif",

"imgclose" : "anImg.gif"

}

// UL - LI

<li id="myId" Timgcloseselected="anImgSelect.gif" Timgclose="anImg.gif">My super text</li>

imgopenselected (string)

Optionnel. Par défaut : le même que imgopen

L'icône affiché lorsque la branche a des enfants et est ouverte et sélectionnée.

1
2
3
4
5
6
7
8
9
10

var branch = {

"id" : "myId",

"txt" : "My super text",

"imgopenselected" : "anImgSelect.gif",

"imgopen" : "anImg.gif"

}

// UL - LI

<li id="myId" Timgopen="anImg.gif" Timgopenselected="anImgSelect.gif">My super text</li>

items (array)

Optionnel

Un tableau composé de branches. Représente les enfants de la branche

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

var branch = {

"id" : "myId",

"txt" : "My super text",

"items" : [

{

"id" : "child1",

"txt" : "Child 1",

"items" : [

{

"id" : "child1_1",

"txt" : "Child of child 1"

}

]

}, {

"id" : "child2",

"txt" : "Child 2"

}

]

}

// UL - LI

<li id="myId">My super text

<ul>

<li id="child1">Child 1

<ul>

<li id="child1_1">Child of child 1</li>

</ul>

</li>

<li id="child2">Child 2</li>

</ul>

</li>

last (boolean)

Optionnel. Par défaut : false

True pour toujours avoir la branche en dernière position dans l'arbre. Utilisé après le drop d'une branche, pour éviter que cette dernière ne se retrouve tout en bas.

1
2
3
4
5
6
7
8
9
10

var branch = {

"id" : "myId",

"txt" : "Trash",

"img" : "trash.gif",

"last" : true

}

// UL - LI

<li id="myId" Tlast="1">My super text</li>

open (boolean)

Optionnel. Par défaut, elle prend la valeur de l'arbre (setOpenAll()). Si la gestion des cookies est activée, celle-ci passe par-dessus tout.

True pour avoir la branche ouverte, false pour l'avoir fermée.

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"open" : true

}

// UL - LI

<li id="myId" Topen="1">My super text</li>

style (string)

Optionnel

Le nom d'une classe CSS qui s'appliquera uniquement au texte

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"style" : "aCSSclassName"

}

// UL - LI

<li id="myId" Tstyle="aCCSclassName">My super text</li>

title (string)

Optionnel

Le contenu de l'attribut HTML "title" du texte de la branche (équivalent au tooltip). Le title ne peut contenir que du texte.

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"title" : "My title"

}

// UL - LI

<li id="myId" Ttitle="My title">My super text</li>

tooltip (string)

Optionnel

Un tooltip qui s'affiche au survol de la branche avec la souris (équivalent au title). Le contenu peut être de l'HTML

1
2
3
4
5
6
7
8
9

var branch = {

"id" : "myId",

"txt" : "My super text",

"tooltip" : "Mon joli tooltip"

}

// UL - LI

<li id="myId" Ttooltip="Mon joli tooltip">My super text</li>

Notes

On peut y mettre de l'HTML. Attention toutefois avec les quotes ( ' ) et guillemets ( " )
Le tooltip est automatiquement inséré dans un DIV
Le style CSS s'appelle div.tooltip

Propriétés TafelTreeBranch de fonctions

onbeforecheck (function)

Propriétés

branch (TafelTreeBranch)	la branche qui va changer son status de check
checked (boolean)	Le status de la branche si le changement est validé

Optionnel

Méthode appelée lorsqu'on clique sur une checkbox, avant que le changement de status soit fait

1
2
3
4
5
6
7
8
9
10
11

function myBeforeCheck (branch, checked) {

alert(branch.getId());

return true;

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"onbeforecheck" : myBeforeCheck

}

onbeforeopen (function)

Propriétés

branch (TafelTreeBranch)	la branche qui va s'ouvrir
opened (boolean)	A true, la branche est ouverte et va donc se fermer. A false, c'est l'inverse

Optionnel

Méthode appelée juste avant d'ouvrir la branche. Elle doit retourner un boolean. Prend le pas sur la méthode setOnBeforeOpen() de TafelTree

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function myBeforeOpen (branch, opened) {

// Tests divers

if (resultsFromTest) {

// OK, la branche va s'ouvrir

return true;

} else {

// Ici, la branche ne s'ouvrira pas. La fonciton myOpen ne sera

// pas appelée

return false;

}

function myOpen (branch, opened) {

alert(branch.getTag());

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"onbeforeopen" : myBeforeOpen,

"onopen" : myOpen

}

oncheck (function)

Propriétés

branch (TafelTreeBranch)	la branche qui a changé son status de check
checked (boolean)	Le nouveau status de la branche

Optionnel

Méthode appelée lorsqu'on clique sur une checkbox

1
2
3
4
5
6
7
8
9
10

function myCheck (branch, checked) {

alert(branch.getId());

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"oncheck" : myCheck

}

onclick (function)

Propriétés

branch (TafelTreeBranch)	la branche sur laquelle on clique

Optionnel

Méthode appelée lorsqu'on clique sur le texte de la branche. Prend le pas sur la méthode setOnClick() de TafelTree

1
2
3
4
5
6
7
8
9
10

function myClick (branch) {

alert(branch.getId());

}

var branch = {

"id" : "tag1",

"txt" : "A branch click",

"onclick" : myClick

}

ondblclick (function)

Propriétés

branch (TafelTreeBranch)	la branche sur laquelle on double-clique

Optionnel

Méthode appelée lorsqu'on double-clique sur le texte de la branche. Prend le pas sur la méthode setOnDblClick() de TafelTree

1
2
3
4
5
6
7
8
9
10

function myDblClick (branch) {

alert(branch.getId());

}

var branch = {

"id" : "tag1",

"txt" : "A branch double-click",

"ondblclick" : myDblClick

}

ondrop (function)

Propriétés

branch_move (TafelTreeBranch)	la branche dragguée
branch_here (TafelTreeBranch)	La branche sur qui il y a eu le drop
drop_finished (boolean)	False si le drop n'est pas encore effectué, True si le drop est effectué
new_branch (boolean)	La branche insérée, s'il s'agit d'un copyDrag

Optionnel

Méthode appelée après avoir drag'n dropé la branche. Elle doit retourner un boolean. On peut faire un "drop as sibling (frère)" en gardant la touche ALT appuyée. Il est également possible de faire un "copydrag" en maintenant la touche CONTROL appuyée. Prend le pas sur la méthode setOnDrop() de TafelTree

La méthode est appelée deux fois. Une fois avant que le drop soit fait (drop_finished = false) et une fois après que le drop soit fait (drop_finished = true), pour autant qu'il n'y ait pas eu d'erreurs avant.

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

function myDrop (branch_move, branch_here, drop_finished,

new_branch) {

// Attention, cette fonction est appelée 2x. D'abord avant

// que le drop soit fait, puis ensuite après coup. Là, on

// teste si le drop n'a pas encore été effectué

if (!drop_finished) {

// Tests divers

if (resultsFromTest) {

// OK, la branche pourra être droppée ici

return true;

} else {

// Ici, la branche ne sera pas droppée et reviendra

// à sa place initiale

return false;

}

} else {

// On peut récupérer la nouvelle branche insérée

// s'il s'agit d'un copyDrag

if (new_branch) {

alert(new_branch.getId())

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"ondrop" : myDrop

}

Notes

Maintenir ALT pour dropper "as sibling"
Maintenir CONTROL pour faire un "copydrag"

onedit (function)

Propriétés

branch (TafelTreeBranch)	la branche qui a été éditée
newValue (string)	La nouvelle valeur qui sera enregistrée
oldValue (string)	L'ancienne valeur de la branche

Optionnel

Méthode appelée lorsqu'on édite une branche (précisément, après le blur() de l'input qui apparaît suite à un double-clic sur la branche)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function myEdit (branch, newValue, oldValue) {

if (newValue.toLowerCase() == "trop facile") {

return "Vraiment trop facile";

} else {

return newValue;

}

var branch = {

"id" : "tag1",

"txt" : "To be edited...",

"onedit" : myEdit

}

Notes

Retourne la string qui sera effectivement enregistrée

onmouseout (function)

Propriétés

branch (TafelTreeBranch)	la branche que la souris quitte

Optionnel

Méthode appelée lorsqu'on retire la souris du texte de la branche. Prend le pas sur la méthode setOnMouseOut() de TafelTree

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function myMouseOut (branch) {

alert("out : " + branch.getId());

}

function myMouseOver (branch) {

alert("over : " + branch.getId());

}

var branch = {

"id" : "tag1",

"txt" : "A branch mouse over and out",

"onmouseover" : myMouseOver,

"onmouseout" : myMouseOut

}

onmouseover (function)

Propriétés

branch (TafelTreeBranch)	la branche sur qui la souris passe

Optionnel

Méthode appelée lorsqu'on passe la souris sur le texte de la branche. Prend le pas sur la méthode setOnMouseOver() de TafelTree

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function myMouseOut (branch) {

alert("out : " + branch.getId());

}

function myMouseOver (branch) {

alert("over : " + branch.getId());

}

var branch = {

"id" : "tag1",

"txt" : "A branch mouse over and out",

"onmouseover" : myMouseOver,

"onmouseout" : myMouseOut

}

onmousedown (function)

Propriétés

branch (TafelTreeBranch)	la branche sur qui la souris passe

Optionnel

Méthode appelée lorsqu'on fait un mouse down sur la branche. Prend le pas sur la méthode setOnMouseDown() de TafelTree

1
2
3
4
5
6
7
8
9
10

function myMouseDown (branch) {

alert("down : " + branch.getId());

}

var branch = {

"id" : "tag1",

"txt" : "A branch mouse down",

"onmousedown" : myMouseDown

}

onmouseup (function)

Propriétés

branch (TafelTreeBranch)	la branche sur qui la souris passe

Optionnel

Méthode appelée lorsqu'on fait un mouse up sur la branche. Prend le pas sur la méthode setOnMouseUp() de TafelTree

1
2
3
4
5
6
7
8
9
10

function myMouseUp (branch) {

alert("up : " + branch.getId());

}

var branch = {

"id" : "tag1",

"txt" : "A branch mouse up",

"onmouseup" : myMouseUp

}

onopen (function)

Propriétés

branch (TafelTreeBranch)	la branche qui s'ouvre ou ferme
opened (boolean)	A true, la branche est ouverte, à false non

Optionnel

Méthode appelée après l'ouverture de la branche. Prend le pas sur la méthode setOnOpen() de TafelTree

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function myBeforeOpen (branch, opened) {

// Tests divers

if (resultsFromTest) {

// OK, la branche va s'ouvrir

return true;

} else {

// Ici, la branche ne s'ouvrira pas. La fonciton myOpen ne sera

// pas appelée

return false;

}

function myOpen (branch, opened) {

alert(branch.getTag());

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"onbeforeopen" : myBeforeOpen,

"onopen" : myOpen

}

Spécificités

onerrorajax(function)

Paramètres

type (string)	Le type d'erreur (open, drop ou edit)
response (string)	La réponse texte Ajax
branch (TafelTreeBranch)	La branche courante
droppedOn (TafelTreeBranch)	La branche sur laquelle il y a eu un drop (s'il s'agit d'un drop, évidemment)

Méthode appelée suite à une erreur dans une requête Ajax de drop, open ou edit

Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function myErrorAjax (type, response, branch, droppedOn) {

// Vérifie le type d'erreur. Peut être drop, edit ou open

switch (type) {

case "drop" :

alert("Une erreur est survenue pendant le drop");

break;

case "open" :

break;

case "edit" :

break;

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"ondropajax" : myDrop,

"droplink" : "page.php",

"onerrorajax" : myErrorAjax

}

openlink (string)

Optionnel, mais obligatoire si onopenpopulate est une fonction. Uitlisé avec la propriété de branche canhavechildren

Page de script coté serveur appelée après l'ouverture de la branche, s'il s'agit de la fonction onopenpopulate. Prend le pas sur la méthode setOnOpenPopulate() de TafelTree

onopenpopulate (function)

Propriétés

branch (TafelTreeBranch)	la branche ouverte
response (string)	La string retournée par la requête

Optionnel

Méthode appelée après l'ouverture de la branche. Lorsque celle-ci est ouverte, elle lance une requête Ajax à la page openlink et renvoie le retour Ajax à la méthode utilisateur. La méthode doit retourner une string JSON représentant des TafelTreeBranch. Prend le pas sur la méthode setOnOpenPopulate() de TafelTree

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

function myOpenPopulate (branch, response) {

// Pour voir le contenu de la réponse, on peut faire une

// "alert" ou le mettre dans le DIV de debug de l'arbre

branch.tree.debug(response);

// On peut aussi évaluer la réponse en tant qu'objet JSON

// (à noter qu'il s'agit d'un tableau). La réponse DOIT

// ETRE une description d'une ou plusieurs TafelTreeBranch

// [{

// "id" : "id_from_server_1",

// "txt" : "This is one is from the server",

// "img" : "globe.gif"

// }]

// Tests divers

if (resultsFromTest) {

// OK, la branche sera ouverte avec les nouvelles

// branches qui viennent du serveur

return response;

} else {

// Ici, la branche ne sera pas ouverte et aucune

// branche ne sera ajoutée

return false;

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"onopenpopulate" : myOpenPopulate,

"openlink" : "somewhere/serverScriptPage.php",

"canhavechildren" : true

}

Notes

Le réponse DOIT ETRE un tableau JSON ( [ ] ) contenant des TafelTreeBranch
Le JSON DOIT ETRE une description de une ou plusieurs TafelTreeBranch
Les variables envoyées à la page openlink passent par la méthode POST
Ces variables sont :
- " branch " = description JSON de la branche
- " branch_id " = id de la branche qui s'ouvre
- " tree_id " = id de l'arbre d'où est tiré la branche qui s'ouvre
Toutes autres variables passée par openlink sont également transmises en POST. Par exemple, si openlink = "page.php?spec=1", on récuperera spec en POST malgré tout.

editlink (string)

Optionnel, mais obligatoire si oneditajax est une fonction. Peut être utilisé avec la propriété de branche editable

Page de script coté serveur appelée après l'édition de la branche, s'il s'agit de la fonction oneditajax. Prend le pas sur la méthode setOnEditAjax() de TafelTree

oneditajax (function)

Propriétés

branch (TafelTreeBranch)	la branche ouverte
response (string)	La string retournée par la requête
oldValue (string)	L'ancienne valeur de la branche

Optionnel

Méthode appelée après l'édition de la branche. Lorsque celle-ci a terminé d'être éditée, elle lance une requête Ajax à la page editlink et renvoie le retour Ajax à la méthode utilisateur. La méthode doit retourner une string représentant la nouvelle valeur de la branche. Prend le pas sur la méthode setOnEditAjax() de TafelTree

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

function myEditAjax (branch, response, oldValue) {

// Pour voir le contenu de la réponse, on peut faire une

// "alert" ou le mettre dans le DIV de debug de l'arbre

branch.tree.debug(response);

// On peut aussi évaluer la réponse en tant qu'objet JSON

// (à noter qu'elle est entre parenthèses). La réponse

// doit contenir, d'une manière ou d'une autre, la

// nouvelle valeur de la branche

// ({

// "message" : "Tout est ok sur le serveur",

// "newValue" : "Nouvelle valeur de la branche",

// "anyOtherParams" : true

// })

// On peut aussi retourner seulement la nouvelle valeur

// (dans ce cas, plus besoin de parenthèses)

// alert (response); // show the new text

// Tests divers

if (resultsFromTest) {

// OK, la branche sera éditée et aura la

// nouvelle valeur retournée par cette fonction

return theNewValue;

} else {

// Ici, la branche ne sera pas éditée et conservera

// son ancienne valeur (oldValue)

return false;

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"oneditajax" : myEditAjax,

"editlink" : "somewhere/serverScriptPage.php"

}

Notes

La réponse devrait contenir la nouvelle valeur à insérer dans la branche
Les variables envoyées à la page editlink passent par la méthode POST
Ces variables sont :
- " branch " = description JSON de la branche
- " branch_id " = id de la branche qui s'ouvreé
- " tree_id " = id de l'arbre d'où est tiré la branche qui s'ouvre
- " new_value " = la nouvelle valeur de la branche
- " old_value " = l'ancienne valeur de la branche
Toutes autres variables passée par editlink sont également transmises en POST. Par exemple, si editlink = "page.php?spec=1", on récuperera spec en POST malgré tout.

droplink (string)

Optionnel, mais obligatoire si ondropajax est une fonction

Page de script coté serveur appelée après le drop de la branche, s'il s'agit de la fonction ondropajax. Prend le pas sur la méthode setOnDropAjax() de TafelTree

ondropajax (function)

Propriétés

branch_move (TafelTreeBranch)	la branche dragguée
branch_here (TafelTreeBranch)	La branche sur qui il y a eu le drop
response (string)	La string retournée par la requête
drop_finished (boolean)	False si le drop n'est pas encore effectué, True si le drop est effectué
new_branch (boolean)	La branche insérée, s'il s'agit d'un copyDrag

Optionnel

Méthode appelée après le drag'n drop de la branche. Lorsque celle-ci est dropée, elle lance une requête Ajax à la page droplink et renvoie le retour Ajax à la méthode utilisateur. La méthode doit retourner un boolean. On peut faire un "drop as sibling (frère)" en gardant la touche ALT appuyée. Il est également possible de faire un "copydrag" en maintenant la touche CONTROL appuyée. Prend le pas sur la méthode setOnDropAjax() de TafelTree

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

function myDropAjax (branch_move, branch_here, response,

drop_finished, new_branch) {

// On vérifie que le drop n'est pas encore effectué

if (!drop_finished) {

// Pour voir le contenu de la réponse, on peut soit

// faire une "alert", soit la mettre dans le DIV de

// debug

branch_move.tree.debug(response);

// Evalue une réponse JSON (à noter que le JSON est

// entre parenthèses). Imaginons que la réponse égale

// ceci :

// ({

// "param1" : true,

// "param2" : "salut biscuit"

// })

// On pourra dès lors faire ceci :

var obj = eval(response);

if (obj.param1) {

alert(obj.param2);

}

// Tests divers

if (resultsFromTest) {

// OK, la branche sera droppée ici

return true;

} else {

// Ici, la branche ne sera pas droppée et

// retournera à sa place initiale

return false;

}

} else {

// On peut récupérer la nouvelle branche insérée

// s'il s'agit d'un copyDrag

if (new_branch) {

alert(new_branch.getId())

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"ondropajax" : myDropAjax,

"droplink" : "somewhere/serverScriptPage.php"

}

Notes

Maintenir ALT pour dropper "as sibling"
Maintenir CONTROL pour faire un "copydrag"
Les variables envoyées à la page droplink passent par la méthode POST
Ces variables sont :
- " drag " = description JSON de la branche qui a bougé
- " drop " = description 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
Toutes autres variables passée par droplink sont également transmises en POST. Par exemple, si droplink = "page.php?spec=1", on récuperera spec en POST malgré tout.

...mon propre paramètre (integer, float, string, object, function, boolean, array)

Il est possible d'ajouter autant de paramètres souhaités, suivant les besoins. Lors de l'appel d'une fonction, ils sont récupérables en passant par la propriété struct.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function myClick (branch) {

if (branch.struct.theWhetherIsBeautiful) {

var str = branch.struct.wow;

alert(branch.struct.aStrangeObject.param1 + "|"+ str);

}

for (var i=0; i < branch.struct.frenchNames.length; i++){

alert(branch.struct.frenchNames[i]);

}

var branch = {

"id" : "tag1",

"txt" : "A branch",

"wow" : "some text",

"theWhetherIsBeautiful" : true,

"aStrangeObject" : {"param1" : "object in object"},

"frenchNames" : [

"Albert", "Gilbertin",

"Zéphirin", "Anatole", "Gontan"

"onclick" : myClick

}

Notes

Les paramètres persos SONT DISPONIBLES dans la sérialisation
Ils APPARAISSENT lors d'un toString()
Ils NE SONT PAS INTERPRETES lors d'une création UL - LI

Méthodes de TafelTreeBranch

Méthodes publiques TafelTreeBranch

hasChildren()

Retourne true si la branche a des enfants, false sinon

Exemples

1
2
3
4
5
6

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

alert(branch.hasChildren());

</script>

isOpened()

Retourne true si la branche est ouverte, false sinon

Exemples

1
2
3
4
5
6

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

alert(branch.isOpened());

</script>

isVisible()

Retourne true si la branche est visible, false sinon

Exemples

1
2
3
4
5
6

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

alert(branch.isVisible());

</script>

getId()

Retourne l'identifiant (id) de la branche

Exemples

1
2
3
4
5
6

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

alert(branch.getId());

</script>

changeId()

Change l'identifiant (id) de la branche. Retourne true si tout est ok, false si l'id de la branche existe déjà dans l'arbre

Exemples

1
2
3
4
5
6
7
8
9
10

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

if (branch.changeId("newId")) {

alert("Changement ok");

} else {

alert("Cet id (" + newId + ") existe d?j?");

}

</script>

getText()

Retourne le contenu de la branche

Exemples

1
2
3
4
5
6

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

alert(branch.getText());

</script>

getParent()

Retourne la branche parente, si elle existe

Exemples

1
2
3
4
5
6
7
8
9

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

var parent = branch.getParent();

if (parent) {

alert(parent.getId());

}

</script>

getParents()

Retourne toutes les branches parentes. Le premier élément du tableau est le parent direct. Le dernier élément du tableau représente la racine

Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

1
2
3
4
5
6
7
8
9

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

var opened = branch.getNextOpenedBranch();

if (opened) {

alert(opened.getId());

}

</script>

setText()

Paramètres

txt (string)	Le nouveau texte de la branche

Set le contenu de la branche

Exemples

1
2
3
4
5
6

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

branch.setText("Salut biscuit");

</script>

getChildren()

Retourne les enfants de la branche

Exemples

1
2
3
4
5
6
7
8
9

// On part du principe qu'un arbre a été créé auparavant

var branch = tree.getBranchById("idBranch");

1
2
3
4
5
6

// On part du principe qu'un arbre a été créé auparavant