WebReference.com - Creating a Cross-Browser (DOM) Expandable Tree (3/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:

• Create the new jsTreeNode object.
• Assign a unique ID for internal tracking.
• Assign the indent.
• Add to the parent node's childNodes collection.
• Add to the tree's global nodes collection.
• Return the new jsTreeNode object.

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.

[previous] [next]

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

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