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
The form 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 has used a
Access database Tree.mdb to hold 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. IFrame is not visible, its role is to be responsible for the browser
The communication between the 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"
Here, the document < BODY > is the first layer node (DIVTREE0) container, the first layer contains a total of four nodes, these four nodes are their child node group
Container. For example, the DIVTREE0 contains Div1, Div2, Div3, and div4 (which correspond to one node), and Div1 is a container for divTree1.
The divTree1 contains div5--div8,div5 and DivTree5 containers, and DivTree5 contains div9 ....
The mouse click event is created by the individual nodes themselves (Div1,div2, ...). Response, rather than by the container. The node will prohibit further events after it responds to the mouse click event
Passed 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 return these 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 | ... ".
