doc

TafelTree-view (Javascript)

Treeview based on the library Script Aculous

Installation step-by-step

Download the script

First of all, you have to download the tree. The last version of it is available on SourceForge (just like the CVS, see the home page). This version is ZIP format only.

In the HEAD

Here's what you need in the HEAD tag. Of course you have to take care of the paths.

1
2
3
4
5
6
7

<head>

<link rel="stylesheet" type="text/css" href="css/tree.css" />

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js"></script>

<script type="text/javascript" src="Tree.js"></script>

</head>

 

Then you'll have to place the tree's parent element into the BODY tag.

1
2
3
4
5
6

<body>

 

<div id="myTree"></div>

 

</body>

 

Structure definition

It's very easy to define the structure. You just have to create a JSON object. This particular description allow you to obtain easily and quickly an array of objects representing the branches.

You can define the structure either in the HEAD or in the BODY. In this sample, we will call it in the BODY.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">

// This structure represents one root node with two children

var struct = [

{

'id' : 'root_1',

'txt' : 'Root 1',

'items' : [

{

'id' : 'branch_1',

'txt' : 'Branch 1'

},{

'id' : 'branch_2',

'txt' : 'Branch 2'

}

]

}

];

</script>

 

Initialisation

Tree's initialisation is made after the complete loading of the page. A method is automatically called when this event rise. It's the TafelTreeInit() method.

Just like the structure, you can define the structure either in the HEAD or in the BODY. In this sample, we will call it in the BODY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">

// We declare the tree outside of the function. This way it's

// accessible from any function

var tree = null;

 

// Tree initialisation. This function is called automatically

// when the page finish to load

function TafelTreeInit () {

tree = new TafelTree('myTree', struct, {

'generate' : true,

'imgBase' : 'imgs/',

'width' : '100%', // default value : 100%

'height' : '150px', // default value : auto

'openAtLoad' : true,

'cookies' : false

});

}

</script>

 

You can have a complete description of what you can put into the constructor here.

Result

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