Elegant simple tree
<html>
<head>
<!--
Copyright (c) 2004, 2005, 2006
Raphael Derosso Pereira <raphaelpereira@users.sourceforge.net>
Vinicius Cubas Brand <viniciuscb@users.sourceforge.net>
Frank Alcantara <frankalcantara@users.sourceforge.net>
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* The names of its contributors may NOT be used to endorse or promote
products derived from this software without specific prior written
permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
===================================================================
dFTree Dynamic Javascript Folder Tree
===================================================================
DFTree is a javascript+css folder tree with dynamic node
insertion/erasing/alteration and other functionalities. It is also very
lightweight and easy to use.
It is CSS 2.1 compliant, although it was developed to be compatible at least
with Internet Explorer version 6+ . It was tested sucessfully on Mozilla
Firefox and Internet Explorer.
To use it:
1. Place in the HEAD section of your HTML document the following tags:
<script type="text/javascript" src="dftree.js"></script>
<link rel="stylesheet" type="text/css" href="dftree.css">
The first one is to load the javascript functions that generate the folder
tree. The second one loads the css styles which the tree are based. Both two
must be included in order to the tree to work.
2. build the tree (inside a javascript section) and draw it.
2.1 To create the tree:
tree = new dTree({name: 'tree'}); //The attribute name must be the object name
2.2 Creating nodes:
n1 = new dNode({id: '1',caption: 'First Node'});
n2 = new dNode({id: '2',caption: 'Second Node'});
n3 = new dNode({id: '3',caption: 'Third Node'});
n4 = new dNode({id: '4',caption: 'Fourth Node'});
2.3 Placing nodes in the tree:
tree.add(n1,'root'); //Places the root; second argument can be anything.
tree.add(n2,'1'); //Adds n2 as son of the node with id='1'
tree.add(n3,'1'); //Adds n3 as son of the node with id='1'
tree.add(n4,'3'); //Adds n3 as son of the node with id='3'
2.4 Removing nodes from the tree
(not implemented yet...)
2.5 Altering noded of the tree
tree.getNodeById('1').alter({caption: 'foo',onClick: '123'});
(this alters node with id='1')
2.5 Drawing the tree:
tree.draw();
List of methods:
dNode() //Constructor, sets properties
dNode.changeState() //If opened, closes. If closed, opens.
dNode.open() //Opens node
dNode.close() //Closes node
dNode.alter() //Alter node properties
dFTree() //Constructor, sets properties
dFTree.draw() //Draws the tree
dFTree.add(node,pid) //adds node under the tree
dFTree.alter() //Alters a node of the tree (helper method)
dFTree.getNodeById(id) //Returns the node with id
Look at the source for tree and node properties, at their constructors.
-->
<script type="text/javascript">
/* Dynamic Folder Tree
* Generates DHTML tree dynamically (on the fly).
* License: BSD.
* See details at http://www.opensource.org/licenses/bsd-license.php
*
* Copyright (c) 2004, 2005, 2006
* Vinicius Cubas Brand, Raphael Derosso Pereira, Frank Alcantara
* {viniciuscb,raphaelpereira,frankalcantara} at users.sourceforge.net
* All rights reserved.
*/
// NODE
//Usage: a = new dNode({id:2, caption:'tree root', url:'http://www.w3.org'});
function dNode(arrayProps) {
//mandatory fields
this.id; //node id
this.caption; //node caption
//optional fields
this.url; //url to open
this.target; //target to open url
this.onClick; //javascript to execute onclick
this.onOpen; //javascript to execute when a node of the tree opens
this.onClose; //javascript to execute when a node of the tree closes
this.onFirstOpen; //javascript to execute only on the first open
this.iconClosed; //img.src of closed icon
this.iconOpen; //img.src of open icon
this.runJS = true; //(bool) if true, runs the on* props defined above
this.plusSign = true; //(bool) if the plus sign will appear or not
this.captionClass = 'l'; //(string) the class for this node's caption
//The parameters below are private
this._opened = false; //already opened
this._io = false; //is opened
this._children = []; //references to children
this._parent; //pointer to parent
this._myTree; //pointer to myTree
for (i in arrayProps)
{
if (i.charAt(0) != '_')
{
eval('this.'+i+' = arrayProps[\''+i+'\'];');
}
}
}
//changes node state from open to closed, and vice-versa
dNode.prototype.changeState = function()
{
if (this._io)
{
this.close();
}
else
{
this.open();
}
//cons = COokie of Node Status
//setCookie("cons"+this.id,this._io);
}
dNode.prototype.open = function () {
if (!this._io)
{
if (!this._opened && this.runJS && this.onFirstOpen != null)
{
eval(this.onFirstOpen);
}
else if (this.runJS && this.onOpen != null)
{
eval(this.onOpen);
}
this._opened = true;
this._io = true;
this._refresh();
}
}
dNode.prototype.close = function() {
if (this._io)
{
if (this.runJS && this.onClose != null)
{
eval(this.onClose);
}
this._io = false;
this._refresh();
}
}
//alter node label and other properties
dNode.prototype.alter = function(arrayProps)
{
for (i in arrayProps)
{
if (i != 'id' && i.charAt(0) != '_')
{
eval('this.'+i+' = arrayProps[\''+i+'\'];');
}
}
}
//css and dhtml refresh part
dNode.prototype._refresh = function() {
var nodeDiv = getObjectById("n"+this.id);
var plusSpan = getObjectById("p"+this.id);
var captionSpan = getObjectById("l"+this.id);
var childrenDiv = getObjectById("ch"+this.id);
if (nodeDiv != null)
{
//Handling open and close: checks this._io and changes class as needed
if (!this._io) //just closed
{
childrenDiv.className = "closed";
}
else //just opened
{
//prevents IE undesired behaviour when displaying empty DIVs
/* if (this._children.length > 0)
{*/
childrenDiv.className = "opened";
// }
}
plusSpan.innerHTML = this._properPlus();
captionSpan.innerHTML = this.caption;
}
//alter onLoad, etc
}
//gets the proper plus for this moment
dNode.prototype._properPlus = function()
{
if (!this._io)
{
if (this._myTree.useIcons)
{
return (this.plusSign)?imageHTML(this._myTree.icons.plus):"";
}
else
{
return (this.plusSign)?"+":"";
}
}
else
{
if (this._myTree.useIcons)
{
return (this.plusSign)?imageHTML(this._myTree.icons.minus):"";
}
else
{
return (this.plusSign)?"-":"";
}
}
}
//changes node to selected style class. Perform further actions.
dNode.prototype._select = function()
{
var captionSpan;
if (this._myTree._selected)
{
this._myTree._selected._unselect();
}
this._myTree._selected = this;
captionSpan = getObjectById("l"+this.id);
//changes class to selected link
if (captionSpan)
{
captionSpan.className = 'sl';
}
}
//changes node to unselected style class. Perform further actions.
dNode.prototype._unselect = function()
{
var captionSpan = getObjectById("l"+this.id);
this._myTree._lastSelected = this._myTree._selected;
this._myTree._selected = null;
//changes class to selected link
if (captionSpan)
{
captionSpan.className = this.captionClass;
}
}
//state can be open or closed
//warning: if drawed node is not child or root, bugs will happen
dNode.prototype._draw = function()
{
var str;
var div;
var myClass = (this._io)? "opened" : "closed";
var myPlus = this._properPlus();
var append = true;
var myPlusOnClick = this._myTree.name+'.getNodeById(\''+this.id+'\').changeState();';
var captionOnClickEvent = "";
// var cook;
var plusEventHandler = function(){
eval(myPlusOnClick);
}
var captionEventHandler = function(){
eval(captionOnClickEvent);
}
/* if (this.myTree.followCookies)
{
this._io = getCookie("cons"+this.id);
}*/
//FIXME put this in a separate function, as this will be necessary in
//various parts
captionOnClickEvent = this._myTree.name+'.getNodeById(\''+this.id+'\')._select(); ';
if (this.onClick) //FIXME when onclick && url
{
captionOnClickEvent += this.onClick;
}
else if (this.url && this.target)
{
captionOnClickEvent += 'window.open(\''+this.url+'\',\''+this.target+'\')';
}
else if (this.url)
{
captionOnClickEvent += 'window.location=\''+this.url+'\'';
}
//The div of this node
divN = document.createElement('div');
divN.id = 'n'+this.id;
divN.className = 'son';
//The span that holds the plus/minus sign
spanP = document.createElement('span');
spanP.id = 'p'+this.id;
spanP.className = 'plus';
// spanP.addEventListener('click',plusEventHandler,false);
spanP.onclick = plusEventHandler;
spanP.innerHTML = myPlus;
//The span that holds the label/caption
spanL = document.createElement('span');
spanL.id = 'l'+this.id;
spanL.className = this.captionClass;
// spanL.addEventListener('click',captionEventHandler,false);
spanL.onclick = captionEventHandler;
spanL.innerHTML = this.caption;
//The div that holds the children
divCH = document.createElement('div');
divCH.id = 'ch'+this.id;
divCH.className = myClass;
// str = '<div id="n'+this.id+'" class="son">';
// str = '<span id="p'+this.id+'" class="plus" onclick="'+myPlusOnClick+'">'+myPlus+'</span>';
// str += '<span id="l'+this.id+'" class="l"'+captionOnClickEvent+'>'+this.caption+'</span>';
// str += '<div id="ch'+this.id+'" class="'+myClass+'"></div>';
// div.innerHTML = str;
divN.appendChild(spanP);
divN.appendChild(spanL);
divN.appendChild(divCH);
if (this._parent != null)
{
parentChildrenDiv = getObjectById("ch"+this._parent.id);
}
else //is root
{
parentChildrenDiv = getObjectById("dftree_"+this._myTree.name);
// append = false;
}
if (parentChildrenDiv)
{
parentChildrenDiv.appendChild(divN);
/* if (append)
{
parentChildrenDiv.innerHTML += str;
}
else
{
parentChildrenDiv.innerHTML = str;
}*/
}
}
// TREE
//Usage: t = new dFTree({name:t, caption:'tree root', url:'http://www.w3.org'});
function dFTree(arrayProps) {
//mandatory fields
this.name; //the value of this must be the name of the object
//optional fields
this.is_dynamic = true; //tree is dynamic, i.e. updated on the fly
this.followCookies = true;//use previous state (o/c) of nodes
this.useIcons = false; //use icons or not
//arrayProps[icondir]: Icons Directory
iconPath = (arrayProps['icondir'] != null)? arrayProps['icondir'] : '';
this.icons = {
root : iconPath+'/foldertree_base.gif',
folder : iconPath+'/foldertree_folder.gif',
folderOpen : iconPath+'/foldertree_folderopen.gif',
node : iconPath+'/foldertree_folder.gif',
empty : iconPath+'/foldertree_empty.gif',
line : iconPath+'/foldertree_line.gif',
join : iconPath+'/foldertree_join.gif',
joinBottom : iconPath+'/foldertree_joinbottom.gif',
plus : iconPath+'/foldertree_plus.gif',
plusBottom : iconPath+'/foldertree_plusbottom.gif',
minus : iconPath+'/foldertree_minus.gif',
minusBottom : iconPath+'/foldertree_minusbottom.gif',
nlPlus : iconPath+'/foldertree_nolines_plus.gif',
nlMinus : iconPath+'/foldertree_nolines_minus.gif'
};
//private
this._root; //reference to root node
this._aNodes = [];
this._lastSelected; //The last selected node
this._selected; //The actual selected node
for (i in arrayProps)
{
if (i.charAt(0) != '_')
{
eval('this.'+i+' = arrayProps[\''+i+'\'];');
}
}
}
dFTree.prototype.draw = function() {
if (!getObjectById("dftree_"+this.name))
{
document.write('<div id="dftree_'+this.name+'"></div>');
}
if (this._root != null)
{
this._root._draw();
this._drawBranch(this._root._children);
}
}
//Transforms tree in HTML code. Do not use it. Use draw() instead.
/*dFTree.prototype.toString = function() {
var str = '';
if (!getObjectById("dftree_"+this.name))
{
str = '<div id="dftree_'+this.name+'"></div>';
}
return str;
/ * if (this.root != false)
{
this.root._draw();
this._drawBranch(this.root.children);
}* /
}*/
//Recursive function, draws children
dFTree.prototype._drawBranch = function(childrenArray) {
var a=0;
for (a;a<childrenArray.length;a++)
{
childrenArray[a]._draw();
this._drawBranch(childrenArray[a]._children);
}
}
//add into a position
dFTree.prototype.add = function(node,pid) {
var auxPos;
var addNode = false;
if (typeof (auxPos = this._searchNode(node.id)) != "number")
{
// if parent exists, add node as its child
if (typeof (auxPos = this._searchNode(pid)) == "number")
{
node._parent = this._aNodes[auxPos];
this._aNodes[auxPos]._children[this._aNodes[auxPos]._children.length] = node;
addNode = true;
}
else //if parent cannot be found and there is a tree root, ignores node
{
if (this._root == null)
{
this._root = node;
addNode = true;
}
}
if (addNode)
{
this._aNodes[this._aNodes.length] = node;
node._myTree = this;
if (this.is_dynamic)
{
node._draw();
}
}
}
}
//arrayProps: same properties of Node
dFTree.prototype.alter = function(arrayProps) {
if (arrayProps['id'])
{
this.getNodeById(arrayProps['id']).alter(arrayProps);
}
}
dFTree.prototype.getNodeById = function(nodeid) {
return this._aNodes[this._searchNode(nodeid)];
}
//Searches for a node in the node array, returning the position of the array 4it
dFTree.prototype._searchNode = function(id) {
var a=0;
for (a;a<this._aNodes.length;a++)
{
if (this._aNodes[a].id == id)
{
return a;
}
}
return false;
}
//Auxiliar functions
//For multi-browser compatibility
function getObjectById(name)
{
if (document.getElementById)
{
return document.getElementById(name);
}
else if (document.all)
{
return document.all[name];
}
else if (document.layers)
{
return document.layers[name];
}
return false;
}
// [Cookie] Clears a cookie
function clearCookie(cookieName) {
var now = new Date();
var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
this.setCookie(cookieName, 'cookieValue', yesterday);
this.setCookie(cookieName, 'cookieValue', yesterday);
};
// [Cookie] Sets value in a cookie
function setCookie(cookieName, cookieValue, expires, path, domain, secure) {
document.cookie =
escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; expires=' + expires.toGMTString() : '')
+ (path ? '; path=' + path : '')
+ (domain ? '; domain=' + domain : '')
+ (secure ? '; secure' : '');
};
// [Cookie] Gets a value from a cookie
function getCookie(cookieName) {
var cookieValue = '';
var posName = document.cookie.indexOf(escape(cookieName) + '=');
if (posName != -1) {
var posValue = posName + (escape(cookieName) + '=').length;
var endPos = document.cookie.indexOf(';', posValue);
if (endPos != -1)
{
cookieValue = unescape(document.cookie.substring(posValue, endPos));
}
else
{
cookieValue = unescape(document.cookie.substring(posValue));
}
}
return (cookieValue);
};
function imageHTML(src,attributes) {
if (attributes != null)
{
attributes = '';
}
return "<img "+attributes+" src=\""+src+"\">";
}
</script>
<style rel="stylesheet" type="text/css">
.son {
position: relative;
left: 10px;
}
.plus {
font-size: 15px;
font-weight: bold;
cursor: pointer;
cursor: hand;
color: #000000;
font-family: monospace;
}
.plus:hover {
color: #FF0000;
}
.opened {
display: block;
}
.closed {
display: none;
}
/* link */
.l {
padding: 2px;
font-weight: bold;
font-size: 12px;
color: #666666;
text-decoration: none;
cursor: pointer;
cursor: hand;
white-space: nowrap;
font-family: sans-serif;
}
.l:hover {
text-decoration: underline;
}
/* selected link */
.sl {
padding: 2px;
font-weight: bold;
font-size: 12px;
color: #0000FF;
text-decoration: none;
cursor: pointer;
cursor: hand;
white-space: nowrap;
font-family: sans-serif;
}
.sl:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<script language="javascript">
<!--
tree = new dFTree({name: 'tree'});
tree.add(new dNode({id: '0',caption: 'Java2s.com'}),-1); //root node
tree.add(new dNode({id: '1',caption: 'Java'}),0);
tree.add(new dNode({id: '2',caption: 'JavaScript'}),0);
tree.add(new dNode({id: '3',caption: 'PHP'}),1);
tree.add(new dNode({id: '4',caption: 'Perl'}),1);
tree.add(new dNode({id: '5',caption: 'Oracle'}),1);
tree.add(new dNode({id: '6',caption: 'MySQL'}),2);
tree.add(new dNode({id: '7',caption: 'C++'}),2);
tree.add(new dNode({id: '8',caption: 'Python'}),7);
tree.draw();
-->
</script>
</body>
</html>
Related examples in the same category
