doc

TafelTree-view (Javascript)

Treeview based on the library Script Aculous

FAQ

What are the options I can put into the constructor ?

Here are parameters and possible values :

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

<script type="text/javascript">

var tree = new TafelTree("idTree", myJSONstruct, {

"generate" : true,

"imgBase" : "imgs/",

"width" : "300px", // default : 100%

"height" : "250px", // default : auto

"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", // line, full, none

"rtlMode" : false,

"dropALT" : true,

"dropCTRL" : false,

"propagateRestriction" : true,

"reopenFromServer" : true,

"behaviourDrop" : "child", // or sibling, childcopy, siblingcopy

"bind" : [treeToBind, otherTree], // Object(s) TafelTree

"bindAsUnidirectional" : [treeToBind2] // Object(s) TafelTree

});

</script>

 

And for a branch ?

Here are parameters and possible values for a 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
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

<script type="text/javascript">

var branch = {

// Required properties

"id" : "branchID",

"txt" : "Branch text",

// Children branches

"items" : {...some branches descriptions...},

// Optional properties

"img" : "page.gif",

"imgopen" : "folderopen.gif",

"imgclose" : "folder.gif",

"imgselected" : "page.gif",

"imgopenselected" : "folderopen.gif",

"imgcloseselected" : "folder.gif",

"acceptdrop" : true,

"draggable" : true,

"check" : 1,

"editable" : false,

"last" : false,

"open" : true,

"style" : "cssStyleName",

"title" : "A title attribute",

"tooltip" : "<h4>A HTML tooltip</h4>",

// "Function" properties

"onbeforecheck" : myFunc1,

"oncheck" : myFunc2,

"onbeforeopen" : myFunc3,

"onopen" : myFunc4,

"onedit" : myFunc5,

"ondrop" : myFunc6,

"onclick" : myFunc7,

"ondblclick" : myFunc8,

"onmouseover" : myFunc9,

"onmouseout" : myFunc10,

"onmousedown" : myFunc11,

"onmouseup" : myFunc12,

"onerrorajax" : myFunc13,

// Drop ajax

"ondropajax" : myFunc14,

"droplink" : "drop.php",

// Open ajax

"onopenpopulate" : myFunc15,

"openlink" : "open.php",

"canhavechildren" : true,

// Edit ajax

"oneditajax" : myFunc16,

"editlink" : "edit.php",

// User properties

"myString" : "hi",

"myBool" : false,

"myInt" : 125,

"myArray" : ["hop", "et rehop"],

"myFunction" : function(){alert("cool");},

"myObject" : {"property1":1,"property2":112},

"anyThingElse" : true

};

</script>

 

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