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>
Here are parameters and possible values :
|
|
Here are parameters and possible values for a branch :
|
|
Language choice
Download
Download version v1.9.1
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
Treeview JS TafelTree
2007-07-23, Tafel. Optimised for Mozilla Firefox