### Documentation

#### Offline documentation

- See offline documentation (HTML)
- Offline documentation (ZIP, 270 kb)

#### HTML format

TafelTree is an opensource Javascript tree which has a lot of behaviours useful for managing datas. It's based on JSON and DOM. The HTML structure, totally transparent for the user of course, is like that :

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">Root</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">
Child 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">
Child 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">
Child with child</div></td>
</tr></tbody></table>
</div>
</div>
</div>
</div>

# TafelTreeBranch Properties structure

## TafelTreeBranch basic properties

#### id (string)

Required

The branch's user ID. Must be unique in the whole page, event if it's not in the same tree.

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)

Required

The text which is showed just next the icon

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)

Optional. Defaul value : true

True means you can drop a branch into it, false make this 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)

Optional. Defaul value : false

*rue means the branch can have children from the server. You need it with the function onopenpopulate(). That allow the branch to have the " + " which shows that the branch has children.

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)

Optional. Defaul value : 0

Put 1 and the branch will be checked, if checkboxes are activated

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)

Optional. Defaul value : true

True allows you to drag the branch, false make this action impossible. Have no effects if the functions setOnDrop() or setOnDropAjax() aren't defined. (or ondrop or 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)

Optional. Defaul value : 1

Permit the branch to be edited or not. If the funciton onEdit() exists, you can put 0 to force the branch to be "readonly"

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)

Optional. Defaul value : no icon

The icon if the branch hasn't children

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)

Optional. Defaul value : the same as img

The icon if the branch has children and is closed.

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)

Optional. Defaul value : the same as img

The icon if the branch has children and is opened.

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)

Optional. Defaul value : the same as img

The icon if the branch hasn't children and is selected

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)

Optional. Defaul value : the same as imgclose

The icon if the branch has children and is closed and selected.

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)

Optional. Defaul value : the same as imgopen

The icon if the branch has children and is opened and selected.

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)

Optional

An array of TafelTreeBranch descriptions. Represents the children of the branch.

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)

Optional. Defaul value : false

True allows you to have the branch always in the last position (in its parent). Useful after drag&drop, if you drag an other branch into the parent and whish to have this one always last.

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)

Optional. Defaul value, the value of (setOpenAll()). If cookies are activated, it's the cookie's state which is the default.

True to have the branch open, false to have it closed.

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)

Optional

The name of a CSS class. This class will be set for the text

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)

Optional

The content of the HTML attribute "title". It can contains only plain normal text.

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)

Optional

A tooltip which shows after an "onmouseover". The content can be HTML or text (or both)

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

- It's possible to put HTML. Beware with ( ' ) and ( " )
- The tooltip is automatically inserted into a hidden DIV
- The CSS style is div.tooltip

## TafelTreeBranch function properties

#### onbeforecheck (function)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action
checked (boolean) | the check state of the branch

Optional

Called when you check or uncheck a branch, BEFORE changes are made.

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)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action
opened (boolean) | the open state of the branch

Optional

Called just before the branch is opened or closed. It must return a boolean. Override setOnBeforeOpen() of 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
if (resultsFromTest) {
// OK, the branch will open
return true;
} else {
// Here, the branch won't open. The function
// myOpen() won't be called
return false;
}
}
function myOpen (branch, opened) {
alert(branch.getTag());
}
var branch = {
"id" : "tag1",
"txt" : "A branch",
"onbeforeopen" : myBeforeOpen,
"onopen" : myOpen
}

#### oncheck (function)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action
checked (boolean) | the check state of the branch

Optional

Called after the check (or uncheck) is done

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)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action

Optional

Called when you click on the branch. Override setOnClick() of 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)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action

Optional

Called when you double-click on the branch. Override setOnDblClick() of 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)

#### Arguments

branch_move (TafelTreeBranch) | the dragged branch
branch_here (TafelTreeBranch) | branch where the drop is done
drop_finished (boolean) | False if drop isn't done, True if drop is done
new_branch (boolean) | The inserted branch, if it's a copyDrag

Optional

Called after the drop of the branch. It must return a boolean. You can make a "drop as sibling" if you keep the ALT key pressed. You can also do a "copydrag" if you maintain the CONTROL key pressed. Override setOnDrop() of TafelTree

This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.

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
function myDrop (branch_move, branch_here, drop_finished,
new_branch) {
// Beware, the function is called twice. One time before drop
// happends, one time after. Here, we check before drop
// happends
if (!drop_finished) {
// Tests
if (resultsFromTest) {
// OK, the branch will be dropped here
return true;
} else {
// Here, the branch won't be dropped and will return
// at her place
return false;
}
} else {
// We can get the new inserted branch, if it's a copyDrag
if (new_branch) {
alert(new_branch.getId())
}
}
}
var branch = {
"id" : "tag1",
"txt" : "A branch",
"ondrop" : myDrop
}

#### Notes

- Keep ALT pressed for an "as sibling" drop
- Keep CONTROL pressed to make a "copydrag"

#### onedit (function)

#### Arguments

branch (TafelTreeBranch) | the edited branch
newValue (string) | the new value
oldValue (string) | the old value

Optional

Called after the edition of the branch (precisely, after the blur() of the input)

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

- Returns the string that will be the new value of the branch

#### onmouseout (function)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action

Optional

Called after a "mouse out" of the branch. Override setOnMouseOut() of 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)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action

Optional

Called after a "mouse over" of the branch. Override setOnMouseOver() of 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)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action

Optional

Called after a "mouse down" of the branch. Override setOnMouseDown() of 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)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action

Optional

Called after a "mouse up" of the branch. Override setOnMouseUp() of 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)

#### Arguments

branch (TafelTreeBranch) | the branch which called this action
opened (boolean) | the state of the branch

Optional

Called after the branch is opened or closed. Override setOnOpen() of 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
if (resultsFromTest) {
// OK, the branch will open
return true;
} else {
// Here, the branch won't open. The function
// myOpen() won't be called
return false;
}
}
function myOpen (branch, opened) {
alert(branch.getTag());
}
var branch = {
"id" : "tag1",
"txt" : "A branch",
"onbeforeopen" : myBeforeOpen,
"onopen" : myOpen
}

## Specialities

#### onerrorajax(function)

#### Arguments

type (string) | error type (open, drop or edit)
response (string) | Ajax response text
branch (TafelTreeBranch) | current branch
droppedOn (TafelTreeBranch) | branch dropped on (if it's a "drop" error)

Called after an error Ajax in functions drop, open or edit

#### Samples

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) {
// Check the type of error. Can be drop, edit or open
switch (type) {
case "drop" :
alert("An error occured during the drop");
break;
case "open" :
break;
case "edit" :
break;
}
}
var branch = {
"id" : "tag1",
"txt" : "A branch",
"ondropajax" : myDrop,
"droplink" : "page.php",
"onerrorajax" : myErrorAjax
}

#### openlink (string)

Optional, but required if onopenpopulate is defined. Used with the branch property canhavechildren

Path of a script page on the server. Override setOnOpenPopulate() of TafelTree

#### onopenpopulate (function)

#### Arguments

branch (TafelTreeBranch) | the branch opened
response (string) | the Ajax response text

Optional

Called after a branch is opened. When it's open, it launch an Ajax request at the page openlink and send the Ajax response to the user function. It must return a JSON string representing an array of one or more TafelTreeBranch. Override setOnOpenPopulate() of 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) {
// To see the content of response, you can "alert" it or
// put it in a div content like that :
branch.tree.debug(response);
// Evaluate a JSON response (note that the JSON is an array)
// The response MUST BE a description of one or more
// TafelTreeBranch
// [{
// "id" : "id_from_server_1",
// "txt" : "This is one is from the server",
// "img" : "globe.gif"
// }]
// Some tests
if (resultsFromTest) {
// OK, the branch will be open with new children
// from the server;
return response;
} else {
// Here, the branch won't be open and no children will
// be added
return false;
}
}
var branch = {
"id" : "tag1",
"txt" : "A branch",
"onopenpopulate" : myOpenPopulate,
"openlink" : "somewhere/serverScriptPage.php",
"canhavechildren" : true
}

#### Notes

- Response MUST BE an JSON array ( [ ] ) representing one or more TafelTreeBranch
- JSON MUST BE a description of one or more TafelTreeBranch
- Vars sent to the script page openlink are sent in POST
- These vars are :
  - " branch " = JSON description of the branch opened
  - " branch_id " = id of the branch opened
  - " tree_id " = id of the branch's parent tree
- All other vars passed throught openlink are in POST. For example, if openlink = "page.php?spec=1", you'll get spec in POST.

#### editlink (string)

Optional, but required if oneditajax is defined. Can be used with the branch property editable

Path of a script page on the server. Override setOnEditAjax() of TafelTree

#### oneditajax (function)

#### Arguments

branch (TafelTreeBranch) | the edited branch
response (string) | the Ajax response text
oldValue (string) | the old value

Optional

Called after the branch is edited. It launch an Ajax request at the page editlink and send the Ajax response to the user function. The method must return a string representing the new value of the branch. Override setOnEditAjax() of 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
function myEditAjax (branch, response, oldValue) {
// To see the content of response, you can "alert" it or
// put it in a div content like that :
branch.tree.debug(response);
// Evaluate a JSON response (note that the JSON is inside
// brackets). The response should contain, somehow, the
// new value of the branch
// ({
// "message" : "Everything was fine on the server",
// "newValue" : "new value of the branch",
// "anyOtherParams" : true
// })
// You can also just return the new value, if you want
// (and so you don't need brackets anymore). For example:
alert (response); // show the new text
// Some tests
if (resultsFromTest) {
// OK, the branch will be edited and will have as
// value what is returned by this function
return theNewValue;
} else {
// Here, the branch won't be edited and it'll keep
// the oldValue
return false;
}
}
var branch = {
"id" : "tag1",
"txt" : "A branch",
"oneditajax" : myEditAjax,
"editlink" : "somewhere/serverScriptPage.php"
}

#### Notes

- The Ajax response should contain the new value of the branch
- Vars sent to the script page editlink are sent in POST
- These vars are :
  - " branch " = JSON description of the branch
  - " branch_id " = id of the branch
  - " tree_id " = id of the branch's parent tree
  - " new_value " = the new value
  - " old_value " = the old value
- All other vars passed throught editlink are in POST. For example, if editlink = "page.php?spec=1", you'll get spec in POST.

#### droplink (string)

Optional, but required if ondropajax is defined.

Path of a script page on the server. Override setOnDropAjax() of TafelTree

#### ondropajax (function)

#### Arguments

branch_move (TafelTreeBranch) | the dragged branch
branch_here (TafelTreeBranch) | the branch dropped on
response (string) | the Ajax response text
drop_finished (boolean) | False if drop isn't done, True if drop is done
new_branch (boolean) | The inserted branch, if it's a copyDrag

Optional

Called after a drag&drop. When the branch is dropped, it launch an Ajax request at the page droplink and send the Ajax response to the user function. The medthod must return a boolean. You can make a "drop as sibling" if you keep the ALT key pressed. You can also do a "copydrag" if you maintain the CONTROL key pressed. Override setOnDropAjax() of TafelTree

This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.

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
function myDropAjax(branch_move, branch_here, response,
drop_finished, new_branch){
// Check that the move is not done now
if (!drop_finished) {
// To see the content of response, you can "alert" it or
// put it in a div content like that :
branch_move.tree.debug(response); // you can use branch_here too
// Evaluate a JSON response (note that the JSON is
// inside brackets). For example, if response equal :
// ({
// "param1" : true,
// "param2" : "salut biscuit"
// })
var obj = eval(response);
if (obj.param1) {
alert(obj.param2);
}
// Some tests
if (resultsFromTest) {
// OK, the branch will be dropped here
return true;
} else {
// Here, the branch won't be dropped and will
// return at her place
return false;
}
} else {
// We can get the new inserted branch, if it's a copyDrag
// style
if (new_branch) {
alert(new_branch.getId())
}
}
}
var branch = {
"id" : "tag1",
"txt" : "A branch",
"ondropajax" : myDropAjax,
"droplink" : "somewhere/serverScriptPage.php"
}

#### Notes

- Keep ALT pressed for an "as sibling" drop
- Keep CONTROL pressed to make a "copydrag"
- Vars sent to the script page droplink are sent in POST
- These vars are :
  - " drag " = JSON description of dragged branch
  - " drop " = JSON description of dropped-on branch
  - " drag_id " = dragged branch id
  - " drop_id " = drop branch id
  - " treedrag_id " = dragged branch's tree id
  - " treedrop_id " = drop branch's tree id
  - " sibling " = 0 if it's a drop "as child", 1 if it's an "as-sibling"
- All other vars passed throught droplink are in POST. For example, if droplink = "page.php?spec=1", you'll get spec in POST.

#### ...my own parameter (integer, float, string, object, function, boolean, array)

It's possible to add any other prameters. When you manipulate a branch, you can access these properties throught the branch's property struct.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

- These parameters ARE AVAILABLE in serialisation
- They ARE VISIBLE in a toString()
- They AREN'T INTERPRETED if you have an UL-LI structure

# TafelTreeBranch methods

## TafelTreeBranch public methods

#### hasChildren()

Returns true if branch has children, false if not

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.hasChildren());
</script>

#### isOpened()

Returns true if the branch is opened

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.isOpened());
</script>

#### isVisible()

Returns true if the branch is visible, false if not

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.isVisible());
</script>

#### getId()

Returns the ID of the branch

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getId());
</script>

#### changeId()

Change the branch's ID. Returns true if all is ok, false if the ID already exists in the tree.

#### Samples

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
if (branch.changeId("newId")) {
alert("Change ok");
} else {
alert("This id (" + newId + ") already exists");
}
</script>

#### getText()

Returns branch's content

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getText());
</script>

#### getParent()

Returns parent branch, if it exists

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var parent = branch.getParent();
if (parent) {
alert(parent.getId());
}
</script>

#### getParents()

Returns all parent branches. The first array's element is the closer parent. The last element is th root branch.

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Let's say a tree was created
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("Root : " + parents[i].getId());
}
}
</script>

#### getAncestor()

Returns the root of the branch. IF you search the root's ancestor, it will returns "null"

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var root = branch.getAncestor();
if (root) {
alert(root.getId());
}
</script>

#### getFirstBranch()

Returns the first branch's child, null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var child = branch.getFirstBranch();
if (child) {
alert(child.getId());
}
</script>

#### getLastBranch()

Returns the last branch's child, null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var child = branch.getLastBranch();
if (child) {
alert(child.getId());
}
</script>

#### getPreviousSibling()

Returns the previous branch's sibling, null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var sibling = branch.getPreviousSibling();
if (sibling) {
alert(sibling.getId());
}
</script>

#### getNextSibling()

Returns the next branch's sibling, null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var sibling = branch.getNextSibling();
if (sibling) {
alert(sibling.getId());
}
</script>

#### getPreviousBranch()

Returns the previous branch's sibling (without taking care of depth), null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var previous = branch.getPreviousBranch();
if (previous) {
alert(previous.getId());
}
</script>

#### getNextBranch()

Returns the next branch's sibling (without taking care of depth), null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var next = branch.getNextBranch();
if (next) {
alert(next.getId());
}
</script>

#### getPreviousOpenedBranch()

Returns the previous branch's opened sibling (without taking care of depth), null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var opened = branch.getPreviousOpenedBranch();
if (opened) {
alert(opened.getId());
}
</script>

#### getNextOpenedBranch()

Returns the next branch's opened sibling (without taking care of depth), null if there isn't any

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var opened = branch.getNextOpenedBranch();
if (opened) {
alert(opened.getId());
}
</script>

#### setText()

#### Arguments

txt (string) | the new text of the branch

Set branch's texte

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.setText("Hello");
</script>

#### getChildren()

Returns branch's children in an array

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var children = branch.getChildren();
for (var i = 0; i < children.length; i++) {
alert(children[i].getId());
}
</script>

#### getLevel()

Returns branch's depth. Root is at depth 0

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getLevel());
</script>

#### getIcon()

Returns the icon when the branch hasn't children

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getIcon());
</script>

#### getOpenIcon()

Returns the icon when the branch has children and is opened

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getOpenIcon());
</script>

#### getCloseIcon()

Returns the icon when the branch has children and is closed

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getCloseIcon());
</script>

#### getIconSelected()

Returns the icon when the branch hasn't children and is selected

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getIconSelected());
</script>

#### getOpenIconSelected()

Returns the icon when the branch has children and is opened and selected

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getOpenIconSelected());
</script>

#### getCloseIconSelected()

Returns the icon when the branch has children and is closed and selected

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getCloseIconSelected());
</script>

#### getCurrentIcon()

Returns the icon of the current state of the branch (open, close, children or not)

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.getCurrentIcon());
</script>

#### setIcons()

#### Arguments

icon (string) | icon when the branch hasn't children
iconOpen (string) | icon when the branch has children and is opened
iconClose (string) | icon when the branch has children and is closed

Set branch's icon. If iconOpen or iconClose aren't defined, they take the value of icon

#### Samples

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
// Branch will have page.gif for all states
branch.setIcons("page.gif");
// Here, each state will have a different icon
branch.setIcons("page.gif", "folderopen.gif", "folder.gif");
</script>

#### setIconsSelected()

#### Arguments

iconSelected (string) | icon when the branch hasn't children and is selected
iconOpenSelected (string) | icon when the branch has children and is opened and selected
iconCloseSelected (string) | icon when the branch has children and is closed and selected

Set branch's icon. If iconOpenSelected or iconCloseSelected aren't defined, they take respectively the value of iconopen and iconclose (see function setIcons())

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
// Branch will have page.gif if it's selected and hasn't
// any children
branch.setIconsSelected("page.gif");
// Here, each state will have a different icon
branch.setIconsSelected("page.gif", "folderopen.gif", "folder.gif");
</script>

#### isChild()

#### Arguments

branch (TafelTreeBranch, string) | branch to test, or just its ID

Returns true if the branch in argument is an ancestor, false if not.

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.isChild("otherBranch"));
</script>

#### openIt()

#### Arguments

open (boolean) | True open the branch, false close it

Permits to open or close the branch

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.openIt(true);
</script>

#### insertIntoFirst()

#### Arguments

item (object) | a JSON object describing a TafelTreeBranch

Insert the branch as a child, in the first position

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch1",
"txt" : "child first"
}
var newBranch = branch.insertIntoFirst(item);
alert(newBranch.getId());
</script>

#### insertIntoLast()

#### Arguments

item (object) | a JSON object describing a TafelTreeBranch

Insert the branch as a child, in the last position

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch2",
"txt" : "child last"
}
var newBranch = branch.insertIntoLast(item);
alert(newBranch.getId());
</script>

#### insertBefore()

#### Arguments

item (object) | a JSON object describing a TafelTreeBranch

Insert the branch as a sibling, just before

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch3",
"txt" : "sibling first"
}
var newBranch = branch.insertBefore(item);
alert(newBranch.getId());
</script>

#### insertAfter()

#### Arguments

item (object) | a JSON object describing a TafelTreeBranch

Insert the branch as a sibling, just after

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var item = {
"id" : "branch4",
"txt" : "sibling last"
}
var newBranch = branch.insertAfter(item);
alert(newBranch.getId());
</script>

#### clone()

Clone the structure of the initial branch. Doesn't create a new branch. It just returns a JSON object.

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var clonedStructure = branch.clone();
clonedStructure.id = "newid";
clonedStructure.txt = "My new branch cloned";
var newBranch = branch.insertAfter(clonedStructure);
alert(newBranch.getId());
</script>

#### Notes

- Doesn't create a branch. Returns only the JSON structure

#### move()

#### Arguments

here (TafelTreeBranch, string) | the new parent branch, or just its ID

Method which move the branch as a child of "here", in the last position

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.move("idNewParent");
</script>

#### moveBefore()

#### Arguments

here (TafelTreeBranch, string) | the new parent branch, or just its ID

Method which move the branch as a sibling after "here"

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.moveBefore("idNewSibling");
</script>

#### closeSiblings()

Close all sibling branches

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.closeSiblings();
</script>

#### addClass()

#### Arguments

class (string) | CSS class to add

Add a CSS class for the text

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.addClass("myCSSclass");
</script>

#### removeClass()

#### Arguments

class (string) | CSS class to retrieve

Retrieve a CSS class of the branch

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.removeClass("myCSSclass");
</script>

#### removeChildren()

Remove all children of the branch

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.removeChildren();
</script>

#### hasAllChildrenChecked()

Returns 1 if all children are checked, 0 if any, and -1 if some but not all

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.hasAllChildrenChecked());
</script>

#### isChecked()

Returns 1 if the branch is checked, 0 if not, and -1 if partially checked

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.isChecked());
</script>

#### check()

#### Arguments

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

Passer 1 pour la checker, 0 pour la unchecker

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.check(1);
</script>

#### select()

Select the branch

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.select();
</script>

#### unselect()

Unselect the branch

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a tree was created
var branches = tree.getSelectedBranches();
if (branches.length > 0) {
branches[0].unselect();
}
</script>

#### getWithinOffset()

Returns branch's coordinates inside the tree

#### Samples

1
2
3
4
5
6
7
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var pos = branch.getWithinOffset();
alert("Left : " + pos[0] + ", Top : " + pos[1]);
</script>

#### getAbsoluteOffset()

Returns branch's coordinates inside the navigator

#### Samples

1
2
3
4
5
6
7
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var pos = branch.getAbsoluteOffset();
alert("Left : " + pos[0] + ", Top : " + pos[1]);
</script>

## TafelTreeBranch tree-like public methods

#### serialize()

#### Arguments

debug (boolean) | true allows you to have a nice display of the serialized string. ONLY FOR DEBUG! Default value is false

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
// True to see a nice string (usefull for control)
alert(branch.serialize(true));
// Send the serialization to the server
new Ajax.Request("mapage.php", {
"parameters": "tree=" + branch.serialize()
});
</script>

#### countBranches()

Count the number of branches inside tthis branch

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
alert(branch.countBranches());
</script>

#### getOpenedBranches()

Retruns an array of all children-branches that are opened

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var branches = branch.getOpenedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getCheckedBranches()

Retruns an array of all children-branches that are checked

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var branches = branch.getCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getUnCheckedBranches()

Retruns an array of all children-branches that aren't checked

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var branches = branch.getUnCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getPartCheckedBranches()

Retruns an array of all children-branches that are partially checked

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var branches = branch.getPartCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getParentBranches()

Retruns an array of all children-branches that are themself parent of other branches

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var branches = branch.getParentBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getLeafBranches()

Retruns an array of all children-branches that are leaf branches (without children)

#### Samples

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var branches = branch.getLeafBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getBranches()

#### Arguments

filter (function) | the user function

Retruns an array of all branches below this one. It's possible to put a filter.

#### Samples

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">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
var branches = branch.getBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
// We can filter branches with an user function
function myFilter (branch) {
if (branch.getText() == "This one") {
return true;
} else {
return false;
}
}
var branches = branch.getBranches(myFilter);
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### expend()

Expends all children-branches

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.expend();
</script>

#### collapse()

Collapses all children-branches

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a tree was created
var branch = tree.getBranchById("idBranch");
branch.collapse();
</script>

# TafelTree methods

## TafelTree static methods

#### loadFromUL()

#### Arguments

id (string) | UL id
options (optional) (object) | All functions and parameters that can be set before generate(), including generate()
debug (optional) (boolean) | True display the JSON structure without creating the tree. Default value is false

UL generation doesn't allow to set your own parameters.

#### 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">My text</li>
<li id="b2" Timg="base.gif">Other text
<ul>
<li id="b3" Timg="page.gif" >Child</li>
<li id="b4" Timg="page.gif" Timgclose="folder.gif"
Timgopen="folderopen.gif">Other child
<ul>
<li id="b5" Timg="page.gif">Child</li>
<li id="b6" Timg="page.gif" Teditable="1">
Other child</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

- Functions to execute before generate() are set with the parameter OPTIONS
- All branch's attirbutes are preceded with a " T " except ID
- Attribute is NEVER between " " and its content is ESCAPED (simple quote) and is ALWAYS inside " "
- Attribute's content MUST NOT contains double quotes
- It's not possible to set your own parameter

## TafelTree getters & setters methods

#### new TafelTree()

#### Arguments

id (string) | DIV ID
struct (array) | JSON structure
options (optional) (object) | All functions and parameters that can be set before generate(), including generate()

#### 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()

#### Arguments

enable (boolean) | true for activating multi-line behaviour (default value, false)

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.enableMultiline(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"multiline" : true
});
</script>

#### reopenFromServerAfterLoad()

#### Arguments

enable (boolean) | false to empécher branches to be reopened from cookie, if their children are from the server. Default value is true

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.reopenFromServerAfterLoad(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"reopenFromServer" : true
});
</script>

#### enableCheckboxes()

#### Arguments

enable (boolean) | True activate the "checkbox 2 states" behaviour (default value, false)

"Checkbox 2 states" means that you can check or uncheck a branch, but you'll never have partially checked branches.

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.enableCheckboxes(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"checkboxes" : true
});
</script>

#### Notes

- Checkboxes 2 states can be either " checked " or " unchecked "
- For managing 3 states, see enableCheckboxesThreeState() function

#### enableCheckboxesThreeState()

#### Arguments

enable (boolean) | True activate the "checkbox 3 states" behaviour (default value, false)

"Checkbox 2 states" means that it's an "clever check". When you check or uncheck a branch, il will automatically check or uncheck all children. If some children aren't checked and some other are, the parent will be partially checked.

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.enableCheckboxesThreeState(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"checkboxesThreeState" : true
});
</script>

#### Notes

- There's no need to call enableCheckboxes() function.

#### enableCookies()

#### Arguments

enable (boolean) | True activates cookies management (default value, true)
separator (optional) (string) | Separator used in cookies (default value, " | ")

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.enableCookies(true, "#___#");
// Options. It's not possible to set the separator from here
var tree = new TafelTree("idTree", myStruct, {
"cookies" : true
});
</script>

#### Notes

- Cookies remember which branches are opened after a reload
- Modify the separator can be useful if a " | " is part of branches ID

#### openOneAtOnce()

#### Arguments

enable (boolean) | True enable the fact that you can only open one branch at one (default value, false)

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.openOneAtOnce(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"openOneAtOnce" : true
});
</script>

#### openAtLoad()

#### Arguments

open (boolean) | True open all tree at load (default value, false)

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.openAtLoad(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"openAtLoad" : true
});
</script>

#### Notes

- When cookies are activated, it's the cookie state which is interpreted

#### openAfterAdd()

#### Arguments

open (boolean) | True open the branch after an insert or a drop, false keep it closed

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.openAfterAdd(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"openAfterAdd" : false
});
</script>

#### showSelectedBranch()

#### Arguments

show (boolean) | True highlight the selected branch (default value, true)

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.showSelectedBranch(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"showSelectedBranch" : false
});
</script>

#### setLineStyle()

#### Arguments

style (string) | Set the line style of the tree (default value, " line ")

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
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()

#### Arguments

icon (string) | The icon if the branch hasn't children
iconOpen (string) | The icon if the branch has children and is opened
iconClose (string) | The icon if the branch has children and is closed

Set default icons for all banches. If iconOpen or iconClose aren't defined, they take the value of icon

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Let's say a structure was defined
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()

#### Arguments

iconSelected (string) | icon when the branch hasn't children and is selected
iconOpenSelected (string) | icon when the branch has children and is opened and selected
iconCloseSelected (string) | icon when the branch has children and is closed and selected

Set branch's icon. If iconOpenSelected or iconCloseSelected aren't defined, they take respectively the value of iconopen and iconclose (see function setIcons())

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Let's say a structure was defined
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()

#### Arguments

dropStyle (string) | 'sibling', 'siblingcopy', child' or 'childcopy', default value is 'child'

Set default drop behaviour. Set sibling and dropping a branch will make a new sibling or, by keeping ALT pressed, a new child. And vice-versa if it's set to child.

If you set siblingcopy, the drop will result in a new sibling which is a copy of the branch dropped. If you maintain ALT + CTRL pressed, it will move the branch as child, without copy. Well, the best thing to do is to test the four keywords, and see what happends...

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.setBehaviourDrop("sibling");
// Options
var tree = new TafelTree("idTree", myStruct, {
"behaviourDrop" : "sibling"
});
</script>

#### disableDropCTRL()

#### Arguments

ctrlDrop (boolean) | False disable the functionality CTRL drop, default value true

If you give "false", it will disable the CTRL key. So it you'll not be able to make a copyDrag. A copyDrag makes a copy of the branch moved. An insertDrag just move the branch without creating any other.

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.disableDropCTRL(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"dropCTRL" : false
});
</script>

#### disableDropALT()

#### Arguments

altDrop (string) | False disable the functionality ALT drop, default value true

False disable the functionality of having 2 different drop styles. Either "as sibling" or "as child". If you give "false" to this function, you will have only the possibility of drop defined by the function setBehaviourDrop()

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.disableDropALT(false);
// Options
var tree = new TafelTree("idTree", myStruct, {
"dropALT" : false
});
</script>

#### propagateRestriction()

#### Arguments

propagate (boolean) | True propagate the interdiction to move after a ajax drag&drop (default value, true)

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// Let's say a structure was defined
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

- Propagation means that children of the branch moved are blocked and can't be moved. (used to skip data problems).

#### enableRTL()

#### Arguments

rtl (boolean) | True display the tree from right to left (default value, false)

#### Samples

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.enableRTL(true);
// Options
var tree = new TafelTree("idTree", myStruct, {
"rtlMode" : true
});
</script>

## TafelTree public methods

#### generate()

#### Arguments

partLoad (boolean) | True generate the tree step-by-step (experimental), default value is false

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.generate();
</script>

#### serialize()

#### Arguments

debug (boolean) | true allows you to have a nice display of the serialized string. ONLY FOR DEBUG! Default value is false

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
// Let's say a structure was defined
var tree = new TafelTree("idTree", myStruct);
tree.generate();
// True to see a nice string (usefull for control)
alert(tree.serialize(true));
// Send the serialization to the server
new Ajax.Request("mapage.php", {
"parameters" : "tree=" + tree.serialize()
});
</script>

#### getSelectedBranches()

#### Samples

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
// Let's say a structure was defined
var selected = tree.getSelectedBranches();
if (selected.length > 0) {
for (var i = 0; i < selected.length; i++) {
alert(selected[i].getId());
}
}
</script>

#### getBranchById()

#### Arguments

id (string) | branch ID

#### Samples

1
2
3
4
5
6
<script type="text/javascript">
// Let's say a structure was defined
var branch = tree.getBranchById("idBranch");
alert(branch.getId();
</script>

#### bind()

#### Arguments

tree (TafelTree) | the tree to bind
tree (TafelTree) | an other tree
... (TafelTree) | all the trees we want

This binding is bi-directional. That means that you can drop from tree1 to tree2 and from tree2 to tree1.

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
// In this case, it will be possible to drag&drop between
// tree_1 and tree_2 and inversement
var tree_2 = new TafelTree("idTree_2", myOtherStruct);
tree.bind(tree_2);
</script>

#### Notes

- This binding is bi-directional

#### bindAsUnidirecitonal()

#### Arguments

tree (TafelTree) | the tree to bind
tree (TafelTree) | an other tree
... (TafelTree) | all the trees we want

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
// In this case, it will only be possible to drag&drop
// from tree to tree_2
var tree_2 = new TafelTree("idTree_2", myOtherStruct);
tree.bindAsUnidirecitonal(tree_2);
</script>

#### Notes

- This binding is uni-directional

#### isBindedWith()

#### Arguments

tree (TafelTree) | the tree to test if it's binded with

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
var tree_2 = new TafelTree("idTree_2", myOtherStruct);
tree.bindAsUnidirectional(tree_2);
alert(tree.isBindedWith(tree_2)); // returns true
alert(tree_2.isBindedWith(tree)); // returns false
</script>

#### unselect()

Unselect branches, if one or more were selected

#### Samples

1
2
3
4
5
<script type="text/javascript">
// Let's say a structure was defined
tree.unselect();
</script>

#### countBranches()

Count the number of branches

#### Samples

1
2
3
4
5
<script type="text/javascript">
// Let's say a structure was defined
alert(tree.countBranches());
</script>

#### getOpenedBranches()

Retruns an array of all branches that are opened

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
var branches = tree.getOpenedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getCheckedBranches()

Retruns an array of all branches that are checked

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
var branches = tree.getCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getUnCheckedBranches()

Retruns an array of all branches that aren't checked

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
var branches = tree.getUnCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getPartCheckedBranches()

Retruns an array of all branches that are partially checked

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
var branches = tree.getPartCheckedBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getParentBranches()

Retruns an array of all branches that are themself parent of other branches

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
var branches = tree.getParentBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getLeafBranches()

Retruns an array of all branches that are leaf branches (without children)

#### Samples

1
2
3
4
5
6
7
8
<script type="text/javascript">
// Let's say a structure was defined
var branches = tree.getLeafBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
</script>

#### getBranches()

#### Arguments

filter (function) | the user function

Retruns an array of all branches. It's possible to put a filter.

#### Samples

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">
// Let's say a structure was defined
var branches = tree.getBranches();
for (var i = 0; i < branches.length; i++) {
alert(branches[i].getId());
}
// We can filter branches with an user function
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()

Expends all branches

#### Samples

1
2
3
4
5
<script type="text/javascript">
// Let's say a structure was defined
tree.expend();
</script>

#### collapse()

Collapses all branches

#### Samples

1
2
3
4
5
<script type="text/javascript">
// Let's say a structure was defined
tree.collapse();
</script>

#### insertBranch()

#### Arguments

position (TafelTreeBranch, string) | the source branch (or just the ID)
item (object) | new branch (format JSON TafelTreeBranch properties)
sibling (boolean) | true means we want to insert it as sibling, default value false (=child)
first (boolean) | true means we want to insert it as first child or sibling before, default value false

Allows you to insert a branch as sibling or as child, before, after, in the first or last place.

#### Samples

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">
// Let's say a structure was defined
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"
}
// Child branch - in first
var branch1 = tree.insertBranch("id_branch", item, false, true);
// Child branch - in last
var branch2 = tree.insertBranch("id_branch", item2, false, false);
// Sibling branch - before
var branch3 = tree.insertBranch("id_branch", item3, true, true);
// Sibling branch - after
var branch4 = tree.insertBranch("id_branch", item4, true, false);
</script>

#### removeBranch()

#### Arguments

branch (TafelTreeBranch, string) | the branch to remove (or just the ID)

Remove the branch and all its children

#### Samples

1
2
3
4
5
<script type="text/javascript">
// Let's say a structure was defined
tree.removeBranch("id_branch_to_delete");
</script>

#### debug()

#### Arguments

str (string) | The string to display

Display a string into the Debug Zone

#### Samples

1
2
3
4
5
<script type="text/javascript">
// Let's say a structure was defined
tree.debug("text to debug : " + tree.id);
</script>

## TafelTree event methods

#### setOnDebug()

#### Arguments

func (function) | The user function to call

Called after the function tree.debug()

#### Samples

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

#### Notes

- By default, tree.debug() display only the text into the HTMLDebugObj

#### setOnLoad()

#### Arguments

func (function) | The user function to call

Called when the tree finished to load

#### Samples

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

#### setOnOpen()

#### Arguments

func (function) | The user function to call

Called after a branch is opened (status = true) or closed (status = false)

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// User function
function myOpen (branch, status) {
var str = (status) ? "opened" : "closed";
alert(branch.getId() + " has been " + str);
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onOpen" : myOpen
});
</script>

#### setOnBeforeOpen()

#### Arguments

func (function) | The user function to call

Called before a branch is open (status = true) or closed (status = false). If it returns false, the branch will keep its actual state.

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
// User function
function myBeforeOpen (branch, status) {
var strNow = (status) ? "opened" : "closed";
var strNext = (status) ? "closed" : "opened";
alert(branch.getId() + " is " + strNow +
" and will be " + strNext +
" if this function returns true");
return true;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onBeforeOpen" : myBeforeOpen
});
</script>

#### setOnMouseOver()

#### Arguments

func (function) | The user function to call

Called when the mouse pass trought the branch

#### Samples

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

#### setOnMouseOut()

#### Arguments

func (function) | The user function to call

Called when the mouse quit the branch

#### Samples

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

#### setOnMouseDown()

#### Arguments

func (function) | The user function to call

Called when the mouse "down" on the branch

#### Samples

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

#### Arguments

func (function) | The user function to call

Called when the mouse "up" on the branch

#### Samples

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

#### Arguments

func (function) | The user function to call

Called after a click on the branch

#### Samples

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

#### Notes

- A clicked-branch will be automatically selected

#### setOnDblClick()

#### Arguments

func (function) | The user function to call

Called after a double-click on a branch

#### Samples

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

#### Notes

- If edition is defined, the double-clic will start the branch's edition

#### setOnEdit()

#### Arguments

func (function) | The user function to call

Activate branches edition. Called after the edition of the branch (precisely, after the blur() of the input). The new content will be the one returned by the user function.

#### Samples

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

#### Notes

- If you have a doube-click fuction (tree.setOnDblClick()), the edition is no more available. It's one or the other, but not edition and double-click together

#### setOnBeforeCheck()

#### Arguments

func (function) | The user function to call

Called when you check or uncheck a branch, BEFORE changes are made. If you don't want its state to change, just return false

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
// User function
function myBeforeCheck (branch, status) {
var strNow = (status) ? "checked" : "unchecked";
var strNext = (status) ? "unchecked" : "checked";
alert(branch.getId() + " is " + strNow +
" and will be " + strNext +
" if this function returns true");
return true;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onBeforeCheck" : myBeforeCheck
});
</script>

#### setOnCheck()

#### Arguments

func (function) | The user function to call

Called after the check (or uncheck) is done

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
// User function
function myCheck (branch, status) {
var str = (status) ? "checked" : "unchecked";
alert(branch.getId() + " is now " + str);
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onCheck" : myCheck
});
</script>

#### setOnDrop()

#### Arguments

func (function) | The user function to call

Called after the drop of the branch. It must return a boolean. You can make a "drop as sibling" if you keep the ALT key pressed. You can also do a "copydrag" if you maintain the CONTROL key pressed.

This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
// User function
function myDrop (branchMoved, newParent, dropFinished) {
if (!dropFinished) {
alert(branchMoved.getId()+ " will be child of "
+ newParent.getId());
} else {
alert(branchMoved.getId()+ " is now child of "
+ newParent.getId());
}
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onDrop" : myDrop
});
</script>

#### Notes

- Keep ALT pressed for an "as sibling" drop
- Keep CONTROL pressed to make a "copydrag"

#### setOnDropAjax()

#### Arguments

func (function) | The user function to call
link (string) | Link to the server page

Called after a drag&drop. When the branch is dropped, it launch an Ajax request at the page droplink and send the Ajax response to the user function. The medthod must return a boolean. You can make a "drop as sibling" if you keep the ALT key pressed. You can also do a "copydrag" if you maintain the CONTROL key pressed.

This method is called twice. One time before drop happens (drop_finished = false) and one time after the drop is done (drop_finished = true), if there were no errors before.

#### Samples

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
<script type="text/javascript">
// User function
function myDrop(branchMoved,newParent,response,dropFinished){
// Beware, the function is called twice. Here, we
// check before drop happends
if (!dropFinished) {
// The response is the responseText of XMLHttpRequest
// object
alert(response);
// The text can be a JSON string, so you should
// evaluate it like that :
var obj = eval("" + response + "");
// You have to put brackets if you didn't put
// them in the server side
alert(obj.myProperty);
alert(branchMoved.getId()+ " will be child of " +
newParent.getId() +
" if this function returns true");
return true;
}
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onDropAjax" : [myDrop, "pageScript.php"]
});
</script>
// PHP file sample
<?php
// Do some stuff
// ...
// And display a JSON string. Note that if you return an object
// you need to display it inside brackets
?>
({
"myProperty" : "myValue",
"other" : ["this", "is", "an", "array"]
})

#### Notes

- Keep ALT pressed for an "as sibling" drop
- Keep CONTROL pressed to make a "copydrag"
- Vars sent to the script page droplink are sent in POST
- These vars are :
  - " drag " = JSON description of dragged branch
  - " drop " = JSON description of dropped-on branch
  - " drag_id " = dragged branch id
  - " drop_id " = drop branch id
  - " treedrag_id " = dragged branch's tree id
  - " treedrop_id " = drop branch's tree id
  - " sibling " = 0 if it's a drop "as child", 1 if it's an "as-sibling"
- All other vars passed throught droplink are in POST. For example, if droplink = "page.php?spec=1", you'll get spec in POST.

#### setOnOpenPopulate()

#### Arguments

func (function) | The user function to call
link (string) | Link to the server page

Called after a branch is opened. When it's open, it launch an Ajax request at the page openlink and send the Ajax response to the user function. It must return a JSON string representing an array of one or more TafelTreeBranch

#### Samples

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
<script type="text/javascript">
// User function
function myOpen (branch, response) {
// The response is the responseText of XMLHttpRequest
// object
alert(response);
// It MUST BE a JSON string which MUST BE the structure
// of a TafelTreeBranch
var childBranch = eval(response);
alert(childBranch.id + "\n" + childBranch.txt);
alert(branch.getId() + " will be opened if " +
"this function returns true");
return response;
}
var tree = new TafelTree ("idtree", {
"generate" : true,
"onOpenPopulate" : [myOpen, "pageScript.php"]
});
</script>
// PHP file sample
<?php
// Do some stuff
// ...
// 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

- Response MUST BE an JSON array ( [ ] ) representing one or more TafelTreeBranch
- JSON MUST BE a description of one or more TafelTreeBranch
- Vars sent to the script page openlink are sent in POST
- These vars are :
  - " branch " = JSON description of the branch opened
  - " branch_id " = id of the branch opened
  - " tree_id " = id of the branch's parent tree
- All other vars passed throught openlink are in POST. For example, if openlink = "page.php?spec=1", you'll get spec in POST.

#### setOnEditAjax()

#### Arguments

func (function) | The user function to call
link (string) | Link to the server page

Called after the branch is edited. It launch an Ajax request at the page editlink and send the Ajax response to the user function. The method must return a string representing the new value of the branch.

#### Samples

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 myEditAjax (branch, response, oldValue) {
// To see the content of response, you can "alert" it or
// put it in a div content like that :
branch.tree.debug(response);
// Evaluate a JSON response (note that the JSON is
// inside brackets). The response should contain, somehow,
// the new value of the branch
// ({
// "message" : "Everything was fine on the server",
// "newValue" : "new value",
// "anyOtherParams" : true
// })
// You can also just return the new value, if you want.
// For example :
alert (response); // show the new text
// Some tests
if (resultsFromTest) {
// OK, the branch will be edited and will have as
// value what is returned by this function;
return theNewValue;
} else {
// Here, the branch won"t be edited and it"ll keep
// the oldValue
return false;
}
}

#### Notes

- The Ajax response should contain the new value of the branch
- Vars sent to the script page editlink are sent in POST
- These vars are :
  - " branch " = JSON description of the branch
  - " branch_id " = id of the branch
  - " tree_id " = id of the branch's parent tree
  - " new_value " = the new value
  - " old_value " = the old value
- All other vars passed throught editlink are in POST. For example, if editlink = "page.php?spec=1", you'll get spec in POST.

#### setOnErrorAjax()

#### Arguments

func (function) | The user function to call

Called after an error Ajax in functions drop, open or edit

#### Samples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myErrorAjax (type, response, branch, droppedOn) {
// Check error type. Can be drop, edit ou open
switch (type) {
case "drop" :
break;
case "open" :
break;
case "edit" :
break;
alert("Une erreur est survenue pendant l'édition");
break;
}
}

# TafelTreeManager methods

## TafelTreeManager Keyboard events description

#### Events

The follwing keyboard keys are managed :

- ARROW_LEFT
- ARROW_RIGHT
- ARROW_UP
- ARROW_DOWN
- HOME
- END
- F2 (editing)
- ENTER (stop editing)
- ESCAPE (unselect)
- DELETE
- CTRL + X (APPLE-KEY on mac Safari)
- CTRL + C (APPLE-KEY on mac Safari)
- CTRL + V (APPLE-KEY on mac Safari)

It's possible to desactivate certain keys or adding your own. See setKey() function

## TafelTreeManager public methods

#### setKeys()

#### Arguments

keys (array) | array containing the key code and the function for the key

Can manage on or more behaviour for one or more keyboard keys. The function is called just after the key is pressed. The user function has for arguments the tree where the key was pressed, the modifiers-key pressed (ctrl, alt, shit or meta), the key code and the Event object.

#### 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
<script type="text/javascript">
// function definition
function myOnDelete (tree, code, modifiers, ev) {
// Do some stuff and return true if you want
// the process to continue. For DEL key, for example,
// there's already a build-in function. If you
// return true, the delete function will be called.
// If you return false, it will not be called...
if (okForDelete) {
return true;
} else {
return false;
}
}
// key definition
var keys = [
{
"key" : 46,
"func" : myOnDelete
}
];
TafelTreeManager.setKeys(keys);
</script>

#### Notes

- modifiers.ctrlKey = true if Ctrl is pressed
- modifiers.altKey = true if Alt is pressed
- modifiers.shiftKey = true if Shift is pressed
- modifiers.metaKey = true if "Pomme" (on mac Safari) is pressed

#### disableKeyboardEvents()

Disable all keyboard events

#### Exemple

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

#### disableKeyboardStructuralEvents()

Disable all build-in structural functions., like DEL, COPY, PASTE, etc. So it's still possible to navigate with arrows. User functions are active too.

#### Exemple

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

#### getCurrentTree()

Returns the current tree. Null if no tree is selected.

#### Exemple

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

#### setCurrentTree()

Set the current tree where all keyboard actions will be done.

#### Exemple

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

Treeview JS TafelTree

2006-12-30, Tafel. Optimised for Mozilla Firefox