Tree

jquery.tree

A simple tree control that creates ul/li and adds expanding/collapsing functionality.

It is jquery-ui compatible (actually relies on it)

Usage

    <script type="text/javascript" src="jquery.tree.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.tree.css" />

Dynamic filled

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

Javascript:

var data = [{
  name: "root",
  children: [
  {name: "child"},
  {name: "branch",
  children: [
    {name: "leaf"}
  ]}
  ]
}, { name: "root2" }];

$("#myTree").tree({
	open:true,
	data: data
});

API

tree(options)

{
	/**
	 * automatically prepend icons
	 */
	autoIcon: false,
	/**
	 * open all levels
	 */
	open: false,
	/**
	 * remember which part of the tree was open in a cookie (non-null = name of the cookie)
	 */
	remember: null,
	/**
	 * field used for id (only required for remembering which node was "open")
	 */
	id: null,
	/**
	 * field used as name, this can also be a function that renders the object
	 */
	name: "name",
	/**
	 * field used for title
	 */
	title: null,
	/**
	 * field to recurse into
	 */
	children: "children",
	/**
	 * set to true to allow multiple elements to be selected
	 */
	multiple: false,
	/**
	 * style when a node is active (null: disables activation)
	 */
	active: "ui-state-active",
	hover: "ui-state-hover",
	
	
	/**
	 * the object used to fill/collect data
	 */
	data: null,
	
	/**
	 * true to execute the loaddata automatically
	 */
	load: true,
	
	/**
	 * callback function for data fetching
	 */
	loadData: null,
	
	/**
	 * callback function when a node is selected
	 */
	select: null,
	/**
	 * callback function when a node is double clicked
	 */
	dblclick: null,
	
	/**
	 * callback function when a node is drag/dropped. if null drag/dropping is disabled
	 */
	drop: null,
	/**
	 * optional "root" target which will be visible when dragging starts
	 */
	rootTarget: '<ins class="ui-icon ui-icon-home"></ins><i>Root</i>'}

fill