В дереве каталога отображается описание проблемы программы:
В наших проектах часто появляются таблицы самокоррелированных данных. Если рассматривать их в целом, вся таблица выглядит как древовидная структура данных (в сложных ситуациях она может стать графом). Когда мы отображаем и редактируем эту таблицу, она будет выглядеть неуклюже, если мы не будем использовать хорошее представление. По этой причине мы разрабатываем программу с такой древовидной структурой. В предыдущей версии для его реализации мы использовали рекурсивный алгоритм. Когда мы оценили этот алгоритм, мы обнаружили, что он больше не подходит для баз данных с тысячами записей, поэтому в новой версии алгоритма для динамического обнаружения используется технология XML. data для решения проблемы одновременной загрузки большого объема данных с сервера. Также можно избежать ошибки входа в бесконечный цикл, если структура данных таблицы представлена в виде графа.
Практические идеи:
1. При первоначальном отображении отображаются только корневые узлы и узлы второго уровня, причем корневые узлы и узлы второго уровня находятся на одном уровне.
2. Щелкните узел, если объект области его дочернего узла не существует, создайте объект, загрузите данные, обновите данные и отобразите все дочерние узлы.
3. После создания каждый узел имеет одинаковые функции, например проверку существования дочерних узлов, отображение и скрытие дочерних узлов и т. д.
4. Технические трудности при одновременном использовании DHTML+XML+ASP+CSS:
1. Искаженные символы при использовании интерфейса xmlhttp:
Поскольку на странице вывода asp схема кодировки по умолчанию не является китайской, то при ее интерпретации в xmlhttp на клиентской странице она будет анализироваться в схеме по умолчанию, поэтому будут отображаться искаженные символы. Для этого добавим следующий код на страницу ASP на стороне сервера, чтобы определить схему кодирования:
Response.CharSet="GB2312"
Response.ContentType="text/html"
2. Как сохранить стиль предыдущей версии интерфейса (форма, похожая на менеджер ресурсов):
В предыдущей версии все содержимое страницы заполнялось за один раз. Для управления использовались рекурсия и другие идеи, а интерфейс всегда был относительно дружелюбным. Однако в этой версии в то время изменился механизм, и содержимое изменилось. Ключевая проблема, которая была синтезирована несколько раз. Как определить идентификатор объекта img, span? После проверки с точки зрения интерфейса этой версии интерфейса трудно совпадать с первым интерфейсом, поэтому только часть? его можно сохранить. Но в целом новый интерфейс также может удовлетворить потребности
, поскольку здесь его нелегко использовать, поэтому я могу разместить только исходный код:
---xtree.html------
<HTML>
<ГОЛОВКА>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</СКРИПТ>
<style type="text/css">
<!--
а: ссылка {размер шрифта: 14 пикселей; текст-декорация: нет, цвет: # 0000FF}
а: посетил {размер шрифта: 14 пикселей; цвет: # 0000FF оформление текста: нет};
а: hover {размер шрифта: 14 пикселей; цвет: # FF0000; цвет фона: # CCCC99; оформление текста: нет}
а: активный {размер шрифта: 14 пикселей; цвет: #FFFFFF; цвет фона: #191970; оформление текста: нет}
.item{font-size:14px}
-->
</стиль>
</HEAD>
<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold>Демонстрационная программа с древовидным меню</bold><br>
<граница таблицы=0>
<tr><td сейчасрап>
<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
</таблица>
</ТЕЛО>
</HTML>
-------xtree.asp------------
<%@ Language=VBScript %>
<%
Response.CharSet="GB2312"
Response.ContentType="текст/html"
''''''''''''''''''''''''''Начало кода сервера'''''''''''''''' '''' '''''''''''
тусклый парИД, nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
if(parid="") тогда
Response.Write("Идентификатор корня не может быть нулевым")
Ответ.Конец()
конец, если
если (nodeLayer<0), то
nodeLayer=0
конец, если
%>
<%
стрконн="в"
strsql="выбрать * из дерева, где par=""&parid&"'"
''Требования к написанию операторов SQL: первые три поля набора записей должны быть следующими: row_id (уникальный первичный ключ), имя (содержимое, отображаемое в строке меню), par_id (родительский узел row_id), а также другие выходные данные и отображение по мере необходимости.
set conn=server.createobject("ADODB.connection")
conn.open strconn
set rs=server.createobject("ADODB.Recordset")
rs.open strsql,conn,3,3
я = 0
тусклый идентификатор строки
row_id=""
пока не rs.EOF
row_id=rs.Fields("row_id").Значение
name=rs.Fields("имя").Значение
j=0,
пока j<nodeLayer
Response.Write("<img src='blank.bmp'>")
j=j+1
идти
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>") 'Содержимое проекта
Response.Write("<span id='oSpan"&row_id&"' ></span>") 'Область содержимого подузла
я=я+1
rs.MoveNext
идти
'''''''''''''''''''''''''''''''''Код сервера КОНЕЦ '''''' '''''' ''''''''''''''''''
%>
---------xtree.js-------------
функция getChildTree(parId,nodeLayer)
parId:=идентификатор родительского узла,nodeLayer:=уровень, к которому принадлежит дочерний узел
{
вар xmlhttp = новый ActiveXObject («Microsoft.XMLHTTP»);
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Автор:taojianbo;Версия:2.0");
вернуть xmlhttp.responseText;
}
Функция showHide(objid)
Показать и скрыть области для достижения цели отображения меню.
objid:=parid часть идентификатора объекта области
{
вартемп;
eval("temp=oSpan"+objid+".style.display");
если(temp=="блокировать")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
еще
{
eval("oSpan"+objid+".style.display='block'");
eval("objNode"+objid+".src='close.bmp'");
}
} // завершаем функцию
function createChildNode(childNodeId,nodeLayer)
Если содержимое дочернего узла пусто, инициализируйте его и обновите данные.
childNodeId:=parid часть идентификатора объекта дочернего узла
{
вартемп;
eval("temp=oSpan"+childNodeId+".innerHTML");
если(темп=="")
{
eval("oSpan"+childNodeId+".innerHTML='<div align=right>ЗАГРУЗКА...</div><br>'");
temp = новая строка (getChildTree (childNodeId, nodeLayer));
если (темп.длина!=0)
{
eval("oSpan"+childNodeId+".innerHTML=temp");
eval("objNode"+childNodeId+".src='close.bmp'");//Изменяем знак на минус
}
еще
{//Если временное содержимое пусто, это означает, что поддерево не найдено, тогда узел является листовым узлом, измените соответствующие атрибуты
eval("objNode"+childNodeId+".src='leaf.bmp'");//Изменить значок
eval("objNode"+childNodeId+".onclick=''"); Отменить событие клика
eval("oSpan"+childNodeId+".innerHTML=temp");//Содержимое пусто
}
}
еще
{ showHide (childNodeId);
}
}