How to generate a tree directory like a resource Manager (version 2.0) Eeff under the Web Interface (original)
Key word catalog XML ASP Web Javascript
Tree-type Catalog display program
Problem Description:
There are often autocorrelation tables in our projects, and if we look at them as a whole, the entire table is presented as a tree-like data structure (it may become a graph for complex situations). When we show this table, edit it, if not in good form, it will appear very clumsy, for this reason, we develop such a tree-shaped structure of the program. In the previous release, we used a recursive algorithm to implement the in our evaluation of this algorithm, we found that the database with thousands of records is no longer competent, so in the new version of the algorithm, we use XML technology, dynamic discovery of data to solve a large amount of data from the server under the embarrassment, At the same time, if the table data structure renders as a diagram, it will go into a dead loop error.
Practical ideas:
1, the initial display shows only the root and level two nodes, the root and two-level nodes at one level
2, click a node, if its child node area object does not exist, then set up the object, while downloading data update data, display all child nodes.
3, each node after the establishment of the same function, such as checking the existence of child nodes, show hidden child nodes and so on
4, Dhtml+xml+asp+css simultaneous use
Technical difficulties:
1, the use of XMLHTTP interface garbled problem:
Because in the ASP output page, the default encoding scheme is not Chinese, then in the client page XMLHTTP interpretation, will be resolved by default solution, so there will be garbled. To do this, we add the following code definition coding scheme on the server side of the ASP page:
response.charset= "GB2312"
Response.contenttype= "Text/html"
2, how to maintain the previous version of the interface style (Class Explorer form):
In the previous version, all the page content is coherent, in the control of the idea of recursion, all the time the interface is relatively friendly, then the mechanism in this edition has changed, the content is a number of synthesized
Key questions, IMG, span object ID how to determine
After verification, in the interface, this version of the interface is difficult to be the same as the first interface, so can only retain a part, but overall, the new interface can also meet the needs
Because here is not good to use the attachment, so can only paste 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" >
<!--
a:link {font-size:14px; text-decoration:none; color: #0000FF}
a:visited {font-size:14px; color: #0000FF; Text-decoration:none}
a:hover {font-size:14px; color: #FF0000; Background-color: #CCCC99; Text-decoration:none}
a:active {font-size:14px; color: #FFFFFF; Background-color: #191970; Text-decoration:none}
. item{font-size:14px}
-->
</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"
' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' The ' ' "'" "" "" "" "" "" "" "" "" ""
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 in the recordset must be: row_id (unique primary key), Name (menu bar content), par_id (parent 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 ("J=j+1
Wend
Response.Write (" ')
Response.Write ("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>") ' child node content area
I=i+1
Rs. MoveNext
Wend
"" "" "" "" "" "" "" "" "" "" "" "" "" "' Server Code End ' ' ' ' ', ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' '
%>
---------Xtree.js-----------------------------------------------------------------------------
function Getchildtree (Parid,nodelayer)
Hierarchy of parid:= node id,nodelayer:= sub-node
{
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;
}
function Showhide (ObjID)
Display, hidden area, to achieve the purpose of menu display
Parid part of the Objid:= area object ID
{
var temp;
Eval ("Temp=ospan" +objid+ ". Style.display");
if (temp== "block")
{
Eval ("Ospan" +objid+ ". style.display= ' None '");
Eval ("Objnode" "+objid+". src= ' http://edu.cnzz.cn/NewsInfo/open.bmp ');
}
Else
{
Eval ("Ospan" +objid+ ". style.display= ' block ');
Eval ("Objnode" "+objid+". src= ' close.bmp ');
}
}//end function
function Createchildnode (Childnodeid,nodelayer)
Initializes and updates the data if the child node contents are empty
Childnodeid:= the Parid part of the object ID of the child node
{
var temp;
Eval ("Temp=ospan" +childnodeid+ ". InnerHTML");
if (temp== "")
{
Eval ("Ospan" +childnodeid+ "innerhtml= ' <div align=right>loading...</div><br> '");
Temp=new String (Getchildtree (Childnodeid,nodelayer));
if (temp.length!=0)
{
Eval ("Ospan" +childnodeid+ ". Innerhtml=temp");
Eval ("Objnode" +childnodeid+ ". src= ' close.bmp ');//change to minus sign
}
Else
{//If the temp content is empty, the subtree is not found, the node is a leaf node, change the related property
Eval ("Objnode" +childnodeid+ ". src= ' leaf.bmp ');//Change Icon
Eval ("Objnode" +childnodeid+ ". onclick="); Cancel the Click event
Eval ("Ospan" +childnodeid+ ". Innerhtml=temp");/content is empty
}
}
Else
{showhide (Childnodeid);
}
}
