탐색기와 같은 트리 디렉터리 생성

저자：Eve Cole 업데이트 시간：2009-06-24 17:01:08

트리 디렉토리에는 프로그램 문제 설명이 표시됩니다.
우리 프로젝트에는 자기 상관 데이터 테이블이 자주 등장합니다. 전체적으로 보면 테이블 전체가 트리 데이터 구조로 나타납니다(복잡한 상황에서는 그래프가 될 수도 있습니다). 이 테이블을 표시하고 편집할 때 좋은 표현을 사용하지 않으면 어색해 보일 것입니다. 이러한 이유로 우리는 이러한 트리 구조를 가진 프로그램을 개발합니다. 이전 버전에서는 재귀 알고리즘을 사용하여 구현했습니다. 이 알고리즘을 평가한 결과 수천 개의 레코드가 있는 데이터베이스에는 더 이상 적합하지 않다는 것을 알았으므로 새 알고리즘 버전에서는 XML 기술을 사용하여 동적으로 검색합니다. 서버에서 많은 양의 데이터를 한번에 다운로드 받는 문제를 해결하기 위해 테이블 데이터 구조를 그래프로 표현하면 무한 루프에 들어가는 오류도 방지할 수 있습니다.

실용적인 아이디어:
1. 초기 표시 중에는 루트 및 2차 레벨 노드만 표시되며, 루트 및 2차 레벨 노드는 동일한 레벨에 있습니다.
2. 노드를 클릭하고 해당 하위 노드 영역 개체가 존재하지 않는 경우 개체를 생성하고 데이터를 다운로드하고 데이터를 업데이트하여 모든 하위 노드를 표시합니다.
3. 각 노드는 하위 노드 존재 여부 확인, 하위 노드 표시 및 숨기기 등 설정 후 동일한 기능을 갖습니다.
4. DHTML+XML+ASP+CSS를 동시에 사용할 때의 기술적인 어려움:
1. xmlhttp 인터페이스를 사용할 때 문자가 깨집니다.
ASP 출력 페이지의 기본 인코딩 체계는 중국어가 아니기 때문에 클라이언트 페이지의 xmlhttp에서 해석될 때 기본 체계에서 구문 분석되므로 잘못된 문자가 나타납니다. 이를 위해 서버 측 ASP 페이지에 다음 코드를 추가하여 인코딩 체계를 정의합니다.
Response.CharSet="GB2312"
Response.ContentType="text/html"

2. 인터페이스에서 이전 버전의 스타일을 유지하는 방법(리소스 관리자와 유사한 형식):
이전 버전에서는 모든 페이지 콘텐츠가 재귀 및 기타 아이디어를 사용하여 제어되었으며 인터페이스는 항상 비교적 친숙했습니다. 그러나 이 버전의 메커니즘은 그 당시 변경되었으며 콘텐츠는 다음과 같습니다. 여러번 합성된 핵심 이슈 img,span 객체의 id를 어떻게 알 수 있나요? 확인 후 인터페이스 측면에서 이 버전의 인터페이스는 첫 번째 인터페이스와 동일하기 어렵기 때문에 일부만 확인해야 합니다.

그러나 일반적으로 새 인터페이스는

여기에서 사용하기가 쉽지 않기 때문에

요구 사항을 충족할 수 있으므로

소스 코드만 게시할 수 있습니다:

---xtree.html------

<HTML>
<헤드>
<META NAME="생성기" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</SCRIPT>
<스타일 유형="텍스트/css">

</style>
</HEAD>
<BODY leftMargin=0 rightMargin=0 topMargin=0 테두리=0>
<bold>트리 메뉴 데모 프로그램</bold><br>
<테이블 테두리=0>
<tr><td 현재 랩>
<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
</table>
</BODY>
</HTML>

-------xtree.asp------------

<%@ 언어=VBScript %>
<%
Response.CharSet="GB2312"
Response.ContentType="텍스트/html"
'''''''''''''''''''''''''서버 코드 시작''''''''''''''' '''' '''''''''''
희미한 parId, nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))

if(parid="") then
Response.Write("루트 ID는 null일 수 없습니다.")
응답.끝()
종료하면
if(nodeLayer<0) 그러면
nodeLayer=0

이면 끝납니다.
%>
<%
strconn="at"
strsql="par='"&parid&"'"인 트리에서 *를 선택하세요.
''SQL 문 작성 요구 사항: 레코드 세트의 처음 세 필드는 row_id(고유 기본 키), 이름(메뉴 표시줄에 표시되는 콘텐츠), par_id(상위 노드 row_id) 및 필요에 따라 기타 출력 및 표시여야 합니다.
conn=server.createobject("ADODB.connection")을 설정하십시오.
conn.open strconn

set rs=server.createobject("ADODB.Recordset")
rs.open strsql,conn,3,3
나는=0
희미한 row_id
행_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 정렬='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.이동다음
향하게 하다
''''''''''''''''''''''''''''''''서버 코드 끝 '''''' '''''' '''''''''''''''''
%>

--------xtree.js---------------

함수 getChildTree(parId,nodeLayer)
parId:=상위 노드 id,nodeLayer:=하위 노드가 속한 레벨
{
var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("저자:taojianbo;버전:2.0");
xmlhttp.responseText를 반환합니다.
}

함수 showHide(objid)
메뉴 표시 목적을 달성하기 위해 영역 표시 및 숨기기
objid:=영역 객체 ID의 parid 부분
{
vartemp;
eval("temp=oSpan"+objid+".style.display");
if(임시=="차단")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
또 다른
{
eval("oSpan"+objid+".style.display='block'");
eval("objNode"+objid+".src='close.bmp'");
}
}//함수 종료