Use JavaScript to implement a Treeview class with a tree structure

Note: This is a class that uses the javascrpt class to display the tree structure. Version 0.5 of the program (the first unperfect program) is implemented using JavaScript and xml dom. In ie5.5 or earlier versions, the msxml3.0 component must be installed.
This version of the program uses arrays instead of xml dom, which is faster and more stable!
Next, I will use HTML Dom to compile the listview class. Please give me some suggestions.
This is the first one I have written to my satisfaction. You are welcome to give more comments. Here, the source code is made public and can be used by everyone.

The method in the class is:
Add (node number, parent node number, node text)
Refresh () changes the appearance Based on the content in the array

Class attributes:
Container is a td html Dom node and needs to be used to change the appearance of the Treeview
Selectedid: ID of the currently selected node
Array of data storage node Information

Usage:
It is generally used with the directory structure table on the server side.
Eg: var TV = new Treeview ("TV"); note that the object itself cannot be identified in the event of a member object in the class, therefore, a string representing the object name must be added to the class constructor.
TV. Add (, "with directory 1"); 0 indicates adding a node under the with Node
TV. Add (1, 2, "subdirectory 1 ");
TV. Refresh (); display appearance

Note: Six images are used in the program. You can specify their paths and download them at http://www.fangfa.net/treeview /.
========================================================== ============= */

// Pre-download the image
VaR ImagePath = "./"; // define the default image path here

VaR img1 = new image ();
Img1.src = ImagePath + "close.gif ";
VaR img2 = new image ();
Img2.src = ImagePath + "closeitem.gif ";
VaR img3 = new image ();
Img3.src = ImagePath + "closeselect.gif ";
VaR img4 = new image ();
Img4.src = ImagePath + "open.gif ";
VaR img5 = new image ();
Img5.src = ImagePath + "openitem.gif ";
VaR img6 = new image ();
Img6.src = ImagePath + "openselect.gif ";
//************************************** ********************
// * Treeview class *
// * Function: display the tree structure *
// * Time *
// * Author: AFU, happy_afu@sina.com *
// * Version: 1.0 *
//************************************** ********************
// Note: array format: array (number, parent node number, text, series, selection, expansion, subnode ID List)
Function Treeview (objectvarname)
{
// Attributes
This. overtag = NULL; // tag when the cursor is moved up
This. overobj = NULL; // The object when the mouse moves up
This. Container = createtable (); // create the original table and return the container object
This. selectedid = NULL; // get the currently selected object
This. Data = new array ();
// Method
This. createrow = createrow; // create a row
// High-level functions
This. Add = add; // Add a node
This. Refresh = Refresh; // create a Treeview based on the value of the XML node.
This. addnode = addnode; // Add the Recursive Method to the node

This. Add = add;
Function add (parentid, ID, text)
{
// First check whether the element already exists in the array
VaR item;
For (item in this. Data)
{
If (this. Data [item] [0] = ID)
{
The Alert ("ID =" + ID + "element already exists! ");
Return;
}
}

If (parentid = 0)
{
This. Data [ID] = new array (ID, parentid, text, 1, false, false, new array ());
}
Else
{
// First find the parent node
For (item in this. Data)
{
If (this. Data [item] [0] = parentid)
{
// Add it to the ID list of the parent node
This. Data [item] [6] [This. Data [item] [6]. Length] = ID;
VaR level = This. Data [item] [3] + 1;
This. Data [ID] = new array (ID, parentid, text, level, false, false, new array ());
Return;
}
}
// If no
Alert ("no parent node found with parentid as" + parentid + ");
Return;
}
}

// * Create the original table and return the container object
Function createtable ()
{
VaR tableid = "maintable ";
VaR tabletext;
VaR classtext = "background-color: # ffffff;"; // The control style code is used here.
Tabletext = "<Table border = 0 cellpadding = 0 cellspacing = 0 style = '" + classtext + "'" +
"Id = '" + tableid + "'" +
"> <Tbody> <tr> <TD> </tr> </tbody> </table> ";
Document. Write (tabletext );
Return document. All [tableid]. childnodes [0]. childnodes [0]. childnodes [0]; // return the objects in the innermost cell.
}

// * Create a table as the row of appearance
Function createrow (ID, text, level, isclose, haschild, selected, locate) // insert a row, insert row locate in the table
{
// Create a table tag
VaR table = Document. createelement ("table ");
Table. setattribute ("ID", "T" + id );
Table. setattribute ("border", "0 ");
Table. setattribute ("cellpadding", "0 ");
Table. setattribute ("cellspacing", "0 ");
Table. setattribute ("height", "16 ");
Table. setattribute ("cellpadding", "0 ");
// Create a tbaby flag
VaR tbody = Document. createelement ("tbody ");
// Create a TR tag
VaR TR = Document. createelement ("TR ");
// Create an indent Cell
VaR indent = Document. createelement ("TD ");
Indent. setattribute ("width", (level-1) * 16 + 1 );
Tr. appendchild (indent );
// Create an image Cell
VaR imgtd = Document. createelement ("TD ");
Imgtd. setattribute ("width", "32 ");
// Define the node Image
VaR ImagePath = "./"; // define the image path
VaR imgfc = ImagePath + "close.gif" // close the parent node
VaR imgfo = ImagePath + "open.gif" // The parent node that is opened.
VaR imgfcs = ImagePath + "closeselect.gif" // close the selected parent node
VaR imgfos = ImagePath + "openselect.gif" // 'Open the selected parent node
VaR imgcos = ImagePath + "openitem.gif" // open the selected subnode
VaR imgcc = ImagePath + "closeitem.gif" // subnode that is disabled
VaR IMG;
If (haschild) // If a subnode exists
{
If (isclose) // if the parent node is closed
{
If (selected) {IMG = imgfcs;} // if the parent node is disabled
Else {IMG = imgfc;} // If the selected parent node is disabled
}
Else // if the parent node is opened
{
If (selected) {IMG = imgfos;} // if the parent node is not selected
Else {IMG = imgfo;} // if it is to open the selected parent node
}
}
Else // if no subnode exists
{
If (selected) {IMG = imgcos;} // if it is a selected subnode
Else {IMG = imgcc;} // if it is an unselected subnode
}
// Create an image tag
VaR nodeimg = Document. createelement ("IMG ");
Nodeimg. setattribute ("width", "32 ");
Nodeimg. setattribute ("height", "16 ");
Nodeimg. setattribute ("ID", "I" + id );
Nodeimg. setattribute ("src", IMG );
Imgtd. appendchild (nodeimg );
Tr. appendchild (imgtd );
// Create a text Cell
VaR textnode = Document. createelement ("TD ");
Textnode. setattribute ("ID", "D" + id );
Textnode. setattribute ("title", text );
If (text. length> 8) {text = text. substr (0, 8) + "..";}
Textnode. innertext = text;
Tr. appendchild (textnode );
// Combine the following
Tbody. appendchild (TR );
Table. appendchild (tbody );
// Insert the main container below
If (locate <0 | locate> This. Container. childnodes. Length-1)
{
This. Container. appendchild (table );
}
Else
{
This. Container. insertbefore (table, this. Container. childnodes [locate]);
}
// The following is the control style code
Document. All ["I" + id]. style. cursor = "hand ";
Document. All ["D" + id]. style. cursor = "hand ";
If (selected = true)
{
Document. All ["D" + id]. style. backgroundcolor = "#003399 ";
Document. All ["D" + id]. style. color = "# ffffff ";
}
}
// View the next part

Trackback: http://tb.blog.csdn.net/TrackBack.aspx? Postid = 258913