Scripting | Asynchronous tree structure is a common way to describe hierarchical data. The tree structure generation program introduced in this paper consists of one ASP page and two JavaScript functions. The tree structure is asynchronous, that is, the node data is read only when necessary, rather than being sent to the client all at once.
I. Overview
All nodes in a tree structure must contain the following attributes: Their ID, the ID of the parent node, and the description of this node (the node text). This article uses an Access database Tree.mdb to save these node information. The Tree.mdb contains table Tbltree, which is defined as follows:
Description of field Name type
Unique identification of the ElementID automatic numbering node
Parentelementid the ID of the Digital parent node
Elementtext text node text
This program uses the Tree.dsn file to define the Tree.mdb data source. The TREE.DSN content can be obtained using the ODBC data source Configuration program in Control Panel, as follows:
[ODBC]
Driver=microsoft Access DRIVER (*.mdb)
Uid=admin
Usercommitsync=yes
Threads=3
Safetransactions=0
Pagetimeout=5
Maxscanrows=8
maxbuffersize=512
Implicitcommitsync=yes
Fil=ms Access
Driverid=25
Defaultdir=d:inetpubwwwroot
Dbq=d:inetpubwwwroottree.mdb
Note When you run this program, you should modify the DefaultDir and DBQ in Tree.dsn to point to the correct directories and files.
The client function is implemented in two parts: one is an ordinary browser window, the other is an IFRAME. An IFRAME is invisible, and it is responsible for communication between the browser window and the server. The following is a running interface for the sample program:
"Figure 1"
The relationship between the nodes of a tree structure can be represented by the < DIV > tag as follows:
"Figure 2"
In this case, the < body > of the document is the container for the first layer node (DIVTREE0), which contains four nodes in total, and the four nodes are containers of their child node groups. For example, the DIVTREE0 contains Div1, Div2, Div3, and div4 (they correspond to one node), and Div1 is a container for divTree1, which contains divTree1 and DIV5--DIV8,DIV5 containers. And DivTree5 contains div9 .....
The mouse click event is created by the individual nodes themselves (Div1,div2, ...). Response, rather than by the container. When a node responds to a mouse click event, the event is prevented from being passed further up (to the parent node). This part of the function is implemented within the Gettree function, see the function code to understand the specific implementation method.
The process of the entire tree structure can be expressed in the following figure:
"Figure 3"
Second, server-side code
The client script sends a request to the server that contains a node identity, and the server script gettreedata.asp the lookup database to obtain all the child byte points of the node, and returns the child nodes to the client program. The gettreedata.asp code is as follows:
<% Dim Rsttree
Dim strSQL
Dim strdata
If request.querystring ("level") = "" Then
Response.End
End If
strSQL = "SELECT * from tbltree WHERE Parentelementid ="
strSQL = strSQL & Request.QueryString ("Level") & ' ORDER by ElementID '
Set Rsttree = Server.CreateObject ("ADODB. Recordset ")
Rsttree.open strSQL, "Filedsn=d:inetpubwwwroot ree.dsn"
Strdata = ""
Do as not rsttree.eof
strdata = strdata & Rsttree ("ElementID") & "|" & Rsttree ("Parentelementid") & "|" &
Rsttree ("Elementtext") & "|"
Rsttree.movenext
Loop
Rsttree.close% >
< HTML >
< body onload= "parent. Populatetree (' <%=strdata% > '); "></body >
Note: In actual use, you should change the path of the DSN file as appropriate. This code is not complicated, but please note the following two points: first, the customer request format should be "Gettreedata.asp?" level= Node ID "; second, return the client's node list format as" Node ID | parent Node ID | node text | ... ".
