O diretório em árvore exibe a descrição do problema do programa:
Tabelas de dados autocorrelacionadas geralmente aparecem em nossos projetos. Se olharmos para ela como um todo, a tabela inteira aparece como uma estrutura de dados em árvore (para situações complexas, pode se tornar um gráfico). Quando exibimos e editamos esta tabela, ela parecerá desajeitada se não usarmos uma boa representação. Por esse motivo, desenvolvemos um programa com essa estrutura em árvore. Na versão anterior, usamos um algoritmo recursivo para implementá-lo. Quando avaliamos esse algoritmo, descobrimos que ele não era mais adequado para bancos de dados com milhares de registros, portanto, na nova versão do algoritmo, a tecnologia XML é usada para descobrir dinamicamente. dados para resolver o problema de baixar uma grande quantidade de dados do servidor de uma só vez. Também evita o erro de entrar em um loop infinito se a estrutura de dados da tabela for apresentada como um gráfico.
Ideias práticas:
1. Durante a exibição inicial, apenas os nós raiz e de segundo nível são exibidos, e os nós raiz e de segundo nível estão no mesmo nível.
2. Clique em um nó, se seu objeto de área de nó filho não existir, crie o objeto, baixe os dados, atualize os dados e exiba todos os nós filhos.
3. Cada nó tem as mesmas funções após ser estabelecido, como verificar se existem nós filhos, mostrar e ocultar nós filhos, etc.
4. Dificuldades técnicas em usar DHTML+XML+ASP+CSS ao mesmo tempo:
1. Caracteres ilegíveis ao usar a interface xmlhttp:
Como na página de saída asp, o esquema de codificação padrão não é chinês, quando for interpretado em xmlhttp na página do cliente, ele será analisado no esquema padrão, portanto, caracteres ilegíveis aparecerão. Para isso, adicionamos o seguinte código à página ASP do lado do servidor para definir o esquema de codificação:
Response.CharSet="GB2312"
Response.ContentType="text/html"
2. Como manter o estilo da versão anterior na interface (formulário semelhante ao gerenciador de recursos):
Na versão anterior, todo o conteúdo da página era concluído de uma só vez e outras ideias eram usadas no controle, e a interface era relativamente amigável em todos os momentos. No entanto, o mecanismo nesta versão mudou naquela época, e o conteúdo é. uma questão importante que foi sintetizada várias vezes. Como determinar o id do objeto img, span Após a verificação, em termos de interface, é difícil que esta versão da interface seja igual à primeira interface, portanto, apenas parte? mas, em geral, a nova interface também pode atender às necessidades
porque não é fácil de usar aqui, então só posso postar o código-fonte:
---xtree.html------.
<HTML>
<CABEÇA>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</SCRIPT>
<style type="texto/css">
<!--
a:link {tamanho da fonte: 14px; decoração do texto: nenhum cor: #0000FF}
a:visitado {tamanho da fonte: 14px cor: #0000FF;
a:hover { tamanho da fonte: 14px cor: #FF0000; cor de fundo: #CCCC99;
a:ativo {tamanho da fonte: 14px cor: #FFFFFF; cor de fundo: #191970;
.item{tamanho da fonte:14px}
-->
</estilo>
</HEAD>
<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold>Programa de demonstração do menu em árvore</bold><br>
<borda da tabela=0>
<tr><td agorarap>
<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
</tabela>
</BODY>
</HTML>
-------xtree.asp-----------
<%@ Idioma=VBScript %>
<%
Response.CharSet="GB2312"
Response.ContentType="texto/html"
'''''''''''''''''''''''''Início do código do servidor'''''''''''''''' '''' '''''''''''
dim parId,nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
if(parid="") então
Response.Write("ID de root não pode ser nulo")
Resposta.End()
terminar se
if(nodeLayer<0) então
nodeLayer=0
fim se
%>
<%
strconn="em"
strsql="selecione * da árvore onde par='"&parid&"'"
''Requisitos de gravação de instruções SQL: Os três primeiros campos do conjunto de registros devem ser: row_id (chave primária exclusiva), nome (conteúdo exibido na barra de menu), par_id (nó pai row_id) e outras saídas e exibição conforme necessário.
definir conn=server.createobject("ADODB.connection")
conn.open strconn
set rs=server.createobject("ADODB.Recordset")
rs.open strsql,conn,3,3
eu=0
esmaecer row_id
row_id=""
enquanto não rs.EOF
row_id=rs.Fields("row_id").Valor
nome=rs.Fields("nome").Valor
j=0
enquanto j<nodeLayer
Response.Write("<img src='blank.bmp'>")
j=j+1
vamos
Response.Write("<img id='objNode"&row_id&"' style='cursor:hand' src='open.bmp' onclick=javascript:createChildNode('"&row_id&"',"&nodeLayer+1&") border=0 alinhar='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>") 'Conteúdo do projeto
Response.Write("<span id='oSpan"&row_id&"' </span>") 'Área de conteúdo do subnó
eu=eu+1
rs.MoveNext
vamos
'''''''''''''''''''''''''''''''''Código do servidor END '''''' '''''' '''''''''''''''''
%>
---------xtree.js-------------
função getChildTree(parId,nodeLayer)
parId:=id do nó pai,nodeLayer:=o nível ao qual o nó filho pertence
{
var xmlhttp = novo ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Autor:taojianbo;Versão:2.0");
retornar xmlhttp.responseText;
}
função mostrarOcultar(objid)
Mostrar e ocultar áreas para atingir o objetivo de exibição do menu
objid:=parid parte do ID do objeto de área
{
vartemp;
eval("temp=oSpan"+objid+".style.display");
if(temp=="bloco")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
outro
{
eval("oSpan"+objid+".style.display='bloco'");
eval("objNode"+objid+".src='close.bmp'");
}
}//fim da função function
createChildNode(childNodeId,nodeLayer)
Se o conteúdo do nó filho estiver vazio, inicialize-o e atualize os dados
childNodeId:=parid parte do ID do objeto do nó filho
{
vartemp;
eval("temp=oSpan"+childNodeId+".innerHTML");
if(temp=="")
{
eval("oSpan"+childNodeId+".innerHTML='<div align=right>CARREGANDO...</div><br>'");
temp=new String(getChildTree(childNodeId,nodeLayer));
if(temp.comprimento!=0)
{
eval("oSpan"+childNodeId+".innerHTML=temp");
eval("objNode"+childNodeId+".src='close.bmp'");//Muda para sinal de menos
}
outro
{//Se o conteúdo temporário estiver vazio, significa que a subárvore não foi encontrada, então o nó é um nó folha, altere os atributos relevantes
eval("objNode"+childNodeId+".src='leaf.bmp'");//Alterar ícone
eval("objNode"+childNodeId+".onclick=''"); Cancelar evento de clique
eval("oSpan"+childNodeId+".innerHTML=temp");//O conteúdo está vazio
}
}
outro
{ mostrarHide(childNodeId);
}
}