ไดเร็กทอรีแผนผังแสดงคำอธิบายปัญหาของโปรแกรม:
ตารางข้อมูลที่สัมพันธ์กันในตัวเองมักจะปรากฏในโปรเจ็กต์ของเรา หากเราดูโดยรวม ตารางทั้งหมดจะปรากฏเป็นโครงสร้างข้อมูลแบบต้นไม้ (สำหรับสถานการณ์ที่ซับซ้อน อาจกลายเป็นกราฟ) เมื่อเราแสดงและแก้ไขตารางนี้ มันจะดูงุ่มง่ามถ้าเราไม่ใช้การนำเสนอที่ดี ด้วยเหตุนี้ เราจึงพัฒนาโปรแกรมด้วยโครงสร้างแบบต้นไม้ดังกล่าว ในเวอร์ชันก่อนหน้านี้ เราใช้อัลกอริธึมแบบเรียกซ้ำเพื่อใช้งาน เมื่อเราประเมินอัลกอริธึมนี้ เราพบว่ามันไม่เหมาะกับฐานข้อมูลที่มีบันทึกนับพันรายการอีกต่อไป ดังนั้นในเวอร์ชันอัลกอริธึมใหม่ เราใช้เทคโนโลยี XML เพื่อค้นพบแบบไดนามิก ข้อมูลเพื่อแก้ปัญหาการดาวน์โหลดข้อมูลจำนวนมากจากเซิร์ฟเวอร์ในคราวเดียว นอกจากนี้ยังหลีกเลี่ยงข้อผิดพลาดในการเข้าสู่วงรอบไม่สิ้นสุดหากโครงสร้างข้อมูลตารางถูกนำเสนอเป็นกราฟ
แนวคิดเชิงปฏิบัติ:
1. ในระหว่างการแสดงผลครั้งแรก จะแสดงเฉพาะโหนดรูทและโหนดระดับที่สองเท่านั้น และโหนดรูทและโหนดระดับที่สองจะอยู่ในระดับเดียวกัน
2. คลิกโหนด หากไม่มีออบเจ็กต์พื้นที่โหนดย่อย ให้สร้างออบเจ็กต์ ดาวน์โหลดข้อมูล อัปเดตข้อมูล และแสดงโหนดย่อยทั้งหมด
3. แต่ละโหนดมีฟังก์ชันเหมือนกันหลังจากสร้างแล้ว เช่น การตรวจสอบว่ามีโหนดย่อยอยู่หรือไม่ การแสดงและซ่อนโหนดย่อย เป็นต้น
4. ปัญหาทางเทคนิคในการใช้ DHTML+XML+ASP+CSS ในเวลาเดียวกัน:
1. อักขระที่อ่านไม่ออกเมื่อใช้อินเทอร์เฟซ xmlhttp:
เนื่องจากในหน้าเอาต์พุต asp รูปแบบการเข้ารหัสเริ่มต้นไม่ใช่ภาษาจีน ดังนั้นเมื่อมีการแปลเป็น xmlhttp บนเพจไคลเอ็นต์ รูปแบบการเข้ารหัสดังกล่าวจะถูกแยกวิเคราะห์ในรูปแบบเริ่มต้น ดังนั้นอักขระที่อ่านไม่ออกจะปรากฏขึ้น ด้วยเหตุนี้ เราจึงเพิ่มโค้ดต่อไปนี้ลงในเพจ ASP บนฝั่งเซิร์ฟเวอร์เพื่อกำหนดรูปแบบการเข้ารหัส:
Response.CharSet="GB2312"
Response.ContentType="text/html"
2. วิธีรักษาสไตล์ของเวอร์ชันก่อนหน้าบนอินเทอร์เฟซ (รูปแบบเหมือนผู้จัดการทรัพยากร):
ในเวอร์ชันก่อนหน้านี้ เนื้อหาเพจทั้งหมดเสร็จสมบูรณ์ในครั้งเดียว การเรียกซ้ำและแนวคิดอื่นๆ ถูกนำมาใช้ในการควบคุม และอินเทอร์เฟซก็ค่อนข้างเป็นมิตรตลอดเวลา อย่างไรก็ตาม กลไกในเวอร์ชันนี้มีการเปลี่ยนแปลงในขณะนั้น และเนื้อหาก็เป็นเช่นนั้น ปัญหาสำคัญที่มีการสังเคราะห์หลายครั้ง จะกำหนด id ของ img, span object ได้อย่างไร หลังจากตรวจสอบในแง่ของอินเทอร์เฟซแล้ว เป็นเรื่องยากที่อินเทอร์เฟซเวอร์ชันนี้จะเหมือนกับอินเทอร์เฟซแรก ดังนั้นจึงมีเพียงบางส่วนเท่านั้น ของมันก็สามารถเก็บไว้ได้ แต่โดยทั่วไปแล้ว interface ใหม่ก็สามารถตอบสนองความต้องการได้เช่นกัน
เพราะว่ามันไม่ง่ายเลยที่จะใช้งานที่นี่ ดังนั้น ผมจึงทำได้แค่โพสต์ซอร์สโค้ดเท่านั้น:
---xtree.html------
<HTML>
<หัว>
<ชื่อเมตา = "เครื่องกำเนิดไฟฟ้า" เนื้อหา = "Microsoft Visual Studio 6.0">
<ภาษาสคริปต์=javascript src="xtree.js">
</สคริปต์>
<style type="text/css">
-
a:link { ขนาดตัวอักษร: 14px; การตกแต่งข้อความ: ไม่มี;
a: เยี่ยมชม { ขนาดตัวอักษร: 14px สี: #0000FF;
a:hover { ขนาดตัวอักษร: 14px; สีพื้นหลัง: #CCCC99;
a:active { ขนาดตัวอักษร: 14px; สีพื้นหลัง: #191970;
.item{แบบอักษรขนาด: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------------
<%@ ภาษา=VBScript %>
-
Response.CharSet="GB2312"
Response.ContentType="ข้อความ/html"
''''''''''''''''''''''''''''''รหัสเซิร์ฟเวอร์เริ่มต้น'''''''''''''''' '''''' ''''''''''''''
parId สลัว nodeLayer
parid=Request.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
if(parid="") แล้ว
Response.Write("รหัสรูทไม่สามารถเป็นโมฆะได้")
การตอบสนองสิ้นสุด()
สิ้นสุดถ้า
if(nodeLayer<0) แล้ว
nodeLayer=0
สิ้นสุดถ้า
-
-
strconn = "ที่"
strsql="select * จาก tree โดยที่ par='"&parid&"'"
''ข้อกำหนดในการเขียนคำสั่ง SQL: สามฟิลด์แรกของชุดบันทึกต้องเป็น: row_id (คีย์หลักที่ไม่ซ้ำกัน), ชื่อ (เนื้อหาที่แสดงบนแถบเมนู), par_id (โหนดหลัก row_id) และเอาต์พุตและการแสดงผลอื่นๆ ตามความจำเป็น
ตั้งค่า conn=server.createobject("ADODB.connection")
conn.open strconn
ตั้งค่า 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("name").Value
j=0
ในขณะที่ j<nodeLayer
Response.Write("<img src='blank.bmp'>")
เจ=เจ+1
เวน
Response.Write("<img id='objNode"&row_id&"' style='cursor:hand' src='open.bmp' onclick=javascript:createChildNode('"&row_id&"',"&nodeLayer+1&") เส้นขอบ=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:=parent node id,nodeLayer:=ระดับที่โหนดลูกอยู่
-
var 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 ส่วนหนึ่งของ ID วัตถุพื้นที่
-
วาร์เทมป์;
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'");
-
}//สิ้นสุดฟังก์ชัน
ฟังก์ชัน createChildNode(childNodeId,nodeLayer)
หากเนื้อหาของโหนดลูกว่างเปล่า ให้เริ่มต้นและอัพเดตข้อมูล
childNodeId:=parid ส่วนหนึ่งของรหัสวัตถุโหนดลูก
-
วาร์เทมป์;
eval("temp=oSpan"+childNodeId+".innerHTML");
ถ้า(temp=="")
-
eval("oSpan"+childNodeId+".innerHTML='<div align=right>กำลังโหลด...</div><br>'");
temp=new String(getChildTree(childNodeId,nodeLayer));
ถ้า(temp.length!=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);
-
-