El directorio de árbol muestra la descripción del problema del programa:
Las tablas de datos autocorrelacionadas suelen aparecer en nuestros proyectos. Si las miramos en su conjunto, la tabla completa aparece como una estructura de datos de árbol (para situaciones complejas, puede convertirse en un gráfico). Cuando mostramos y editamos esta tabla, parecerá torpe si no utilizamos una buena representación. Por esta razón, desarrollamos un programa con una estructura de árbol. En la versión anterior, utilizamos un algoritmo recursivo para implementarlo. Cuando evaluamos este algoritmo, descubrimos que ya no era adecuado para bases de datos con miles de registros, por lo que en la nueva versión del algoritmo, utilizamos la tecnología XML para descubrir dinámicamente. data para resolver el problema de descargar una gran cantidad de datos del servidor a la vez. También evita el error de ingresar a un bucle infinito si la estructura de datos de la tabla se presenta como un gráfico.
Ideas prácticas:
1. Durante la visualización inicial, solo se muestran los nodos raíz y de segundo nivel, y los nodos raíz y de segundo nivel están en el mismo nivel.
2. Haga clic en un nodo, si su objeto de área de nodo secundario no existe, cree el objeto, descargue los datos, actualice los datos y muestre todos los nodos secundarios.
3. Cada nodo tiene las mismas funciones después de su establecimiento, como verificar si existen nodos secundarios, mostrar y ocultar nodos secundarios, etc.
4. Dificultades técnicas al utilizar DHTML+XML+ASP+CSS al mismo tiempo:
1. Caracteres confusos al utilizar la interfaz xmlhttp:
Debido a que en la página de salida de ASP, el esquema de codificación predeterminado no es chino, cuando se interpreta en xmlhttp en la página del cliente, se analizará en el esquema predeterminado, por lo que aparecerán caracteres confusos. Para ello, agregamos el siguiente código a la página ASP del lado del servidor para definir el esquema de codificación:
Respuesta.CharSet="GB2312"
Response.ContentType="text/html"
2. Cómo mantener el estilo de la versión anterior en la interfaz (forma similar a un administrador de recursos):
En la versión anterior, todo el contenido de la página se completaba de una vez. La recursividad y otras ideas se controlaban, y la interfaz era relativamente amigable en todo momento. Sin embargo, el mecanismo en esta versión cambió en ese momento y el contenido sí. Un problema clave que se ha sintetizado varias veces. ¿Cómo determinar la identificación de img y el objeto span? Después de la verificación, en términos de interfaz, es difícil que esta versión de la interfaz sea la misma que la primera interfaz, por lo que solo una parte. Pero en general, la nueva interfaz también puede satisfacer las necesidades
porque no es fácil de usar aquí. Adjunto, por lo que solo puedo publicar el código fuente:
---xtree.html------.
<HTML>
<CABEZA>
<META NAME="GENERADOR" Contenido="Microsoft Visual Studio 6.0">
<IDIOMA DE ESCRITURA=javascript src="xtree.js">
</SCRIPT>
<tipo de estilo="texto/css">
<!--
a:enlace {tamaño de fuente: 14px; decoración de texto: ninguno; color: #0000FF}
a: visitado {tamaño de fuente: 14px; color: #0000FF; decoración de texto: ninguno}
a:hover {tamaño de fuente: 14px; color: #FF0000; color de fondo: #CCCC99;
a:active {tamaño de fuente: 14px; color: #FFFFFF; color de fondo: #191970; decoración de texto: ninguno}
.item{font-size:14px}
-->
</estilo>
</CABEZA>
<CUERPO margen izquierdo=0 margen derecho=0 margen superior=0 borde=0>
<bold>Programa de demostración del menú de árbol</bold><br>
<borde de la tabla=0>
<tr><td ahorarap>
<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
</tabla>
</CUERPO>
</HTML>
-------xtree.asp------------
<%@ Idioma=VBScript %>
<%
Respuesta.CharSet="GB2312"
Respuesta.ContentType="texto/html"
'''''''''''''''''''''''''Inicio del código del servidor'''''''''''''' '''' '''''''''''
parId tenue, capa de nodo
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
si(parid="") entonces
Response.Write ("el ID de raíz no puede ser nulo")
Respuesta.Fin()
terminar si
si (nodeLayer <0) entonces
nodeLayer = 0
finalizar si
%>
<%
strconn="en"
strsql="seleccione * del árbol donde par='"&parid&"'"
''Requisitos de escritura de declaraciones SQL: los primeros tres campos del conjunto de registros deben ser: row_id (clave primaria única), nombre (contenido que se muestra en la barra de menú), par_id (row_id del nodo principal) y otros resultados y visualización según sea necesario.
establecer conexión=servidor.createobject("ADODB.conexión")
conn.open strconn
set rs=server.createobject("ADODB.Recordset")
rs.open strsql, conexión, 3,3
yo=0
ID de fila tenue
fila_id=""
mientras no rs.EOF
fila_id=rs.Fields("fila_id").Valor
nombre=rs.Fields("nombre").Valor
j=0
mientras j<nodeLayer
Respuesta.Write("<img src='blank.bmp'>")
j=j+1
encaminarse a
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>") 'Contenido del proyecto
Response.Write("<span id='oSpan"&row_id&"' >>span>") 'Área de contenido del subnodo
yo=yo+1
rs.MoverSiguiente
encaminarse a
'''''''''''''''''''''''''''''''Código de servidor FIN '''''' '''''' ''''''''''''''''''
%>
---------xtree.js-------------
función getChildTree(parId,nodeLayer)
parId:=id del nodo padre,nodeLayer:=el nivel al que pertenece el nodo hijo
{
var xmlhttp = nuevo ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Autor:taojianbo;Versión:2.0");
devolver xmlhttp.responseText;
}
función mostrarOcultar(objid)
Mostrar y ocultar áreas para lograr el propósito de mostrar el menú
objid:=parte parida del ID del objeto del área
{
vartemp;
eval("temp=oSpan"+objid+".style.display");
si(temp=="bloque")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
demás
{
eval("oSpan"+objid+".style.display='bloque'");
eval("objNode"+objid+".src='close.bmp'");
}
}//función final
función createChildNode(childNodeId,nodeLayer)
Si el contenido del nodo secundario está vacío, inicialícelo y actualice los datos.
childNodeId:=parte parida del ID del objeto del nodo secundario
{
vartemp;
eval("temp=oSpan"+childNodeId+".innerHTML");
si(temp=="")
{
eval("oSpan"+childNodeId+".innerHTML='<div align=right>CARGANDO...</div><br>'");
temp=new String(getChildTree(childNodeId,nodeLayer));
si (longitud temporal! = 0)
{
eval("oSpan"+childNodeId+".innerHTML=temp");
eval("objNode"+childNodeId+".src='close.bmp'");//Cambiar al signo menos
}
demás
{// Si el contenido temporal está vacío, significa que no se encuentra el subárbol, entonces el nodo es un nodo hoja, cambie los atributos relevantes
eval("objNode"+childNodeId+".src='leaf.bmp'");//Cambiar icono
eval("objNode"+childNodeId+".onclick=''"); Cancelar evento de clic
eval("oSpan"+childNodeId+".innerHTML=temp");//El contenido está vacío
}
}
demás
{ showHide(childNodeId);
}
}