doc

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

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

 

refreshChildren()

Rafraichit les enfants de la branche depuis le serveur

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.refreshChildren();

</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

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

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>

 

Choix des langues

Téléchargement

Télécharger la version v1.9.1

Cliquez ici

 

Documentation

Une documentation complète est accessible ici

 

Smarty

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

 

Ils l'utilisent

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

Treeview JS TafelTree

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