### Documentation

#### Documentation offline

- Voir la documentation offline (HTML)
- Documentation offline (ZIP, décompressé : 270 kb)

#### 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
<div id="tree" class="tafelTree">
<div class="tafelTree_root">
<table><tbody><tr>
<td><img class="openable" src="../imgs/minus5.gif"/></td>
<td><img src="../imgs/globe.gif"/></td>
<td class="canevas"><div class="content">Racine</div></td>
</tr></tbody></table>
<div class="tafelTree_branch">
<table><tbody><tr>
<td><img src="../imgs/empty.gif"/></td>
<td><img class="openable" src="../imgs/line3.gif"/></td>
<td><img src="../imgs/page.gif"/></td>
<td class="canevas"><div class="content">
Enfant 1</div></td>
</tr></tbody></table>
</div>
<div class="tafelTree_branch">
<table><tbody><tr>
<td><img src="../imgs/empty.gif"/></td>
<td><img class="openable" src="../imgs/minus2.gif"/></td>
<td><img src="../imgs/folderopen.gif"/></td>
<td class="canevas"><div class="content">
Enfant 2</div></td>
</tr></tbody></table>
<div class="tafelTree_branch">
<table><tbody><tr>
<td><img src="../imgs/empty.gif"/></td>
<td><img src="../imgs/empty.gif"/></td>
<td><img class="openable"
src="../imgs/line2.gif"/></td>
<td><img src="../imgs/page.gif"/></td>
<td class="canevas"><div class="content">
Enfant avec enfant</div></td>
</tr></tbody></table>
</div>
</div>
</div>
</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

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
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
<script type="text/javascript">
// 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
<script type="text/javascript">
// 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
<script type="text/javascript">
// 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
<script type="text/javascript">
// 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
<script type="text/javascript">
// 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
<script type="text/javascript">
// 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
<script type="text/javascript">
// 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
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var parents = branch.getParents();
for (var i = 0; i < parents.length; i++) {
if (i < parents.length - 1) {
alert("Parent : " + parents[i].getId());
} else {
alert("Racine : " + parents[i].getId());
}
}
</script>

#### getAncestor()

Retourne la racine de la branche. Si on cherche l'ancêtre d'une racine, ça retournera "null"

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var root = branch.getAncestor();
if (root) {
alert(root.getId());
}
</script>

#### getFirstBranch()

Retourne le premier enfant de la branche, null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var child = branch.getFirstBranch();
if (child) {
alert(child.getId());
}
</script>

#### getLastBranch()

Retourne le dernier enfant de la branche, null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var child = branch.getLastBranch();
if (child) {
alert(child.getId());
}
</script>

#### getPreviousSibling()

Retourne la branche soeur précédente, null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var sibling = branch.getPreviousSibling();
if (sibling) {
alert(sibling.getId());
}
</script>

#### getNextSibling()

Retourne la branche soeur suivante, null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var sibling = branch.getNextSibling();
if (sibling) {
alert(sibling.getId());
}
</script>

#### getPreviousBranch()

Retourne la branche précédente (pas forcément de même niveau), null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var previous = branch.getPreviousBranch();
if (previous) {
alert(previous.getId());
}
</script>

#### getNextBranch()

Retourne la branche suivante (pas forcément de même niveau), null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var next = branch.getNextBranch();
if (next) {
alert(next.getId());
}
</script>

#### getPreviousOpenedBranch()

Retourne la branche ouverte précédente (pas forcément de même niveau), null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var opened = branch.getPreviousOpenedBranch();
if (opened) {
alert(opened.getId());
}
</script>

#### getNextOpenedBranch()

Retourne la branche ouverte suivante (pas forcément de même niveau), null s'il n'y en a pas

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// 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
<script type="text/javascript">
// 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
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var children = branch.getChildren();
for (var i = 0; i < children.length; i++) {
alert(children[i].getId());
}
</script>

#### getLevel()

Retourne le niveau de la branche. La racine est au niveau 0

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getLevel());
</script>

#### getIcon()

Retourne l'icône de la branche lorsque celle-ci n'a pas d'enfants

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getIcon());
</script>

#### getOpenIcon()

Retourne l'icône de la branche lorsque celle-ci a des enfants et est ouverte

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getOpenIcon());
</script>

#### getCloseIcon()

Retourne l'icône de la branche lorsque celle-ci a des enfants et est fermée

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getCloseIcon());
</script>

#### getIconSelected()

Retourne l'icône de la branche lorsque celle-ci n'a pas d'enfants et est sélectionnée

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getIconSelected());
</script>

#### getOpenIconSelected()

Retourne l'icône de la branche lorsque celle-ci a des enfants et est ouverte et sélectionnée

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getOpenIconSelected());
</script>

#### getCloseIconSelected()

Retourne l'icône de la branche lorsque celle-ci a des enfants et est fermée et sélectionnée

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getCloseIconSelected());
</script>

#### getCurrentIcon()

Retourne l'icône actuel de la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.getCurrentIcon());
</script>

#### setIcons()

#### Paramètres

icon (string) | L'icône si la branche n'a pas d'enfants
iconOpen (string) | L'icône si la branche a des enfants et est ouverte
iconClose (string) | L'icône si la branche a des enfants et est fermée

Set les icônes de la branche. Si iconOpen ou iconClose ne sont pas renseignés, ils prennent la valeur de icon

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
// La branche aura page.gif pour tous les états
branch.setIcons("page.gif");
// Ici, on distingue les différents états par différents
// icônes
branch.setIcons("page.gif", "folderopen.gif", "folder.gif");
</script>

#### setIconsSelected()

#### Paramètres

iconSelected (string) | L'icône si la branche n'a pas d'enfants et est sélectionée
iconOpenSelected (string) | L'icône si la branche a des enfants et est ouverte et sélectionée
iconCloseSelected (string) | L'icône si la branche a des enfants et est fermée et sélectionée

Set les icônes de la branche. Si iconOpenSelected ou iconCloseSelected ne sont pas renseignés, ils prennent respectivement les valeurs de iconOpen et iconClose (voir la fonction setIcons())

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
// La branche aura page.gif comme état sélectionné si elle
// n'a pas d'enfants
branch.setIconsSelected("page.gif");
// Ici, on distingue les différents états par différents
// icônes
branch.setIconSelected("page.gif", "folderopen.gif", "folder.gif");
</script>

#### isChild()

#### Paramètres

branch (TafelTreeBranch, string) | La branche peut-être parente, ou juste son ID

Méthode qui détermine si la branche est un enfant de celle passée en paramètre. Retourne true si la branche est effectivement une descendante.

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.isChild("otherBranch"));
</script>

#### openIt()

#### Paramètres

open (boolean) | True pour ouvrir la branche, false pour la fermer

Méthode qui permet d'ouvrir ou fermer la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.openIt(true);
</script>

#### insertIntoFirst()

#### Paramètres

item (object) | Un objet au format JSON correspondant à une TafelTreeBranch

Méthode qui permet d'insérer une branche comme fille, en première de liste

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch1",
"txt" : "child first"
}
var newBranch = branch.insertIntoFirst(item);
alert(newBranch.getId());
</script>

#### insertIntoLast()

#### Paramètres

item (object) | Un objet au format JSON correspondant à une TafelTreeBranch

Méthode qui permet d'insérer une branche comme fille, en dernière de liste

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch2",
"txt" : "child last"
}
var newBranch = branch.insertIntoLast(item);
alert(newBranch.getId());
</script>

#### insertBefore()

#### Paramètres

item (object) | Un objet au format JSON correspondant à une TafelTreeBranch

Méthode qui permet d'insérer une branche comme soeur, juste avant elle

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch3",
"txt" : "sibling first"
}
var newBranch = branch.insertBefore(item);
alert(newBranch.getId());
</script>

#### insertAfter()

#### Paramètres

item (object) | Un objet au format JSON correspondant à une TafelTreeBranch

Méthode qui permet d'insérer une branche comme soeur, juste après elle

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch4",
"txt" : "sibling last"
}
var newBranch = branch.insertAfter(item);
alert(newBranch.getId());
</script>

#### clone()

Permet de cloner la strucutre de la branche. Ne créé pas une nouvelle branche. Elle ne fait que de retourner la structure initiale.

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var clonedStructure = branch.clone();
clonedStructure.id = "newid";
clonedStructure.txt = "Ma nouvelle branche clonée";
var newBranch = branch.insertAfter(clonedStructure);
alert(newBranch.getId());
</script>

#### Notes

- Ne créé pas la nouvelle branche dans l'arbre. Ne retourne que la structure
- La structure est toujours au format JSON

#### move()

#### Paramètres

here (TafelTreeBranch, string) | La nouvelle branche parente, ou juste son ID

Méthode qui permet de changer une branche de place, en la plaçant comme fille

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.move("idNewParent");
</script>

#### moveBefore()

#### Paramètres

here (TafelTreeBranch, string) | La branche soeur, ou juste son ID

Méthode qui permet de changer une branche de place, en la plaçant comme soeur

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.moveBefore("idNewSibling");
</script>

#### closeSiblings()

Ferme toutes les branches soeurs

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.closeSiblings();
</script>

#### addClass()

#### Paramètres

class (string) | La classe CSS à ajouter

Méthode qui ajoute une classe CSS à la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.addClass("myCSSclass");
</script>

#### removeClass()

#### Paramètres

class (string) | La classe CSS à retirer

Méthode qui retire une classe CSS à la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.removeClass("myCSSclass");
</script>

#### removeChildren()

Méthode qui supprime tous les enfants de la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.removeChildren();
</script>

#### hasAllChildrenChecked()

Retourne 1 si tous les enfants de la branche sont checkés, 0 si aucuns ne le sont et -1 si certains le sont

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.hasAllChildrenChecked());
</script>

#### isChecked()

Retourne 1 si la branche est checkée, 0 si elle ne l'est pas et -1 si elle est partiellement checkée

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.isChecked());
</script>

#### check()

#### Paramètres

check (integer) | Le status à donner à la branche

Passer 1 pour la checker, 0 pour la unchecker

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.check(1);
</script>

#### select()

Sélectionne la branche et place le focus dessus

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.select();
</script>

#### unselect()

Désélectionne la branche

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branches = tree.getSelectedBranches();
if (branches.length > 0) {
branches[0].unselect();
}
</script>

#### getWithinOffset()

Récupère les coordonnées de la branche au sein de l'arbre

#### Exemples

1
2
3
4
5
6
7
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var pos = branch.getWithinOffset();
alert("Left : " + pos[0] + ", Top : " + pos[1]);
</script>

#### getAbsoluteOffset()

Récupère les coordonnées de la branche dans l'écran

#### Exemples

1
2
3
4
5
6
7
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var pos = branch.getAbsoluteOffset();
alert("Left : " + pos[0] + ", Top : " + pos[1]);
</script>

## Méthodes de TafelTreeBranch découlant de TafelTree

#### serialize()

#### Paramètres

debug (boolean) | Mettre true pour avoir un joli affichage du contenu de la branche. UNIQUEMENT POUR LE DEBUG. False par défaut

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
// On met true pour visualiser et contrôler la string
alert(branch.serialize(true));
// On met rien pour traiter la string
new Ajax.Request("mapage.php", {
"parameters": "tree=" + branch.serialize()
});
</script>

#### countBranches()

Compte le nombre de branches contenues dans la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
alert(branch.countBranches());
</script>

#### getOpenedBranches()

Retourne un tableau contenant les branches ouvertes sous la branche

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var branches = branch.getOpenedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getCheckedBranches()

Retourne un tableau contenant les branches checkées sous la branche

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var branches = branch.getCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getUnCheckedBranches()

Retourne un tableau contenant les branches non checkées sous la branche

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var branches = branch.getUnCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getPartCheckedBranches()

Retourne un tableau contenant les branches partiellement checkées sous la branche

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var branches = branch.getPartCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getParentBranches()

Retourne un tableau contenant les branches qui ont des enfants

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var branches = branch.getParentBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getLeafBranches()

Retourne un tableau contenant les branches qui n'ont pas d'enfants

#### Exemples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var branches = branch.getLeafBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getBranches()

#### Paramètres

filter (function) | La fonction utilisateur

Retourne un tableau contenant toutes les branches sous celle-ci. On peut y mettre un filtre.

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
var branches = branch.getBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
// On peut filtrer les branches avec une fonction
function myFilter (branch) {
if (branch.getText() == "Celle-ci") {
return true;
} else {
return false;
}
}
var branches = branch.getBranches(myFilter);
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### expend()

Ouvre toutes les branches sous la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.expend();
</script>

#### collapse()

Ferme toutes les branches sous la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branch = tree.getBranchById("idBranch");
branch.collapse();
</script>

# Méthodes TafelTree

## Méthodes TafelTree statiques

#### loadFromUL()

#### Paramètres

id (string) | L'id de l'UL qui contient les informations
imgBase (optionnel) (string) | Le chemin vers le dossier des images de l'arbre, " imgs/ " par défaut
width (optionnel) (string ou integer) | La largeur max de l'arbre, " 100% " par défaut
height (optionnel) (string ou integer) | La hauteur max de l'arbre, " auto " par défaut
options (optionnel) (object) | Tout ce qui doit s'exécuter avant le generate(), génération comprise
debug (optionnel) (boolean) | A True, Affiche la structure JSON mais ne créé pas l'arbre, false par défaut

La génération par UL ne permet pas de gérer ses propres attributs. Pour ce qui est des fonctions de l'arbre, on doit les gérer via le paramètre options. Pour plus de détails sur ce paramètre, voir new TafelTree()

#### Exemple

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
<ul id="idTree">
<li id="b1" Timg="base.gif">Mon texte</li>
<li id="b2" Timg="base.gif">Texte autre
<ul>
<li id="b3" Timg="page.gif" >Enfant</li>
<li id="b4" Timg="page.gif" Timgclose="folder.gif"
Timgopen="folderopen.gif">Autre Enfant
<ul>
<li id="b5" Timg="page.gif">Enfant</li>
<li id="b6" Timg="page.gif" Teditable="1">
Autre Enfant</li>
</ul>
</li>
</ul>
</li>
<li id="b7" Timg="base.gif">Fin</li>
</ul>
<script type="text/javascript">
function myFuncClick(branch) {
alert(branch.getId());
}
var tree = TafelTree.loadFromUL("idTree", {
"generate" : true,
"imgBase" : "imgs/",
"width" : "300px",
"height" : "250px",
"onclick" : myFuncClick,
"openAtLoad" : true
});
</script>

#### Notes

- Les fonctions à faire avant la génération (génération comprise) sont chargées via le paramètre OPTIONS
- Tous les attributs des branches sont précédés d'un " T " sauf l'id
- Les attributs de branches sont les mêmes que pour le JSON
- L'attribut n'est JAMAIS entre guillemets et son contenu est ÉCHAPPÉ (simple quotes) et TOUJOURS entre guillemets
- Le contenu d'un attribut NE DOIT PAS contenir de double quotes (guillemets)
- Il n'est pas possible d'assigner des attributs persos, malheureusement

## Getter et setter TafelTree

#### new TafelTree()

#### Paramètres

id (string) | L'id du DIV qui contiendra l'ensemble de l'arbre
struct (array) | La structure de l'arbre formatté JSON
imgBase (optionnel) (string) | Le chemin vers le dossier des images de l'arbre, " imgs/ " par défaut
width (optionnel) (string ou integer) | La largeur max de l'arbre, " 100% " par défaut
height (optionnel) (string ou integer) | La hauteur max de l'arbre, " auto " par défaut
options (optionnel) (object) | Tout ce qui doit s'exécuter avant le generate(), génération comprise

#### Exemple

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<div id="idTree"></div>
<script type="text/javascript">
var myStruct = [
{
"id" : "root",
"txt" : "Root node",
"img" : "base.gif",
"style" : "cssBoldStyle",
"items" : [
{
"id" : "node1",
"txt" : "Node 1",
"img" : "folderopen.gif"
},
{
"id" : "music",
"txt" : "My music",
"img" : "musicfolder.gif"
}
]
}
];
var tree = new TafelTree("idTree", myStruct, {
"generate" : true,
"imgBase" : "imgs/",
"width" : "300px",
"height" : "150px"
});
// Example using options
var treeToBind = new TafelTree("idTreeToBind", structBind, {
"generate" : true,
"imgBase" : "imgs/",
"width" : "300px",
"height" : "150px"
});
var treeToBind2 = new TafelTree("idTreeToBind2", structBind2, {
"generate" : true,
"imgBase" : "imgs/",
"width" : "300px",
"height" : "150px"
});
var tree = new TafelTree("idTree", myStruct, {
"generate" : true,
"imgBase" : "imgs/",
"width" : "300px",
"height" : "250px",
"defaultImg" : "page.gif",
"defaultImgOpen" : "folderopen.gif",
"defaultImgClose" : "folder.gif",
"defaultImgSelected" : "page.gif",
"defaultImgOpenSelected" : "folderopen.gif",
"defaultImgCloseSelected" : "folder.gif",
"onLoad" : myFuncLoad,
"onDebug" : myFuncDebug,
"onCheck" : myFuncCheck,
"onBeforeCheck" : myFuncBeforeCheck,
"onclick" : myFuncClick,
"onDblClick" : myFuncDblClick,
"onBeforeOpen" : myFuncBeforeOpen,
"onOpen" : myFunconOpen,
"onMouseOver" : myFuncMouseOver,
"onMouseOut" : myFuncMouseOut,
"onMouseDown" : myFuncMouseDown,
"onMouseUp" : myFuncMouseUp,
"onDrop" : myFuncDrop,
"onEdit" : myFuncEdit,
"onEditAjax" : [myFuncEditAjax, "server/edit.php"],
"onDropAjax" : [myFuncDropAjax, "server/drop.php"]
"onOpenPopulate" : [myFuncOpenPopulate, "server/open.php"],
"multiline" : false,
"checkboxes" : false,
"checkboxesThreeState" : false,
"cookies" : true,
"openOneAtOnce" : false,
"openAtLoad" : true,
"openAfterAdd" : true,
"showSelectedBranch" : true,
"lineStyle" : "line",
"rtlMode" : false,
"dropALT" : true,
"dropCTRL" : false,
"propagateRestriction" : true,
"reopenFromServer" : true,
"behaviourDrop" : "child",
"bind" : [treeToBind],
"bindAsUnidirectional" : [treeToBind2]
});
</script>

#### enableMultiline()

#### Paramètres

enable (boolean) | True pour activer la gestion multi-ligne (par défaut, false)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.enableMultiline(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"multiline" : true
});
</script>

#### reopenFromServerAfterLoad()

#### Paramètres

enable (boolean) | False pour ne pas ouvrir les noeuds qui ont leurs enfants sur le serveur après un reload, true par défaut

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.reopenFromServerAfterLoad(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"reopenFromServer" : true
});
</script>

#### enableCheckboxes()

#### Paramètres

enable (boolean) | True pour activer la gestion des checkboxes à 2 états (par défaut, false)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.enableCheckboxes(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"checkboxes" : true
});
</script>

#### Notes

- Les checkboxes à deux états peuvent être soit " checked ", soit " unchecked "
- Pour gérer 3 états, voir la fonction enableCheckboxesThreeState()

#### enableCheckboxesThreeState()

#### Paramètres

enable (boolean) | True pour activer la gestion des checkboxes à 3 états (par défaut, false)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.enableCheckboxesThreeState(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"checkboxesThreeState" : true
});
</script>

#### Notes

- Il n'y a pas besoin d'appeler la méthode enableCheckboxes().

#### enableCookies()

#### Paramètres

enable (boolean) | True pour activer les cookies (par défaut, true)
separator (optionnel) (string) | Le séparateur utilisé dans les cookies (par défaut, " | ")

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.enableCookies(true, "#___#");
// Options. On ne peut pas choisir le sÃ©parateur, depuis lÃ©
var tree = new TafelTree("idTree", myStruct, {
"cookies" : true
});
</script>

#### Notes

- Les cookies permettent de se souvenir de quelles branches sont ouvertes
- Changer le séparateur peut servir si une barre verticale fait partie de l'id des branches

#### openOneAtOnce()

#### Paramètres

enable (boolean) | True pour ne pouvoir ouvrir qu'une seule branche à la fois (par défaut, false)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.openOneAtOnce(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"openOneAtOnce" : true
});
</script>

#### openAtLoad()

#### Paramètres

open (boolean) | True pour avoir l'arbre ouvert après le premier load (par défaut, false)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.openAtLoad(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"openAtLoad" : true
});
</script>

#### Notes

- Lorsque les cookies sont activés, ceux-ci prennent le pas sur cette fonction

#### openAfterAdd()

#### Paramètres

open (boolean) | True pour avoir la branche qui s'ouvre après un insert ou un drop, false pour la garder fermée

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.openAfterAdd(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"openAfterAdd" : false
});
</script>

#### showSelectedBranch()

#### Paramètres

show (boolean) | True pour avoir la branche sélectionnée en surbrillance (par défaut, true)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.showSelectedBranch(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"showSelectedBranch" : false
});
</script>

#### setLineStyle()

#### Paramètres

style (string) | Le style choisi pour l'affichage de l'arbre (par défaut, " line ")

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.setLineStyle("none");
// Options
var tree = new TafelTree("idTree", myStruct, {
"lineStyle" : "none"
});
</script>

#### Notes

- Les valeurs possibles sont " line ", " full " ou " none ".

#### setIcons()

#### Paramètres

icon (string) | L'icône si la branche n'a pas d'enfants
iconOpen (string) | L'icône si la branche a des enfants et est ouverte
iconClose (string) | L'icône si la branche a des enfants et est fermée

Set les icônes par défaut des branches. Si iconOpen ou iconClose ne sont pas renseignés, ils prennent la valeur de icon

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.setIcons("page.gif", "folderopen.gif", "folder.gif");
// Options
var tree = new TafelTree("idTree", myStruct, {
"defaultImg" : "page.gif",
"defaultImgOpen" : "folderopen.gif",
"defaultImgClose" : "folder.gif"
});
</script>

#### setIconsSelected()

#### Paramètres

iconSelected (string) | L'icône si la branche n'a pas d'enfants et est sélectionée
iconOpenSelected (string) | L'icône si la branche a des enfants et est ouverte et sélectionée
iconCloseSelected (string) | L'icône si la branche a des enfants et est fermée et sélectionée

Set les icônes de la branche. Si iconOpenSelected ou iconCloseSelected ne sont pas renseignés, ils prennent respectivement les valeurs de iconOpen et iconClose (voir la fonction setIcons())

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.setIconsSelected("page.gif", "folderopen.gif", "folder.gif");
// Options
var tree = new TafelTree("idTree", myStruct, {
"defaultImgSelected" : "page.gif",
"defaultImgOpenSelected" : "folderopen.gif",
"defaultImgCloseSelected" : "folder.gif"
});
</script>

#### setBehaviourDrop()

#### Paramètres

dropStyle (string) | 'sibling', 'siblingcopy', 'child' ou 'childcopy', suivant le type de drop voulu, 'child' par défaut

Set le comportement de drop par défaut. En mettant sibling, on droppera les branches comme soeur ou, en maintenant ALT appuyé, comme fille. Et inversément si on met child.

Si on opte pour siblingcopy, on droppera les branches comme soeur et sera un copie ou, en maintenant ALT + CTRL appuyé, comme fille et pas copie. En fait, ça inverse les comportements des touches ALT et CTRL. Le mieux pour comprendre, c'est d'essayer...

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.setBehaviourDrop("sibling");
// Options
var tree = new TafelTree("idTree", myStruct, {
"behaviourDrop" : "sibling"
});
</script>

#### disableDropCTRL()

#### Paramètres

ctrlDrop (boolean) | False désactive la fonctionnalité CTRL avec drop, la valeur par défaut est true

En passant "false", la touche CTRL sera désactivée. Il ne sera plus possible de faire des copy-drag. Un copy-drag copie la branche drag&dropée à l'emplacement de drop. Un insertDrag déplace simplement la branche sans pour autant en créer une nouvelle.

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.disableDropCTRL(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"dropCTRL" : false
});
</script>

#### disableDropALT()

#### Arguments

altDrop (string) | False désactive la fonctionnalité ALT avec drop, la valeur par défaut est true

False enlève la possibilité d'avoir 2 différents types de drop. Soit "comme soeur" soit "comme fille". En passant "false", il ne sera possible de faire que les types de drop définis par la fonction setBehaviourDrop()

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.disableDropALT(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"dropALT" : false
});
</script>

#### propagateRestriction()

#### Paramètres

propagate (boolean) | True pour propager l'interdiction de bouger après un drag&drop ajax (par défaut, true)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.setOnDropAjax(myFunc, "mypage.php");
tree.propagateRestriction(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"onDropAjax" : [myFunc, "mypage.php"],
"propagateRestriction" : false
});
</script>

#### Notes

- La propagation implique que les enfants de la branche droppée sont également bloqués (pour éviter des problèmes de croisements de données)

#### enableRTL()

#### Paramètres

rtl (boolean) | True pour avoir l'arbre qui se lit de droite à gauche (par défaut, false)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// On part du principe que la structure est dÃ©finie en amont
var tree = new TafelTree("idTree", myStruct);
tree.enableRTL(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"rtlMode" : true
});
</script>

## Méthodes TafelTree publiques

#### generate()

#### Paramètres

partLoad (boolean) | True pour générer l'arbre petit-à-petit (expérimental), false par défaut

#### Exemples

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
// On part du principe que la structure est définie en amont
var tree = new TafelTree("idTree", myStruct);
tree.generate();
// On peut générer l"arbre petit-à-petit (pour les gros arbre)
// Attention, c"est vaguement expérimental;
tree.generate(true);
</script>

#### serialize()

#### Paramètres

debug (boolean) | Mettre true pour avoir un joli affichage du contenu de l'arbre. UNIQUEMENT POUR LE DEBUG. False par défaut

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
// On part du principe que la structure est définie en amont
var tree = new TafelTree("idTree", myStruct);
tree.generate();
// On met true pour visualiser et contrôler la string
alert(tree.serialize(true));
// On met rien pour traiter la string
new Ajax.Request("mapage.php", {
"parameters" : "tree=" + tree.serialize()
});
</script>

#### getSelectedBranches()

#### Exemples

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var selected = tree.getSelectedBranches();
if (selected.length > 0) {
for (var i = 0; i < selected.length; i++) {
alert(selected[i].getId());
}
}
</script>

#### getBranchById()

#### Paramètres

id (string) | L'id de la branche

#### Exemples

1
2
3
4
5
6
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var branch = tree.getBranchById("idBranch");
alert(branch.getId();
</script>

#### bind()

#### Paramètres

tree (TafelTree) | L'arbre avec lequel on veut faire le lien
tree (TafelTree) | Un autre arbre
... (TafelTree) | Autant d'autres arbres que l'on veut

Le lien bi-directionnel permet de faire, en une fois, les liens drag&drop entre les arbres, dans les deux sens (arbre1 vers arbre2 et vice-versa)

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
// A noter dans ce cas qu"on pourra faire des drag&drop de
// tree vers tree_2, et inversément
var tree_2 = new TafelTree("idTree_2", myOtherStruct);
tree.bind(tree_2);
</script>

#### Notes

- Le lien sert à pouvoir faire des drag&drop entre les arbres
- Ce lien est bi-directionnel

#### bindAsUnidirecitonal()

#### Paramètres

tree (TafelTree) | L'arbre avec lequel on veut faire le lien
tree (TafelTree) | Un autre arbre
... (TafelTree) | Autant d'autres arbres que l'on veut

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
// A noter dans ce cas qu"on ne pourra faire des drag&drop
// que de tree vers tree_2 et pas inversément
var tree_2 = new TafelTree("idTree_2", myOtherStruct);
tree.bindAsUnidirecitonal(tree_2);
</script>

#### Notes

- Le lien sert à pouvoir faire des drag&drop entre les arbres
- Ce lien est uni-directionnel

#### isBindedWith()

#### Paramètres

tree (TafelTree) | L'arbre avec lequel on veut savoir s'il y a un lien

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var tree_2 = new TafelTree("idTree_2", myOtherStruct);
tree.bindAsUnidirectional(tree_2);
alert(tree.isBindedWith(tree_2)); // retourne true
alert(tree_2.isBindedWith(tree)); // retourne false
</script>

#### unselect()

Déselectionne la branche, s'il y en avait une sélectionnée

#### Exemples

1
2
3
4
5
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
tree.unselect();
</script>

#### countBranches()

Compte le nombre de branches contenues dans l'arbre

#### Exemples

1
2
3
4
5
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
alert(tree.countBranches());
</script>

#### getOpenedBranches()

Retourne un tableau contenant les branches ouvertes

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var branches = tree.getOpenedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getCheckedBranches()

Retourne un tableau contenant les branches checkées

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var branches = tree.getCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getUnCheckedBranches()

Retourne un tableau contenant les branches non checkées

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var branches = tree.getUnCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getPartCheckedBranches()

Retourne un tableau contenant les branches partiellement checkées

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var branches = tree.getPartCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getParentBranches()

Retourne un tableau contenant les branches qui ont des enfants

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var branches = tree.getParentBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getLeafBranches()

Retourne un tableau contenant les branches qui n'ont pas d'enfants

#### Exemples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var branches = tree.getLeafBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getBranches()

#### Paramètres

filter (function) | La fonction utilisateur

Retourne un tableau contenant toutes les branches de l'arbre. On peut y mettre un filtre.

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
// On part du principe qu'un arbre a été créé auparavant
var branches = tree.getBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
// On peut filtrer les branches avec une fonction
function myFilter (branch) {
if (branch.getText() == "Celle-ci") {
return true;
} else {
return false;
}
}
var branches = tree.getBranches(myFilter);
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### expend()

Ouvre toutes les branches

#### Exemples

1
2
3
4
5
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
tree.expend();
</script>

#### collapse()

Ferme toutes les branches

#### Exemples

1
2
3
4
5
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
tree.collapse();
</script>

#### insertBranch()

#### Paramètres

position (TafelTreeBranch, string) | La branche source (ou juste l'id)
item (object) | La nouvelle branche (au format TafelTreeBranch properties)
sibling (boolean) | True pour indiquer qu'on veut l'insérer en tant que soeur, par défaut false
first (boolean) | True pour indiquer qu'on veut l'insérer avant ou en premier, false par défaut

Premet de rajouter une branche comme fille ou comme soeur, avant ou après la branche désirée

#### Exemples

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
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
var item = {
"id":"new1",
"img":"page.gif",
"txt":"child before"
}
var item2 = {
"id":"new2",
"img":"page.gif",
"txt":"child after"
}
var item3 = {
"id":"new3",
"img":"page.gif",
"txt":"sibling before"
}
var item4 = {
"id":"new4",
"img":"page.gif",
"txt":"sibling after"
}
// Branche fille (enfant) - en premier
var branch1 = tree.insertBranch("id_branch", item, false, true);
// Branche fille (enfant) - en dernier
var branch2 = tree.insertBranch("id_branch", item2, false, false);
// Branche soeur - avant
var branch3 = tree.insertBranch("id_branch", item3, true, true);
// Branche soeur - après
var branch4 = tree.insertBranch("id_branch", item4, true, false);
</script>

#### removeBranch()

#### Paramètres

branch (TafelTreeBranch, string) | La branche source (ou juste l'id)

Supprime la branche est toutes ses filles

#### Exemples

1
2
3
4
5
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
tree.removeBranch("id_branch_to_delete");
</script>

#### debug()

#### Paramètres

str (string) | Le texte à afficher

Affiche un texte dans la zone de débug

#### Exemples

1
2
3
4
5
<script type="text/javascript">
// On part du principe qu"un arbre a été généré en amont
tree.debug("text to debug : " + tree.id);
</script>

## Méthodes TafelTree d'événements

#### setOnDebug()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsqu'on fait appel à tree.debug()

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
// Fonction utilisateur
function myDebug (tree, HTMLDebugObj, str) {
HTMLDebugObj.innerHTML = "Ma fonction : " + str;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onDebug" : myDebug
});
tree.debug("text to debug");
</script>

#### Notes

- Par défaut, la méthode tree.debug() affiche simplement le texte dans le HTMLDebugObj

#### setOnLoad()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsque l'arbre a fini de loader (en le générant avec true : tree.generate(true))

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// Fonction utilisateur
function myLoad () {
alert("load terminé");
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onLoad" : myLoad
});
</script>

#### setOnOpen()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée après qu'une branche ait été ouverte (status = true) ou fermée (status = false)

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Fonction utilisateur
function myOpen (branch, status) {
var str = (status) ? "ouverte" : "fermée";
alert(branch.getId() + " a été " + str);
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onOpen" : myOpen
});
</script>

#### setOnBeforeOpen()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée avant qu'une branche soit ouverte (status = true) ou fermée (status = false). Si elle retourne false, la branche conservera son status actuel.

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
// Fonction utilisateur
function myBeforeOpen (branch, status) {
var strNow = (status) ? "ouverte" : "fermée";
var strNext = (status) ? "fermée" : "ouverte";
alert(branch.getId() + " est actuellement " + strNow +
" et sera donc " + strNext +
" si cette fonction retourne true");
return true;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onBeforeOpen" : myBeforeOpen
});
</script>

#### setOnMouseOver()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsque la souris passe sur la branche

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// Fonction utilisateur
function myMouseOver (branch) {
alert("over : " + branch.getId());
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onMouseOver" : myMouseOver
});
</script>

#### setOnMouseOut()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsque la souris n'est plus sur la branche

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// Fonction utilisateur
function myMouseOut (branch) {
alert("out : " + branch.getId());
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onMouseOut" : myMouseOut
});
</script>

#### setOnMouseDown()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsqu'on fait un "mouse down" sur la branche

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// User function
function myMouseDown (branch) {
alert("down : " + branch.getId());
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onMouseDown" : myMouseDown
});
</script>

#### setOnMouseUp()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsqu'on fait un "mouse up" sur la branche

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// User function
function myMouseUp (branch) {
alert("up : " + branch.getId());
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onMouseUp" : myMouseUp
});
</script>

#### setOnClick()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsqu'on clique sur la branche

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// Fonction utilisateur
function myClick (branch) {
alert(branch.getId());
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onclick" : myClick
});
</script>

#### Notes

- Quoiqu'il arrive, la branche sur laquelle on clique sera sélectionnée

#### setOnDblClick()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsqu'on double-clique sur la branche

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// Fonction utilisateur
function myDblClick (branch) {
alert(branch.getId());
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onDblClick" : myDblClick
});
</script>

#### setOnEdit()

#### Paramètres

func (function) | La méthode à appeler

Active l'édition des branches. Méthode qui est appelée lorsqu'on fini d'éditer une branche (concrétement, lors du blur du champ texte). Le contenu de la branche sera celui que la fonction utilisateur retournera.

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Fonction utilisateur
function myEdit (branch, newValue, oldValue) {
var str = branch.getId() + " : " + newValue;
return str;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onEdit" : myEdit
});
</script>

#### Notes

- Lorsqu'on a une fonction assignée en double-clic (tree.setOnDblClick()), l'utilisation du onEdit disparaît. C'est soit l'un, soit l'autre

#### setOnBeforeCheck()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsqu'on check ou uncheck la branche, juste avant qu'elle change de status. Pour ne pas changer son status, il faut retourner false

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
// Fonction utilisateur
function myBeforeCheck (branch, status) {
var strNow = (status) ? "checkée" : "uncheckée";
var strNext = (status) ? "uncheckée" : "checkée";
alert(branch.getId() + " est actuellement " + strNow +
" et sera " + strNext +
" si cette fonction retourne true");
return true;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onBeforeCheck" : myBeforeCheck
});
</script>

#### setOnCheck()

#### Paramètres

func (function) | La méthode à appeler

Méthode qui est appelée lorsqu'on check ou uncheck la branche

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Fonction utilisateur
function myCheck (branch, status) {
var str = (status) ? "checkée" : "uncheckée";
alert(branch.getId() + " est maintenant " + str);
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onCheck" : myCheck
});
</script>

#### setOnDrop()

#### Paramètres

func (function) | La méthode à appeler

Active le drag&dorp. Méthode qui est appelée lorsqu'on drop la branche. 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.

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.

#### Exemples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
// Fonction utilisateur
function myDrop (branchMoved, newParent, dropFinished) {
if (!dropFinished) {
alert(branchMoved.getId() + " sera fille de "
+ newParent.getId());
} else {
alert(branchMoved.getId() + " est maintenant fille de "
+ newParent.getId());
}
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onDrop" : myDrop
});
</script>

#### Notes

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

#### setOnDropAjax()

#### Paramètres

func (function) | La méthode à appeler
link (string) | Le lien vers la page de traitement coté serveur

Active le drag&dorp. Méthode qui est appelée lorsqu'on drop la branche et qui envoie du même coup une requête Ajax. 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. Pour d'autres exemples, voir Drop Ajax

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.

#### Exemples

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
<script type="text/javascript">
// Fonction utilisateur
function myDrop(branchMoved,newParent,response,dropFinished){
// On check avant que le drop soit fait
if (!dropFinished) {
// La réponse correspond au responseText de
// l'objet XMLHttpRequest
alert(response);
// Il peut tout-à-fait s'agir d"une string JSON,
// auquel cas on peut l'évaluer comme ceci :
var obj = eval("(" + response + ")");
alert(obj.myProperty);
alert(branchMoved.getId() + " sera fille de " +
newParent.getId() +
" si cette fonction retourne true");
return true;
}
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onDropAjax" : [myDrop, "pageScript.php"]
});
</script>
// Exemple de fichier PHP coté serveur
<?php
// On fait divers traitements
// ...
// Et on affiche une string JSON
?>
({
"myProperty" : "myValue",
"other" : ["this", "is", "an", "array"]
})

#### 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 est 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.

#### setOnOpenPopulate()

#### Paramètres

func (function) | La méthode à appeler
link (string) | Le lien vers la page de traitement coté serveur

Active la remplissage des enfants au moment de l'ouverture de la branche. Méthode qui est appelée lorsqu'on ouvre la branche et qui envoie du même coup une requête Ajax. Pour d'autres exemples, voir onopenpopulate

#### Exemples

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
<script type="text/javascript">
// Fonction utilisateur
function myOpen (branch, response) {
// La réponse correspond au responseText de
// l'objet XMLHttpRequest
alert(response);
// Il DOIT string JSON, qui DOIT être structurée
// à la façon d'une TafelTreeBranch
var childBranch = eval(response);
alert(childBranch.id + "\n" + childBranch.txt);
alert(branch.getId() + " sera ouverte si cette " +
"fonction retourne true");
return response;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onOpenPopulate" : [myOpen, "pageScript.php"]
});
</script>
<!-- Exemple de fichier PHP coté serveur -->
<?php
// On fait divers traitements
// ...
// Et on affiche une string JSON. A noter qu'on retourne
// systématiquement un TABLEAU
?>
[
{
"id" : "child1",
"txt" : "Texte 1",
"items" : [
{
"id" : "child2",
"txt" : "Texte 2"
}
]
}
]

#### Notes

- La fonction utilisateur DOIT retourner une string JSON représentant des TafelTreeBranch. Ou false pour annuler l'ouverture.
- Le JSON DOIT ETRE entre parenthèses ( )
- 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 qui accueille 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.

#### setOnEditAjax()

#### Paramètres

func (function) | La méthode à appeler
link (string) | Le lien vers la page de traitement coté serveur

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

#### Exemples

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
function myEditAjax (branch, response, oldValue) {
// Pour voir le contenu de la réponse, on peut en faire une
// "alert" ou le mettre dans le DIV de debug comme ceci :
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;
}
}

#### 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 openlink = "page.php?spec=1", on récuperera spec en POST malgré tout.

#### setOnErrorAjax()

#### Paramètres

func (function) | La méthode à appeler

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
function myErrorAjax (type, response, branch, droppedOn) {
// Vérifie le type d'erreur. Peue être drop, edit ou open
switch (type) {
case "drop" :
break;
case "open" :
break;
case "edit" :
break;
alert("Une erreur est survenue pendant l'édition");
break;
}
}

# Méthodes TafelTreeManager

## Description des événements clavier

#### Events

Les touches suivantes sont gérées :

- ARROW_LEFT
- ARROW_RIGHT
- ARROW_UP
- ARROW_DOWN
- HOME
- END
- F2 (édition)
- ENTER (stop de l'édition)
- ESCAPE (déselection)
- DELETE
- CTRL + X (touche POMME sur mac Safari)
- CTRL + C (touche POMME sur mac Safari)
- CTRL + V (touche POMME sur mac Safari)

Il est possible de désactiver certaines touches ou d'ajouter ses propres touches. Voir la fonction setKey()

## Méthodes TafelTreeManager publiques

#### setKeys()

#### Paramètres

keys (array) | Le tableau contenant les informations des code touche et la fonction approrpiée

Permet de gérer un ou plusieurs comportements pour une touche donnée. Concrétement, la fonction associée à la touche est appelée dès que la touche est appuyée. Cette fonction contient les données d'environnement (l'arbre sur lequel se passe l'action, les touches appuyées (ctrl, alt, shift ou meta) etc).

#### Exemple

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
<script type="text/javascript">
// Définition de la fonction pour la touche n°46 (DEL)
function myOnDelete (tree, code, modifiers, ev) {
// Là, il s'agit de faire se qu'on veut et retourner
// "true" si on veut que le process continue. Par
// exemple, pour la touche DEL, il y a déjà une
// fonction intégrée. Si on retourne "true", cette
// fonction sera appelée. Si on retourne "false", elle
// ne sera pas appelée...
if (okForDelete) {
return true;
} else {
return false;
}
}
// Définition des touches
var keys = [
{
"key" : 46,
"func" : myOnDelete
}
];
TafelTreeManager.setKeys(keys);
</script>

#### Notes

- modifiers.ctrlKey = true si Ctrl est appuyé
- modifiers.altKey = true si Alt est appuyé
- modifiers.shiftKey = true si Shift est appuyé
- modifiers.metaKey = true si "Pomme" (sous mac Safari) est appuyé

#### disableKeyboardEvents()

Désactive la gestion clavier

#### Exemple

1
2
3
4
<script type="text/javascript">
TafelTreeManager.disableKeyboardEvents();
</script>

#### disableKeyboardStructuralEvents()

Désactive la gestion clavier pour ce qui est changement de structure. Il est donc possible de se déplacer avec les flèches mais pas de copier-coller ou supprimer, par exemple.

#### Exemple

1
2
3
4
<script type="text/javascript">
TafelTreeManager.disableKeyboardStructuralEvents();
</script>

#### getCurrentTree()

Retourne l'arbre courant sur lequel se passe les actions. Null si aucun arbre n'est courant.

#### Exemple

1
2
3
4
<script type="text/javascript">
alert(TafelTreeManager.getCurrentTree());
</script>

#### setCurrentTree()

Set l'arbre courant sur lequel va se passer les actions

#### Exemple

1
2
3
4
<script type="text/javascript">
TafelTreeManager.setCurrentTree(myTree);
</script>

Treeview JS TafelTree

2006-12-30, Tafel. Optimisé pour Mozilla Firefox