Im Baumverzeichnis wird die Beschreibung des Programmproblems angezeigt:
In unseren Projekten erscheinen häufig selbstkorrelierte Datentabellen. Wenn wir sie als Ganzes betrachten, erscheint die gesamte Tabelle als Baumdatenstruktur (in komplexen Situationen kann sie zu einem Diagramm werden). Wenn wir diese Tabelle anzeigen und bearbeiten, wird sie ungeschickt aussehen, wenn wir keine gute Darstellung verwenden. Aus diesem Grund entwickeln wir ein Programm mit einer solchen Baumstruktur. In der vorherigen Version haben wir zur Implementierung einen rekursiven Algorithmus verwendet. Als wir diesen Algorithmus evaluierten, stellten wir fest, dass er nicht mehr für Datenbanken mit Tausenden von Datensätzen geeignet war. Daher wird in der neuen Algorithmusversion die XML-Technologie zur dynamischen Erkennung verwendet Daten, um das Problem des gleichzeitigen Herunterladens großer Datenmengen vom Server zu lösen. Außerdem wird der Fehler vermieden, in eine Endlosschleife zu geraten, wenn die Tabellendatenstruktur als Diagramm dargestellt wird.
Praktische Ideen:
1. Bei der ersten Anzeige werden nur die Knoten der Wurzel und der zweiten Ebene angezeigt, und die Knoten der Wurzel und der zweiten Ebene befinden sich auf derselben Ebene.
2. Klicken Sie auf einen Knoten. Wenn sein untergeordnetes Knotenbereichsobjekt nicht vorhanden ist, erstellen Sie das Objekt, laden Sie die Daten herunter, aktualisieren Sie die Daten und zeigen Sie alle untergeordneten Knoten an.
3. Jeder Knoten hat nach seiner Einrichtung die gleichen Funktionen, z. B. prüfen, ob untergeordnete Knoten vorhanden sind, untergeordnete Knoten anzeigen und ausblenden usw.
4. Technische Schwierigkeiten bei der gleichzeitigen Verwendung von DHTML+XML+ASP+CSS:
1. Verstümmelte Zeichen bei Verwendung der xmlhttp-Schnittstelle:
Da auf der ASP-Ausgabeseite das Standardcodierungsschema nicht Chinesisch ist, wird es bei der Interpretation in xmlhttp auf der Clientseite im Standardschema analysiert, sodass verstümmelte Zeichen angezeigt werden. Zu diesem Zweck fügen wir der ASP-Seite auf der Serverseite den folgenden Code hinzu, um das Codierungsschema zu definieren:
Response.CharSet="GB2312"
Response.ContentType="text/html"
2. So behalten Sie den Stil der vorherigen Version auf der Schnittstelle bei (Ressourcenmanager-ähnliche Form):
In der vorherigen Version wurden alle Seiteninhalte auf einmal vervollständigt. Zur Steuerung wurden Rekursion und andere Ideen verwendet, und die Benutzeroberfläche war zu diesem Zeitpunkt relativ benutzerfreundlich. Der Mechanismus in dieser Version hat sich jedoch geändert Ein Schlüsselproblem, das mehrfach synthetisiert wurde. Wie kann die ID von img und span object ermittelt werden? Nach der Überprüfung ist es schwierig, dass diese Version der Schnittstelle mit der ersten Schnittstelle übereinstimmt, also nur teilweise Davon kann die neue Schnittstelle jedoch im Allgemeinen beibehalten werden,
da sie hier nicht einfach zu verwenden ist. Daher kann ich nur den Quellcode veröffentlichen:
---xtree.html------
<HTML>
<KOPF>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</SCRIPT>
<style type="text/css">
<!--
a:link { Schriftgröße: 14px; Textdekoration: keine; Farbe: #0000FF}
a:visited { Schriftgröße: 14px; Farbe: #0000FF;
a:hover { Schriftgröße: 14px; Hintergrundfarbe: #CCCC99;
a:active { Schriftgröße: 14px; Farbe: #FFFFFF; Hintergrundfarbe: #191970;
.item{font-size:14px}
->
</style>
</HEAD>
<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold>Baummenü-Demoprogramm</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"
''''''''''''''''''''''''Servercode-Start'''''''''''''''''' ''''''''''''
dim parId,nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
if(parid="") then
Response.Write("Root-ID kann nicht null sein")
Response.End()
Ende wenn
if(nodeLayer<0) dann
nodeLayer=0
end if
%>
<%
strconn="at"
strsql="select * from tree where par='"&parid&"'"
''Anforderungen für das Schreiben von SQL-Anweisungen: Die ersten drei Felder des Datensatzes müssen sein: row_id (eindeutiger Primärschlüssel), name (in der Menüleiste angezeigter Inhalt), par_id (row_id des übergeordneten Knotens) und andere Ausgaben und Anzeige nach Bedarf.
set conn=server.createobject("ADODB.connection")
conn.open strconn
set rs=server.createobject("ADODB.Recordset")
rs.open strsql,conn,3,3
ich=0
dim row_id
row_id=""
während nicht rs.EOF
row_id=rs.Fields("row_id").Value
name=rs.Fields("name").Value
j=0
während j<nodeLayer
Response.Write("<img src='blank.bmp'>")
j=j+1
wenden
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>") 'Projektinhalt
Response.Write("<span id='oSpan"&row_id&"' ></span>") 'Unterknoten-Inhaltsbereich
i=i+1
rs.MoveNext
wenden
''''''''''''''''''''''''''''''''Servercode ENDE '''''' '''''' ''''''''''''''''''
%>
---------xtree.js-------------
function getChildTree(parId,nodeLayer)
parId:=ID des übergeordneten Knotens,nodeLayer:=die Ebene, zu der der untergeordnete Knoten gehört
{
var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Autor:taojianbo;Version:2.0");
return xmlhttp.responseText;
}
Funktion showHide(objid)
Bereiche ein- und ausblenden, um den Zweck der Menüanzeige zu erreichen
objid:=parid Teil der Bereichsobjekt-ID
{
vartemp;
eval("temp=oSpan"+objid+".style.display");
if(temp=="block")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
anders
{
eval("oSpan"+objid+".style.display='block'");
eval("objNode"+objid+".src='close.bmp'");
}
}//end function
function createChildNode(childNodeId,nodeLayer)
Wenn der Inhalt des untergeordneten Knotens leer ist, initialisieren Sie ihn und aktualisieren Sie die Daten
childNodeId:=parid Teil der Objekt-ID des untergeordneten Knotens
{
vartemp;
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'");//In Minuszeichen ändern
}
anders
{// Wenn der temporäre Inhalt leer ist, bedeutet dies, dass der Unterbaum nicht gefunden wurde. Der Knoten ist ein Blattknoten. Ändern Sie die relevanten Attribute
eval("objNode"+childNodeId+".src='leaf.bmp'");//Symbol ändern
eval("objNode"+childNodeId+".onclick=''"); Klickereignis abbrechen
eval("oSpan"+childNodeId+".innerHTML=temp");//Der Inhalt ist leer
}
}
anders
{ showHide(childNodeId);
}
}