Introduction

CodeThatTree is a highly configurable and easy to use tree control. Tree structure as well as item look and behavior are defined in a single configuration.

To use the control define a configuration and insert into your web page code creating a tree object from this configuration.

The configuration may be stored as JavaScript object (for example in a separate js-file, in an html page) or as XML (see Reading XML from server).

With CodeThatTree you can

customize items' look

define items' position

customize items' behavior

 describe tree configuration in xml-file (unique feature of CodeThat Tree)

 describe the tree with Explorer-like style

 change tree structure and appearance at run-time

 create tree with unlimited depth [popup]

 store state of the tree in cookies

 include almost any HTML code as nodes text

keep tree structure in database and generate tree dynamically from database

create tree with special behaviour when mouse-over event happens

With CodeThatTree you can create trees with almost unlimited items number. To make such a tree faster follow the performance tips.

 Read Standard vs PRO to know the differences between CodeThatTree Standard and PRO.

Most of configuration parameters are optional and a simple JavaScript configuration may look like this:

var TreeDef = {
	"style" :
	{
		"imgitem" : "img/ats.gif", // Image for leafs
		"imgdir" : "img/atg.gif", // Image for directories
		"imgdiropen" : "img/ato.gif", // Image for directories in open state
		"itemoffset" : {
			"x" : "10", "y" : "0"
		}
		// Offset for a next tree level
	},
	// Main items array. In this case has one item Item1
	"items" :
	[
	{
		"text" : "Item0",
		// Subtree definition
		"menu" :
		{
			// Subitems array. Has three items.
			"items" :
			[
				{
					"text" : "Item1"
				},
				{
					"text" : "Item2"
				},
				{
					"text" : "Item3"
				}
			]
		}
	} ]
}; 

Code to create the tree control may look like this:

var t = new CTree(TreeDef, "sample");
t.create(100, 100); 

The tree will look on a web page like this:

or collapsed:

General structure of the configuration is

var TreeDef = {
	"style" : { }
	"styleover" : { },
	"position" : { },
	"target" : " ",
	"items" : [ ]
}; 

Style and styleover define items look, position defines tree position, target defines global url target (see Item behavior), and items define tree structure.

The items array consists of item object with following structure:

{
	"text" : " ",
	"style" : { },
	"styleover" : { },
	"menu" : { },
	"action" : { },
}

Style and styleover attributes define look of the item (see Item look), menu defines subitems, action defines the action to be performed with mouse click (see Item behavior).

Read more about CodeThatTree >>

© CodeThat.com, 2003-2008
Design by XTLabs, Inc.