Use JavaScript to implement TreeView classes of the tree structure! (Source code, welcome everyone to advise

/ * ================================================================================================================================================================ ===

Description: This is a class that shows the tree structure with the JavaSCRPT class. The version 0.5 version (the last written imperfection program) is implemented with JavaScript and XML DOM, in the version below IE5.5, you must install the MSXML3.0 component can be used.

This version of the program uses an array instead of XML DOM, the speed is faster, and it is more stable!

Next, I will use the HTML DOM to write a list of listView, please likely to provide me.

This is my first written work, you are welcome to give more advice. Here, all the source code is all open, you like to use it for everyone.

The method in the class is:

Add (node ​​number, parent node number, node text)

Refresh () changes appearance according to content in arrays

The properties in the class are:

Container is a TD HTML DOM node that needs to change the look of TreeView.

SelectedID Current Node's number

Arch of Data Storage Node Information

Instructions:

Generally used with the server-side directory structure table

EG: VAR TV = New TreeView ("TV"); here you should note that due to the event of a member object in the class, the object itself cannot be identified, so the string representing the object name must be added to the constructor of the class.

TV.Add (0,1, "with the directory one"); 0 represents the addition of nodes under followback

TV.Add (1, 2, "subdirectory one");

TV.Refresh (); display appearance

Note: Six images are used in the program, pay attention to specify their path, you can download it at http://www.fangfa.net/treeview/

============================================================================================================================================================================================================= = * /

// Pre-download picture

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 "closestelectr.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: Show tree structure *

// * Time: 2002-9-27 17:25 *

// * Author: Fu, happy_afu @ sina.com *

// * Version: 1.0 *

// ******************************************************** **********

// Note: Array format: array (number, parent node number, text, grade, selective situation, expand, child node ID list)

Function TreeView (Objectvarname)

{

//Attributes

this.Overtag = null; // Move the label

this.overobj = null; // The object is moved during the mouse

this.container = createtable (); // Create the original form, return to the container object

this.selectedID = null; // Get the currently selected object

THIS.DATA = New Array ();

//method

this.createrow = createrow; // creation line

// high-level function

this.add = add; // Add node

This.Refresh = refresh; // Create TreeView appearance according to the value of the XML node

this.addnode = addnode; // recursive method Add to node

THIS.ADD = ADD;

Function Add (ParentID, ID, Text)

{

/ / First check if this element is existed in the array

Var item;

Item in this.data

{

IF (this.data [item] [0] == id)

{

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

Item in this.data

{

IF (this.data [item] [0] == ParentID)

{

/ / Add to the list of the ID 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 you don't find

Alert ("No ParentID" Parentid "parent node");

Return;

}

}

// * Create the original form, return to the container object

Function CreateTable ()

{

Var TableID = "maintable";

Var tableter;

Var classtext = "Background-color: #ffffff;"; // This is a control style code

TableText = "

">

"; Document.write (TableText); Return Document.all [TableID] .childnodes [0] .childnodes [0] .childnodes [0]; // Return to the most inside of the cell } // * Create a table as an appearance Function CreateRow (ID, text, level, isclose, haaschild, selected, locate) // Insert a line in the table, inserted in the table Locate { // Create a Table tag Var Table = Document.createElement ("Table"); Table.SetAttribute ("ID", "T" ID); Table.setttribute ("Border", "0"); Table.setttribute ("Cellpadding", "0"); Table.setttribute ("Cellspacing", "0"); Table.SetaTRibute ("Height", "16"); Table.setttribute ("Cellpadding", "0"); // Create a TBABY tag Var tbody = document.createElement ("tbody"); // Create a TR tag Var tr = document.createElement ("tr"); // Create a shrink cell Var Indent = Document.createElement ("TD"); Indenter, "Width", (Level-1) * 16 1); Tr.Appendchild (Indent); // Create a picture cell Var imgtd = document.createElement ("TD"); IMGTD.SetAttribute ("width", "32"); // Define the node picture Var imagePath = "./"; // Defines the image path Var imgfc = imagePath "close.gif" // Parent node close Var imgfo = imagePath "open.gif" // parent node Var imgfcs = imagePath "closeselect.gif" // Close selected parent node Var imgfos = imagePath "openselect.gif" // 'opens the selected parent node Var imgcos = imagePath "openItem.gif" // Open the selected child node Var imgcc = imagepath "closetem.gif" // close up child node Var img; IF (Haschild) // If there is a child node { IF (isclose) // If it is a close parent node { IF (SELECTED) {IMG = IMGFCS;} // If it is closed unselected parent node Else {IMG = IMGFC;} // If it is close to the selected parent node } Else // If you are open, parent node { IF (SELECTED) {img = imgfos;} // If it is open unchecked parent node Else {img = imgfo;} // If you open the selected parent node } } Else // If there is no child node { IF (SELECTED) {img = imgcos;} // If it is selected from the child node Else {IMG = IMGCC;} // If it is a child node } // Create a picture tag Var nodeimg = document.createElement ("IMG"); NodeImg.setttribute ("width", "32"); NodeImg.setttribute ("HEIGHT", "16"); NodeImg.SetaTRibute ("ID", "i" id); NodeImg.setttribute ("src", IMG); IMGTD.APpendChild (NodeImg); Tr.AppendChild (IMGTD); // Create a text cell VAR textNode = Document.createElement ("TD"); TextNode.setttribute ("ID", "D" ID); TextNode.SetaTRibute ("Title", Text); IF (text.length> 8) {text = text.substr (0, 8) ".." TextNode.innertext = text; Tr.Appendchild (TextNode); // Next combination 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]); } // below is the code of control style 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 转载请注明原文地址:https://www.9cbs.com/read-67268.html 9cbs New Post(0)