Generate a tree directory like an explorer

Author：Eve Cole Update Time：2009-06-24 17:01:08

The tree directory displays program problem description:
Self-correlated data tables often appear in our projects. If we look at it as a whole, the entire table appears as a tree data structure (for complex situations, it may become a graph). When we display and edit this table, it will look clumsy if we do not use a good representation. For this reason, we develop a program with such a tree structure. In the previous version, we used a recursive algorithm to implement it. When we evaluated this algorithm, we found that it was no longer suitable for databases with thousands of records, so in the new algorithm version, we XML technology is used to dynamically discover data to solve the problem of downloading a large amount of data from the server at one time. It also avoids the error of entering an infinite loop if the table data structure is presented as a graph.

Practical ideas:
1. During initial display, only the root and second-level nodes are displayed, and the root and second-level nodes are at the same level.
2. Click a node, if its child node area object does not exist, create the object, download the data, update the data, and display all child nodes.
3. Each node has the same functions after being established, such as checking whether child nodes exist, showing and hiding child nodes, etc.
4. Technical difficulties in using DHTML+XML+ASP+CSS at the same time:
1. Garbled characters when using xmlhttp interface:
Because in the asp output page, the default encoding scheme is not Chinese, then when it is interpreted in xmlhttp on the client page, it will be parsed in the default scheme, so garbled characters will appear. To this end, we add the following code to the ASP page on the server side to define the encoding scheme:
Response.CharSet="GB2312"
Response.ContentType="text/html"

2. How to maintain the style of the previous version on the interface (resource manager-like form):
In the previous version, all page content was completed in one go. Recursion and other ideas were used in control, and the interface was relatively friendly at all times. However, the mechanism in this version has changed at that time, and the content is a key issue that has been synthesized multiple times. How to determine the id of img, span object? After verification, in terms of interface, it is difficult for this version of the interface to be the same as the first interface, so only part of it can be retained. But in general, the new interface can also meet the needs

because it is not easy to use here. Attachment, so I can only post the source code:

---xtree.html------

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</SCRIPT>
<style type="text/css">

</style>
</HEAD>
<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold>Tree menu demo program</bold><br>
<table border=0>
<tr><td nowrap>
<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
</table>
</BODY>
</HTML>

-------xtree.asp------------

<%@ Language=VBScript %>
<%
Response.CharSet="GB2312"
Response.ContentType="text/html"
'''''''''''''''''''''''''''Server code start'''''''''''''''' '''''''''''''''
dim parId,nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))

if(parid="") then
Response.Write("root id can't is null")
Response.End()
end if
if(nodeLayer<0) then
nodeLayer=0

end if
%>
<%
strconn="at"
strsql="select * from tree where par='"&parid&"'"
''SQL statement writing requirements: The first three fields of the record set must be: row_id (unique primary key), name (content displayed on the menu bar), par_id (parent node row_id), and other output and display as needed.
set conn=server.createobject("ADODB.connection")
conn.open strconn

set rs=server.createobject("ADODB.Recordset")
rs.open strsql,conn,3,3
i=0
dim row_id
row_id=""
while not rs.EOF
row_id=rs.Fields("row_id").Value
name=rs.Fields("name").Value
j=0

while j<nodeLayer
Response.Write("<img src='blank.bmp'>")
j=j+1
wend
Response.Write("<img id='objNode"&row_id&"' style='cursor:hand' src='open.bmp' onclick=javascript:createChildNode('"&row_id&"',"&nodeLayer+1&") border=0 align='absmiddle'>")
Response.Write("<img src='blank.bmp' border=0 align='absmiddle'>")
Response.Write("<a class=item href='view.asp?id="&row_id&"' target='mainFrame'>"&Trim(name)&"</a></br>") 'Project content
Response.Write("<span id='oSpan"&row_id&"' ></span>") 'Sub-node content area
i=i+1
rs.MoveNext
wend
'''''''''''''''''''''''''''''''''''Server Code END '''''' ''''''''''''''''''''''''
%>

---------xtree.js-------------

function getChildTree(parId,nodeLayer)
parId:=parent node id,nodeLayer:=the level to which the child node belongs
{
var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Author:taojianbo;Version:2.0");
return xmlhttp.responseText;
}