WebReference.com - Creating a Cross-Browser (DOM) Expandable Tree (3/5) | WebReference

WebReference.com - Creating a Cross-Browser (DOM) Expandable Tree (3/5)

To page 1To page 2current pageTo page 4To page 5
[previous] [next]

Creating a Cross-Browser (DOM) Expandable Tree

Step 3: Define the Methods

The methods of our classes are of the utmost importance for making the JavaScript tree work. In our tree, the jsTreeNode methods will actually do most of the work, so let's take a look at that first.

jsTreeNode Methods

Right off the bat, we know that we need a way to add child nodes to a node. So, we will create a method called addChild(). This method will take the same parameters as the jsTreeNode class itself and will ultimately return the created child node as the function value. From start to finish, here are the steps needed to add a child to a node:

The code to accomplish this is as follows:

jsTreeNode.prototype.addChild = function (strIcon, strText, strURL, strTarget) {
 
    //create a new node (NCZ, 1/27/02)
    var objNode = new jsTreeNode(strIcon, strText, strURL, strTarget);
    
    //assign an ID for internal tracking (NCZ, 1/27/02)
    objNode.id = this.id + "_" + this.childNodes.length;
    
    //assign the indent for this node
    objNode.indent = this.indent + 1;
    
    //add into the array of child nodes (NCZ, 1/27/02)
    this.childNodes[this.childNodes.length] = objNode;
    
    //add it into the array of all nodes (NCZ, 1/27/02)
    objLocalTree.nodes[objNode.id] = objNode;
    
    //return the created node (NCZ, 1/27/02)
    return objNode;
}

Note that the local variable objLocalTree is used to assign the created node into the tree's list of all nodes.


To page 1To page 2current pageTo page 4To page 5
[previous] [next]

Created: February 20, 2002
Revised: February 20, 2002

URL: http://webreference.com/programming/javascript/trees/3.html