My Object Oriented Tree
MIT-style license.
Inspired by:
mootree.js | My Object Oriented Tree |
MooTreeControl | This class implements a tree control. |
Properties | |
insert | Creates a new node under the root node of this tree. |
select | Sets the currently selected node. |
expand | Expands the entire tree, recursively. |
collapse | Collapses the entire tree, recursively. |
get | |
adopt | Adopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements. |
disable | Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur. |
enable | Enables visual updates again after a call to MooTreeControl.disable |
MooTreeNode | This class implements the functionality of a single node in a MooTreeControl. |
Properties | |
insert | Creates a new node, nested inside this one. |
remove | Removes this node, and all of it’s child nodes. |
clear | Removes all child nodes under this node, without removing the node itself. |
update | Update the tree node’s visual appearance. |
getImg | Creates a new image, in the form of HTML for a DIV element with appropriate style. |
toggle | By default (with no arguments) this function toggles the node between expanded/collapsed. |
select | Called by MooTreeControl when the selection changes. |
load | Asynchronously load an XML structure into a node of this tree. |
This class implements a tree control.
root | returns the root MooTreeNode object. |
selected | returns the currently selected MooTreeNode object, or null if nothing is currently selected. |
onExpand | called when a node is expanded or collapsed: function(node, state) - where node is the MooTreeNode object that fired the event, and state is a boolean meaning true:expanded or false:collapsed. |
onSelect | called when a node is selected or deselected: function(node, state) - where node is the MooTreeNode object that fired the event, and state is a boolean meaning true:selected or false:deselected. |
onClick | called when a node is clicked: function(node) - where node is the MooTreeNode object that fired the event. |
The constructor takes two object parameters: config and options. The first, config, contains global settings for the tree control - you can use the configuration options listed below. The second, options, should contain options for the MooTreeNode constructor - please refer to the options listed in the MooTreeNode documentation.
div | a string representing the div Element inside which to build the tree control. |
mode | optional string, defaults to ‘files’ - specifies default icon behavior. In ‘files’ mode, empty nodes have a document icon - whereas, in ‘folders’ mode, all nodes are displayed as folders (a’la explorer). |
grid | boolean, defaults to false. If set to true, a grid is drawn to outline the structure of the tree. |
theme | string, optional, defaults to ‘mootree.gif’ - specifies the ‘theme’ GIF to use. |
loader | optional, an options object for the MooTreeNode constructor - defaults to {icon:’mootree_loader.gif’, text:’Loading...’, color:’a0a0a0’} |
onExpand | optional function (see Events above) |
onSelect | optional function (see Events above) |
Properties | |
insert | Creates a new node under the root node of this tree. |
select | Sets the currently selected node. |
expand | Expands the entire tree, recursively. |
collapse | Collapses the entire tree, recursively. |
get | |
adopt | Adopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements. |
disable | Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur. |
enable | Enables visual updates again after a call to MooTreeControl.disable |
Creates a new node under the root node of this tree.
options | an object containing the same options available to the MooTreeNode constructor. |
A new MooTreeNode instance.
Sets the currently selected node. This is called by MooTreeNode when a node is selected (e.g. by clicking it’s title with the mouse).
node | the MooTreeNode object to select. |
Retrieves the node with the given id | or null, if no node with the given id exists. |
id | a string, the id of the node you wish to retrieve. |
Node id can be assigned via the MooTreeNode constructor, e.g. using the MooTreeNode.insert method.
Adopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements.
id | a string representing the ul element to be adopted, or an element reference. |
parentNode | optional, a MooTreeNode object under which to import the specified ul element. Defaults to the root node of the parent control. |
The ul/li structure must be properly nested, and each li-element must contain one a-element, e.g.:
<ul id="mytree"> <li><a href="test.html">Item One</a></li> <li><a href="test.html">Item Two</a> <ul> <li><a href="test.html">Item Two Point One</a></li> <li><a href="test.html">Item Two Point Two</a></li> </ul> </li> <li><a href="test.html"><!-- icon:_doc; color:#ff0000 -->Item Three</a></li> </ul>
The “href”, “target”, “title” and “name” attributes of the a-tags are picked up and stored in the data property of the node.
CSS-style comments inside a-tags are parsed, and treated as arguments for MooTreeNode constructor, e.g. “icon”, “openicon”, “color”, etc.
Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur. By temporarily disabling the control, these visual updates will be skipped.
When you’re done making changes, call MooTreeControl.enable to turn on visual updates again, and automatically repaint all nodes that were changed.
Enables visual updates again after a call to MooTreeControl.disable
This class implements the functionality of a single node in a MooTreeControl.
You should not manually create objects of this class -- rather, you should use MooTreeControl.insert to create nodes in the root of the tree, and then use the similar function MooTreeNode.insert to create subnodes.
Both insert methods have a similar syntax, and both return the newly created MooTreeNode object.
options | an object. See options below. |
text | this is the displayed text of the node, and as such as is the only required parameter. |
id | string, optional - if specified, must be a unique node identifier. Nodes with id can be retrieved using the MooTreeControl.get method. |
color | string, optional - if specified, must be a six-digit hexadecimal RGB color code. |
open | boolean value, defaults to false. Use true if you want the node open from the start. |
icon | use this to customize the icon of the node. The following predefined values may be used: ‘_open’, ‘_closed’ and ‘_doc’. Alternatively, specify the URL of a GIF or PNG image to use - this should be exactly 18x18 pixels in size. If you have a strip of images, you can specify an image number (e.g. ‘my_icons.gif#4’ for icon number 4). |
openicon | use this to customize the icon of the node when it’s open. |
data | an object containing whatever data you wish to associate with this node (such as an url and/or an id, etc.) |
onExpand | called when the node is expanded or collapsed: function(state) - where state is a boolean meaning true:expanded or false:collapsed. |
onSelect | called when the node is selected or deselected: function(state) - where state is a boolean meaning true:selected or false:deselected. |
onClick | called when the node is clicked (no arguments). |
Properties | |
insert | Creates a new node, nested inside this one. |
remove | Removes this node, and all of it’s child nodes. |
clear | Removes all child nodes under this node, without removing the node itself. |
update | Update the tree node’s visual appearance. |
getImg | Creates a new image, in the form of HTML for a DIV element with appropriate style. |
toggle | By default (with no arguments) this function toggles the node between expanded/collapsed. |
select | Called by MooTreeControl when the selection changes. |
load | Asynchronously load an XML structure into a node of this tree. |
Creates a new node, nested inside this one.
options | an object containing the same options available to the MooTreeNode constructor. |
A new MooTreeNode instance.
Removes this node, and all of it’s child nodes. If you want to remove all the childnodes without removing the node itself, use MooTreeNode.clear
Removes all child nodes under this node, without removing the node itself. To remove all nodes including this one, use MooTreeNode.remove
Creates a new image, in the form of HTML for a DIV element with appropriate style. You should not need to manually call this method. (though if for some reason you want to, you can)
name | the name of new image to create, defined by <MooTreeIcon> or located in an external file. |
The HTML for a new div Element.
By default (with no arguments) this function toggles the node between expanded/collapsed. Can also be used to recursively expand/collapse all or part of the tree.
recursive | boolean, defaults to false. With recursive set to true, all child nodes are recursively toggle to this node’s new state. |
state | boolean. If undefined, the node’s state is toggled. If true or false, the node can be explicitly opened or closed. |
Called by MooTreeControl when the selection changes. You should not manually call this method - to set the selection, use the MooTreeControl.select method.