A tree component based on jQuery.
Option 1: Including all the necessary source files
<!-- REQUIRED SCRIPTS AND STYLES -->
<link rel="stylesheet" type="text/css" href="path-to-jsTree/tree_component.css" />
<script type="text/javascript" src="path-to-jsTree/css.js"></script>
<script type="text/javascript" src="path-to-jsTree/jquery.js"></script>
<script type="text/javascript" src="path-to-jsTree/jquery.listen.js"></script>
<script type="text/javascript" src="path-to-jsTree/tree_component.js"></script>
<!-- required for xml data type -->
<script type="text/javascript" src="path-to-jsTree/sarissa.js"></script>
<script type="text/javascript" src="path-to-jsTree/sarissa_ieemu_xpath.js"></script>
<script type="text/javascript" src="path-to-jsTree/jquery.xslt.js"></script>
<!-- required for metadata rule definitions -->
<script type="text/javascript" src="path-to-jsTree/jquery.metadata.js"></script>
<!-- required for cookie functionality -->
<script type="text/javascript" src="path-to-jsTree/jquery.cookie.js"></script>
Option 2: Including the minified version
<!-- REQUIRED SCRIPTS AND STYLES -->
<link rel="stylesheet" type="text/css" href="path-to-jsTree/tree_component.css" />
<script type="text/javascript" src="path-to-jsTree/tree_component.js"></script>
var tree = new tree_component();
tree.init(container_node,[{ options }]);
The init function takes two parameters:
The node where the tree is placed.
The options object contains most (if not all) the possible configuration options.
Description of all the possible properties of the options object (you can see the default values below).
You can only pass the values you need, which are different from the default configuration. (check out the examples).
The object contains the following properties:
Possible values are: predefined, json, xml_flat (requires XSLT plugin & Sarissa), xml_nested (requires XSLT plugin & Sarissa).
If set to true the children of the nodes are loaded when they are opened.
The path to a document containing the data (json or xml). If type is set to predefined the url property is ignored.
If the async property is set to true when a node is open a request is made to the location of the url parameter, along with the id of the node that was opened.
For example: if the url parameter is set to inc/json.php the initial data is retrieved by a GET request in the form inc/json.php?id=0, when a node is opened its id is appended - inc/json.php?id=node_32. The id itself is specified by you in the data that you return - data section.
If the type property is set to json and async is set tp false the data for the tree is read from this property, otherwise it is ignored. For the correct structure of the object check out the data section.
The id of the node, that is to be focused onload. If data is loaded asyncroniously, make sure the id will be loaded with the first request. Value could be false.
An array of strings representing each language. The first in the array will be the default language (e.g. visible on load). The strings in this array will be used internally for CSS classes - make sure that they are valid CSS classnames. An empty array will mean no language versions.
The path to the jsTree folder. If set to false - the script will auto-detect its path.
If set to false - cookies will be disabled. Otherwise the possible properties of the object are:
The prefix to name the cookies with. This is useful if you want to display more than one tree in the page, which uses cookies. For example: if prefix is set to tree1_, the resulting cookies will be named tree1_selected and tree1_open.
Properties of the object are:
Controls whether the dots linking parent to children nodes are shown initially. This could be changed runtime by appending or removing the no_dots class to the container node.
Is the tree in a right-to-left language?
The duration of the open/close animation. If set to 0 there is no animation.
If set to false the get_* functions (usually used for keyboard shortcuts) change the focused node.
If set to true the get_* functions change the "hover" state and wait for a call to select_branch to change the focused node.
Object containing the possible translations of standard strings used in the code. Properties of the object are:
The text used in the placeholder node in async mode.
The text used in newly created nodes. If using language versions this could be an array of string values, given in the same order as the languages array.
This object's properties define the interactive behaviour of the tree. Properties of the object are:
The name of the attribute containing the node type (if not using the metadata plugin). Default is rel.
Controls multiple selecting - e.g. is the user allowed to select more than one node and how. Possible values are false, On, Ctrl. If set to Boolean false multiple selection is disabled. If set to On each clicked node becomes selected, to deselect the node the user must click it again. If set to ctrl multiple selection is enabled only while holding the Ctrl key.
The attribute name containg the metadata.
Is drag & drop between trees allowed.
This enables you to set individual properties on nodes (for example: clickable, renameable, etc). Certain rules are only available as inline rules - such as max_depth, max_children and valid_children.
Sets where newly created nodes appear - before or after all the current children. Possible values are top and bottom.
Defines a list of node types as selectable by the user. Possible values are: an array of string values, all or none.
Defines a list of node types are renameable by the user. Possible values are: an array of string values, all or none.
Defines a list of node types are deletable by the user. Possible values are: an array of string values, all or none.
Defines a list of node types that the user can create new nodes in. Possible values are: an array of string values, all or none.
Defines a list of node types that the user can drag. Possible values are: an array of string values, all or none.
Defines the allowed nesting configurations. Possible values are: an array of string values, all or none. Each rule consists of three parts: node_type_name and position and node_type_name. For example:
[
"folder after folder",
"folder before folder",
"file inside folder",
"file before file",
"file after file"
]
/*
* This set of rules insures that there is only one level of folders.
* and there are no files outside folders, and the files can be ordered
* inside the folder.
*/
This object's properties define the callback functions to be executed upon various events. All properties of the object are functions:
All the before~ functions return true by default. They are called before the user action is confirmed. If you want to prevent the user action just return false.
Defaults to open/close the node and select it.
To prevent the menu from showing do the following:
onrgtclk : function(NODE, TREE_OBJ, EV) {
/* CUSTOM LOGINC HERE */
EV.preventDefault();
EV.stopPropagation();
return false
}
{
data : {
type : "predefined",
async : false,
url : false,
json : false
},
dflt : false,
languages : [],
path : false,
cookies : false,
ui : {
dots : true,
rtl : false,
animation : 0,
hover_mode : true
},
lang : {
new_node : "New folder",
loading : "Loading ..."
},
rules : {
multiple : false,
metadata : false,
type_attr : "rel",
multitree : false,
createat : "bottom",
use_inline : false,
clickable : "all",
renameable : "all",
deletable : "all",
creatable : "all",
draggable : "none",
dragrules : "none"
},
callback : {
beforechange : function(NODE,TREE_OBJ) { return true },
beforemove : function(NODE,REF_NODE,TYPE,TREE_OBJ) { return true },
beforecreate : function(NODE,REF_NODE,TYPE,TREE_OBJ) { return true },
beforerename : function(NODE,LANG,TREE_OBJ) { return true },
beforedelete : function(NODE,TREE_OBJ) { return true },
onchange : function(NODE,TREE_OBJ) { },
onrename : function(NODE,LANG,TREE_OBJ) { },
onmove : function(NODE,REF_NODE,TYPE,TREE_OBJ) { },
oncopy : function(NODE,REF_NODE,TYPE,TREE_OBJ) { },
oncreate : function(NODE,REF_NODE,TYPE,TREE_OBJ) { },
ondelete : function(NODE, TREE_OBJ) { },
onopen : function(NODE, TREE_OBJ) { },
onclose : function(NODE, TREE_OBJ) { },
error : function(TEXT, TREE_OBJ) { },
ondblclk : function(NODE, TREE_OBJ) {
TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE);
TREE_OBJ.select_branch.call(TREE_OBJ, NODE);
},
onrgtclk : function(NODE, TREE_OBJ, EV) { }
}
}
Default is predefined HTML.
Binds events and display only to the container element's content. Expected content is as follows:
<!-- SINGLE NODE -->
<li id="node_identificator">
<a href="#">node_title</a>
</li>
<!-- NODE WITH CHILDREN -->
<li id="node_identificator">
<a href="#" style="background-image:url(node_icon);">node_title</a>
<ul>
<!-- CHILD NODES -->
</ul>
</li>
If language versions are used:
<!-- SINGLE NODE -->
<li id="node_identificator">
<a href="#" class="language_name">node_title</a>
<a href="#" class="language_name">node_title</a>
</li>
All attributes of the item node get copied to the li node in the output HTML. If the hasChildren attribute is present, the output node is displayed as having children even if it does not (useful for async). If the state attribute is present the node is forced in the specified state.
<xml version="1.0" encoding="utf-8" ?>
<root>
<item [attribute="attribute_value" state="closed|open" hasChildren]>
<content>
<name icon="path_to_icon" lang="language_name"><![CDATA[node_title]]></name>
<name icon="path_to_icon" lang="language_name"><![CDATA[node_title]]></name>
</content>
<!-- NESTED ITEM NODES -->
</item>
</root>
All attributes of the item node get copied to the li node in the output HTML. If the hasChildren attribute is present, the output node is displayed as having children even if it does not (useful for async). If the state attribute is present the node is forced in the specified state.
<xml version="1.0" encoding="utf-8" ?>
<root>
<item id="node_identificator" parent_id="parent_node_identificator" [attribute="attribute_value" icon="path_to_icon" state="closed|open" hasChildren]>
<content>
<name icon="path_to_icon" lang="language_name"><![CDATA[node_title]]></name>
<name icon="path_to_icon" lang="language_name"><![CDATA[node_title]]></name>
</content>
</item>
<!-- NEXT ITEM NODES -->
</root>
If state is "closed" the node is displayed as having children even if it does not.
No langauge versions
{
attributes: { id : "node_identificator", [attribute : "attribute_value"] },
state: "closed" or " ",
data: "node_identificator",
icons: "path_to_icon",
children: [ // an array of child nodes objects ]
}
With language versions:
Note, the data and icons array must be ordered in the same order as the passed languages array (see below)
{
attributes: { id : "node_identificator", [attribute : "attribute_value"] },
state: "closed" or " ",
data: ["node_identificator", "node_identificator", ... ],
icons: ["path_to_icon", "path_to_icon", ... ],
children: [ // an array of child nodes objects ]
}
Globally for all trees
.tree li a { background-image:url(node_icon); }
Or for a specific tree
container_selector li a { background-image:url(node_icon); }
For a specific language
container_selector OR .tree li a.language_name { background-image:url(node_icon); }
For all closed nodes
container_selector OR .tree li.closed { background-image:url(node_icon); }
For all open nodes
container_selector OR .tree li.open { background-image:url(node_icon); }
For all leaf nodes
container_selector OR .tree li.leaf { background-image:url(node_icon); }
For all selected nodes
container_selector OR .tree li a.clicked { background-image:url(node_icon); }
You could also combine these to get more complex CSS selectors.
If you are using predefined HTML you can specify the background-image inline for any <a> nodes
<li id="node_identificator">
<a href="#" style="background-image:url(node_icon);">node_title</a>
</li>
If you are using XML as source - simply pass an icon attribute. Here is how it looks if you have no language versions:
<item icon="node_icon" ...>
If you have langauge versions you can specify different icons for each language:
<item ...>
<content>
<name lang="language_name" icon="node_icon" ...> ... </name>
<name lang="language_name" icon="node_icon" ...> ... </name>
</content>
</item>
If you are using JSON as source you can specify node icon with the icon attribute.
No language versions
{
attributes : { ... },
data : "...",
icon : "node_icon"
}
Language versions
{
attributes : { ... },
data : ["...", "...", ... ],
icon : ["node_icon", "node_icon", ... ]
}
You can choose whether to have dots or not, and toggle them on the fly (attach to event)
In the configuration
instance.init(container_node,{ ui: { dots : false | true } });
Runtime using built-in function
instance.toggleDots();
Runtime using jQuery
$(container_node).addClass("no_dots");
$(container_node).removeClass("no_dots");
$(container_node).toggleClass("no_dots");
In the HTML markup
<container_node class="no_dots">
...
</container_node>
In the configuration
instance.init(container_node,{ ui: { rtl : false | true } });
Runtime using jQuery
$(container_node).addClass("rtl");
$(container_node).removeClass("rtl");
$(container_node).toggleClass("rtl");
In the HTML markup
<container_node class="rtl">
...
</container_node>
I found this jquery plugin extremely useful - check it out
$.hotkeys.add('key', { disableInInput: true }, function() { instance.function([arguments]); });
/* for example */
$.hotkeys.add('f2', { disableInInput: true }, function() { tree.rename(); });
$.hotkeys.add('n', { disableInInput: true }, function() { tree.create(); });
$.hotkeys.add('d', { disableInInput: true }, function() { tree.remove(); });
$.hotkeys.add('l', { disableInInput: true }, function() { tree.cycle_lang(); });
$.hotkeys.add('r', { disableInInput: true }, function() { tree.refresh(); });
$.hotkeys.add('up', { disableInInput: true }, function() { tree.get_prev(); });
$.hotkeys.add('down', { disableInInput: true }, function() { tree.get_next(); });
$.hotkeys.add('left', { disableInInput: true }, function() { tree.get_left(); });
$.hotkeys.add('right', { disableInInput: true }, function() { tree.get_right(); });
$.hotkeys.add('return', { disableInInput: true }, function() { tree.select_branch(); });
Expect shortly
Expect shortly