Le répertoire arborescent affiche la description du problème du programme :
Des tableaux de données auto-corrélés apparaissent souvent dans nos projets. Si nous le regardons dans son ensemble, le tableau entier apparaît sous la forme d'une structure de données arborescente (pour des situations complexes, il peut devenir un graphique). Lorsque nous affichons et éditons ce tableau, il semblera maladroit si nous n'utilisons pas une bonne représentation. Pour cette raison, nous développons un programme avec une telle structure arborescente. Dans la version précédente, nous utilisions un algorithme récursif pour l'implémenter. Lorsque nous avons évalué cet algorithme, nous avons constaté qu'il n'était plus adapté aux bases de données contenant des milliers d'enregistrements. Dans la nouvelle version de l'algorithme, nous utilisons la technologie XML pour découvrir dynamiquement. data pour résoudre le problème du téléchargement simultané d'une grande quantité de données depuis le serveur. Cela évite également l'erreur d'entrer dans une boucle infinie si la structure des données du tableau est présentée sous forme de graphique.
Idées pratiques :
1. Lors de l'affichage initial, seuls les nœuds racine et de deuxième niveau sont affichés, et les nœuds racine et de deuxième niveau sont au même niveau.
2. Cliquez sur un nœud, si son objet de zone de nœud enfant n'existe pas, créez l'objet, téléchargez les données, mettez à jour les données et affichez tous les nœuds enfants.
3. Chaque nœud a les mêmes fonctions après avoir été établi, comme vérifier si des nœuds enfants existent, afficher et masquer des nœuds enfants, etc.
4. Difficultés techniques liées à l'utilisation simultanée de DHTML+XML+ASP+CSS :
1. Caractères tronqués lors de l'utilisation de l'interface xmlhttp :
Parce que dans la page de sortie asp, le schéma de codage par défaut n'est pas chinois, alors lorsqu'il est interprété en xmlhttp sur la page client, il sera analysé dans le schéma par défaut, donc des caractères tronqués apparaîtront. À cette fin, nous ajoutons le code suivant à la page ASP côté serveur pour définir le schéma d'encodage :
Réponse.CharSet="GB2312"
Response.ContentType="text/html"
2. Comment conserver le style de la version précédente sur l'interface (formulaire de type gestionnaire de ressources) :
Dans la version précédente, tout le contenu de la page était complété en une seule fois. La récursion et d'autres idées étaient utilisées pour le contrôle, et l'interface était relativement conviviale à tout moment. Cependant, le mécanisme de cette version a changé à ce moment-là et le contenu l'est. une question clé qui a été synthétisée à plusieurs reprises.Comment déterminer l'identifiant de l'objet img, span ?Après vérification, en termes d'interface, il est difficile que cette version de l'interface soit la même que la première interface, donc seulement une partie Une partie peut être conservée. Mais en général, la nouvelle interface peut également répondre aux besoins
car elle n'est pas facile à utiliser ici, je ne peux donc poster que le code source :
---xtree.html------.
<HTML>
<TÊTE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</SCRIPT>
<style type="text/css">
<!--
a:lien { taille de police : 14 px ; décoration de texte : aucune ; couleur : #0000FF}
a: visité { taille de police : 14px ; couleur : #0000FF ; décoration de texte : aucune}
a:hover { taille de police : 14 px ; couleur : #FF0000 ; couleur d'arrière-plan : #CCCC99 ;
a:active { taille de police : 14 px ; couleur : #FFFFFF ; couleur d'arrière-plan : #191970 ;
.item{taille de police : 14px}
-->
</style>
</HEAD>
<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold>Programme de démonstration du menu arborescent</bold><br>
<bordure du tableau=0>
<tr><td nowrap>
<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
</table>
</CORPS>
</HTML>
-------xtree.asp------------
<%@ Language=VBScript %>
<%
Réponse.CharSet="GB2312"
Réponse.ContentType="text/html"
'''''''''''''''''''''''''Démarrage du code du serveur'''''''''''''''' '''' ''''''''''
dim parId, nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
if(parid="") then
Response.Write ("l'identifiant racine ne peut pas être nul")
Réponse.Fin()
finir si
si(nodeLayer<0) alors
nodeLayer=0
fin si
%>
<%
strconn="à"
strsql="select * from tree which par=""&parid&"'"
" Exigences d'écriture des instructions SQL : les trois premiers champs du jeu d'enregistrements doivent être : row_id (clé primaire unique), nom (contenu affiché dans la barre de menu), par_id (row_id du nœud parent) et autres sorties et affichages selon les besoins.
set conn=server.createobject("ADODB.connection")
conn.open strconn
set rs=server.createobject("ADODB.Recordset")
rs.open strsql,conn,3,3
je = 0
faible row_id
ligne_id=""
bien que ce ne soit pas rs.EOF
row_id=rs.Fields("row_id").Valeur
nom=rs.Fields("nom").Valeur
j=0
tandis que j<nodeLayer
Réponse.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>") 'Contenu du projet
Response.Write("<span id='oSpan"&row_id&"' ></span>") 'Zone de contenu du sous-nœud
je=je+1
rs.MoveNext
wend
''''''''''''''''''''''''''''''''Code du serveur FIN '''''' '''''' '''''''''''''''''
%>
---------xtree.js-------------
fonction getChildTree(parId,nodeLayer)
parId:=identifiant du nœud parent,nodeLayer:=le niveau auquel appartient le nœud enfant
{
var xmlhttp = nouvel ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Auteur:taojianbo;Version:2.0");
renvoyer xmlhttp.responseText ;
}
fonction showHide(objid)
Afficher et masquer les zones pour atteindre l'objectif d'affichage du menu
objid : = partie parid de l'ID de l'objet de zone
{
vartemp;
eval("temp=oSpan"+objid+".style.display");
si(temp=="bloc")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
autre
{
eval("oSpan"+objid+".style.display='block'");
eval("objNode"+objid+".src='close.bmp'");
}
}//fonction de fin
fonction createChildNode(childNodeId,nodeLayer)
Si le contenu du nœud enfant est vide, initialisez-le et mettez à jour les données
childNodeId :=partie parid de l'ID de l'objet du nœud enfant
{
vartemp;
eval("temp=oSpan"+childNodeId+".innerHTML");
si(temp=="")
{
eval("oSpan"+childNodeId+".innerHTML='<div align=right>LOADING...</div><br>'");
temp=new String(getChildTree(childNodeId,nodeLayer));
si (temp.longueur! = 0)
{
eval("oSpan"+childNodeId+".innerHTML=temp");
eval("objNode"+childNodeId+".src='close.bmp'");//Changement en signe moins
}
autre
{//Si le contenu temporaire est vide, cela signifie que le sous-arbre n'est pas trouvé, alors le nœud est un nœud feuille, modifiez les attributs pertinents
eval("objNode"+childNodeId+".src='leaf.bmp'");//Changer d'icône
eval("objNode"+childNodeId+".onclick=''"); Annuler l'événement de clic
eval("oSpan"+childNodeId+".innerHTML=temp");//Le contenu est vide
}
}
autre
{ showHide(childNodeId);
}
}