doc

TafelTree-view (Javascript)

Treeview based on the library Script Aculous

Documentation

Offline documentation

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>

 

refreshChildren()

Refresh branch's children from server

Samples

1
2
3
4
5
6

<script type="text/javascript">

// Let's say a tree was created

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

branch.refreshChildren();

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

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

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

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

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

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

Returns 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

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

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

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

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

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

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

Returns 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

Returns 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

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

alert("There was an error during edition");

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>

 

Language choice

Download

Download version v1.9.1

Click here

 

Documentation

A complete documentation is available here

 

Smarty

A Smarty module is developed for the tree. Thanks to Abalam! Module smarty

 

They're using it

Already some projects use this library.
 

Treeview JS TafelTree

2007-07-23, Tafel. Optimised for Mozilla Firefox

ttom.php'); ?>