قم بإنشاء دليل شجرة مثل المستكشف

الكاتب：Eve Cole وقت التحديث：2009-06-24 17:01:08

يعرض دليل الشجرة وصف مشكلة البرنامج:
غالبًا ما تظهر جداول البيانات المرتبطة ذاتيًا في مشاريعنا، وإذا نظرنا إليها ككل، فسيظهر الجدول بأكمله كبنية بيانات شجرية (في المواقف المعقدة، قد يصبح رسمًا بيانيًا). عندما نعرض هذا الجدول ونحرره، سيبدو غير مناسب إذا لم نستخدم تمثيلاً جيدًا. ولهذا السبب، قمنا بتطوير برنامج بمثل هذه البنية الشجرية. في الإصدار السابق، استخدمنا خوارزمية متكررة لتنفيذها. عندما قمنا بتقييم هذه الخوارزمية، وجدنا أنها لم تعد مناسبة لقواعد البيانات التي تحتوي على آلاف السجلات، لذلك في إصدار الخوارزمية الجديد، يتم استخدام تقنية XML للاكتشاف ديناميكيًا. data لحل مشكلة تنزيل كمية كبيرة من البيانات من الخادم في وقت واحد، كما أنه يتجنب خطأ إدخال حلقة لا نهائية إذا تم تقديم بنية بيانات الجدول كرسم بياني.

أفكار عملية:
1. أثناء العرض الأولي، يتم عرض عقد الجذر وعقد المستوى الثاني فقط، وتكون عقد الجذر وعقد المستوى الثاني على نفس المستوى.
2. انقر فوق عقدة، إذا كان كائن منطقة العقدة الفرعية الخاص بها غير موجود، فقم بإنشاء الكائن وتنزيل البيانات وتحديث البيانات وعرض جميع العقد الفرعية.
3. كل عقدة لها نفس الوظائف بعد إنشائها، مثل التحقق من وجود العقد الفرعية، وإظهار العقد الفرعية وإخفائها، وما إلى ذلك.
4. الصعوبات الفنية في استخدام DHTML+XML+ASP+CSS في نفس الوقت:
1. أحرف مشوهة عند استخدام واجهة xmlhttp:
نظرًا لأن نظام الترميز الافتراضي في صفحة إخراج asp ليس صينيًا، فعندما يتم تفسيره في xmlhttp على صفحة العميل، سيتم تحليله في المخطط الافتراضي، لذلك ستظهر أحرف مشوهة. ولتحقيق هذه الغاية، نضيف الكود التالي إلى صفحة ASP على جانب الخادم لتحديد نظام التشفير:
الاستجابة.CharSet = "GB2312"
Response.ContentType="text/html"

2. كيفية الحفاظ على نمط الإصدار السابق على الواجهة (نموذج يشبه مدير الموارد):
في الإصدار السابق، تم إكمال محتوى الصفحة بالكامل دفعة واحدة وتم استخدام أفكار أخرى للتحكم، وكانت الواجهة سهلة الاستخدام نسبيًا في جميع الأوقات، ومع ذلك، تغيرت الآلية في هذا الإصدار في ذلك الوقت، وأصبح المحتوى متاحًا مشكلة رئيسية تم تجميعها عدة مرات. كيفية تحديد معرف كائن img،span بعد التحقق، من الصعب أن يكون هذا الإصدار من الواجهة هو نفس الواجهة الأولى، لذلك جزء فقط؟ يمكن الاحتفاظ به ولكن بشكل عام، يمكن للواجهة الجديدة أيضًا أن تلبي الاحتياجات

لأنه ليس من السهل استخدامها هنا، لذا يمكنني فقط نشر الكود المصدري:

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

<أتش تي أم أل>
<الرأس>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</النص>
<نمط النوع = "نص/CSS">

</نمط>
</الرأس>
<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 %>
<%
الاستجابة.CharSet = "GB2312"
Response.ContentType = "نص/أتش تي أم أل"
'''''''''''''''''''''''''بدء كود الخادم''''''''''''''' '''' ''''''''''
معرف خافت، عقدة طبقة
parid=Request.QueryString("parId")
NodeLayer=cint(Request.QueryString("nodeLayer"))

إذا (parid = "") ثم
Response.Write("لا يمكن لمعرف الجذر أن يكون فارغًا")
الاستجابة.النهاية ()
نهاية إذا
إذا (nodeLayer <0) ثم
NodeLayer=0

النهاية إذا
%>
<%
ستركون = "في"
strsql="اختر * من الشجرة حيث par='"&parid&"'"
'' متطلبات كتابة عبارة SQL: يجب أن تكون الحقول الثلاثة الأولى لمجموعة السجلات هي:row_id (مفتاح أساسي فريد)، والاسم (المحتوى المعروض على شريط القائمة)، وpar_id (معرف العقدة الأصلية)، وغيرها من المخرجات والعرض حسب الحاجة.
تعيين conn=server.createobject("ADODB.connection")
conn.open strconn

set rs=server.createobject("ADODB.Recordset")
rs.open strsql، كون، 3،3
أنا = 0
خافت Row_id
معرف الصف = ""
في حين لا rs.EOF
Row_id=rs.Fields("row_id").Value
name=rs.Fields("name").القيمة
j=0

بينما j<nodeLayer
Response.Write("<img src='blank.bmp'>")
ي=ي+1
com.wind
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.MoveNext
com.wind
'''''''''''''''''''''''''''نهاية رمز الخادم '''''' '''''' '''''''''''''''
%>

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

الدالة getChildTree(parId,nodeLayer)
parId:=معرف العقدة الأصلية،nodeLayer:=المستوى الذي تنتمي إليه العقدة الفرعية
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("الكاتب:taojianbo;الإصدار:2.0");
إرجاع xmlhttp.responseText;
}

عرض الدالة إخفاء(objid)
إظهار وإخفاء المناطق لتحقيق الغرض من عرض القائمة
objid:=parid جزء من معرف كائن المنطقة
{
فارتمب.
eval("temp=oSpan"+objid+".style.display");
إذا (درجة الحرارة = = "كتلة")
{
eval("oSpan"+objid+".style.display='none'");
eval("objNode"+objid+".src='open.bmp'");
}
آخر
{
eval("oSpan"+objid+".style.display='block'");
eval("objNode"+objid+".src='إغلاق.bmp'");
}
}//

وظيفة النهاية createChildNode(childNodeId,nodeLayer)
إذا كان محتوى العقدة الفرعية فارغًا، فقم بتهيئتها وتحديث البيانات
ChildNodeId:=الجزء المتساوي من معرف كائن العقدة التابعة
{
فارتمب.
eval("temp=oSpan"+childNodeId+".innerHTML");
إذا (درجة الحرارة = = "")
{
eval("oSpan"+childNodeId+".innerHTML='<div align=right>LOADING...</div><br>'");
temp=new String(getChildTree(childNodeId,nodeLayer));
إذا (درجة الحرارة! = 0)
{
eval("oSpan"+childNodeId+".innerHTML=temp");
eval("objNode"+childNodeId+".src='إغلاق.bmp'");// التغيير إلى علامة الطرح
}
آخر
{// إذا كان المحتوى المؤقت فارغًا، فهذا يعني أنه لم يتم العثور على الشجرة الفرعية، والعقدة هي عقدة طرفية، وقم بتغيير السمات ذات الصلة
eval("objNode"+childNodeId+".src='leaf.bmp'");// تغيير الرمز
eval("objNode"+childNodeId+".onclick=''"); إلغاء حدث النقر
eval("oSpan"+childNodeId+".innerHTML=temp");// المحتوى فارغ
}
}
آخر
{ showHide(childNodeId);
}
}