Direktori pohon menampilkan deskripsi masalah program:
Tabel data yang berkorelasi mandiri sering kali muncul dalam proyek kita. Jika kita melihatnya secara keseluruhan, keseluruhan tabel tampak sebagai struktur data pohon (untuk situasi kompleks, dapat berupa grafik). Ketika kita menampilkan dan mengedit tabel ini, akan terlihat janggal jika kita tidak menggunakan representasi yang baik. Oleh karena itu, kita mengembangkan program dengan struktur pohon seperti itu. Pada versi sebelumnya, kami menggunakan algoritma rekursif untuk mengimplementasikannya. Ketika kami mengevaluasi algoritma ini, kami menemukan bahwa algoritma ini tidak lagi cocok untuk database dengan ribuan catatan, jadi dalam versi algoritma baru, kami menggunakan teknologi XML untuk menemukan secara dinamis. data untuk mengatasi masalah pengunduhan data dalam jumlah besar dari server sekaligus. Hal ini juga menghindari kesalahan memasuki loop tak terbatas jika struktur data tabel disajikan sebagai grafik.
Ide praktis:
1. Selama tampilan awal, hanya node root dan level kedua yang ditampilkan, dan node root dan level kedua berada pada level yang sama.
2. Klik sebuah node, jika objek area node turunannya tidak ada, buat objek, unduh data, perbarui data, dan tampilkan semua node turunan.
3. Setiap node memiliki fungsi yang sama setelah dibuat, seperti memeriksa apakah node anak ada, menampilkan dan menyembunyikan node anak, dll.
4. Kesulitan teknis dalam menggunakan DHTML+XML+ASP+CSS secara bersamaan:
1. Karakter kacau saat menggunakan antarmuka xmlhttp:
Karena pada halaman keluaran asp skema pengkodean defaultnya bukan bahasa Mandarin, maka ketika diinterpretasikan dalam xmlhttp di halaman klien akan diurai dalam skema default sehingga akan muncul karakter yang kacau. Untuk tujuan ini, kami menambahkan kode berikut ke halaman ASP di sisi server untuk menentukan skema pengkodean:
Respon.CharSet="GB2312"
Response.ContentType="text/html"
2. Cara mempertahankan gaya versi sebelumnya pada antarmuka (bentuk seperti pengelola sumber daya):
Di versi sebelumnya, semua konten halaman diselesaikan sekaligus. Rekursi dan ide lainnya digunakan dalam kontrol, dan antarmukanya relatif ramah setiap saat. Namun, mekanisme dalam versi ini telah berubah pada saat itu, dan kontennya masalah utama yang telah disintesis berkali-kali. Bagaimana cara menentukan id objek img, span? Setelah verifikasi, dalam hal antarmuka, versi antarmuka ini sulit untuk sama dengan antarmuka pertama, jadi hanya sebagian. sebagian dapat dipertahankan. Namun secara umum antarmuka baru juga dapat memenuhi kebutuhan
karena tidak mudah digunakan di sini. Lampiran, jadi saya hanya dapat memposting kode sumber:
---xtree.html------
<HTML>
<KEPALA>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<BAHASA SKRIP=javascript src="xtree.js">
</SKRIP>
<gaya tipe="teks/css">
<!--
a:link { ukuran font: 14px; dekorasi teks: tidak ada; warna: #0000FF}
a:dikunjungi { ukuran font: 14 piksel; warna: #0000FF; dekorasi teks: tidak ada}
a:hover { ukuran font: 14px; warna: #FF0000; warna latar: #CCCC99;
a:aktif { ukuran font: 14 piksel; warna: #FFFFFF; warna latar: #191970;
.item{ukuran font:14px}
-->
</gaya>
</KEPALA>
<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold>Program demo menu pohon</bold><br>
<batas tabel=0>
<tr><td sekarang>
<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
</tabel>
</BODI>
</HTML>
-------xtree.asp------------
<%@ Bahasa=VBScript %>
<%
Respon.CharSet="GB2312"
Respon.ContentType="teks/html"
'''''''''''''''''''''''''''Kode server dimulai''''''''''''''''' '''' '''''''''''
redupkan parId,nodeLayer
parid=Permintaan.QueryString("parId")
nodeLayer=cint(Request.QueryString("nodeLayer"))
if(parid="") lalu
Response.Write("ID root tidak bisa adalah null")
Respon.Akhir()
berakhir jika
jika(nodeLayer<0) lalu
nodeLayer=0
berakhir jika
%>
<%
strconn = "pada"
strsql="pilih * dari pohon di mana par='"&parid&"'"
''Persyaratan penulisan pernyataan SQL: Tiga bidang pertama dari kumpulan catatan harus: row_id (kunci utama unik), nama (konten yang ditampilkan pada bilah menu), par_id (node induk row_id), dan keluaran serta tampilan lainnya sesuai kebutuhan.
set koneksi=server.createobject("ADODB.koneksi")
conn.open strconn
set rs=server.createobject("ADODB.Recordset")
rs.open strsql,sambungan,3,3
saya=0
redupkan baris_id
baris_id=""
sementara bukan rs.EOF
row_id=rs.Fields("row_id").Nilai
nama=rs.Fields("nama").Nilai
j=0
sementara j<nodeLayer
Respon.Tulis("<img src='blank.bmp'>")
j=j+1
pergi ke
Response.Write("<img id='objNode"&row_id&"' style='cursor:hand' src='open.bmp' onclick=javascript:createChildNode('"&row_id&"',"&nodeLayer+1&") border=0 sejajar='absmiddle'>")
Respon.Tulis("<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>") 'Konten proyek
Response.Write("<span id='oSpan"&row_id&"' ></span>") 'Area konten sub-node
saya=saya+1
rs.MoveNext
pergi ke
'''''''''''''''''''''''''''''''''''Kode Server AKHIR '''''' '''''' ''''''''''''''''''
%>
---------xtree.js-------------
fungsi getChildTree(parId,nodeLayer)
parId:=id node induk,nodeLayer:=tingkat dimana node anak berada
{
var xmlhttp = ActiveXObject baru ("Microsoft.XMLHTTP");
xmlhttp.Open("dapatkan", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
xmlhttp.Send("Penulis:taojianbo;Versi:2.0");
kembalikan xmlhttp.responseText;
}
fungsi tampilkan Sembunyikan (objid)
Menampilkan dan menyembunyikan area untuk mencapai tujuan tampilan menu
objid:=parid bagian dari ID objek area
{
vartemp;
eval("temp=oSpan"+objid+".style.display");
jika(temp=="blok")
{
eval("oSpan"+objid+".style.display='tidak ada'");
eval("objNode"+objid+".src='open.bmp'");
}
kalau tidak
{
eval("oSpan"+objid+".style.display='blok'");
eval("objNode"+objid+".src='close.bmp'");
}
}//fungsi akhir
fungsi createChildNode(childNodeId,nodeLayer)
Jika konten node anak kosong, inisialisasi dan perbarui datanya
childNodeId:=parid bagian dari Id objek simpul anak
{
vartemp;
eval("temp=oSpan"+childNodeId+".innerHTML");
jika(suhu=="")
{
eval("oSpan"+childNodeId+".innerHTML='<div align=right>LOADING...</div><br>'");
temp=String baru(getChildTree(childNodeId,nodeLayer));
if(temp.panjang!=0)
{
eval("oSpan"+childNodeId+".innerHTML=temp");
eval("objNode"+childNodeId+".src='close.bmp'");//Ubah menjadi tanda minus
}
kalau tidak
{//Jika konten sementara kosong, berarti subpohon tidak ditemukan, maka node tersebut adalah node daun, ubah atribut yang relevan
eval("objNode"+childNodeId+".src='leaf.bmp'");//Ubah ikon
eval("objNode"+childNodeId+".onclick=''"); Batalkan acara klik
eval("oSpan"+childNodeId+".innerHTML=temp");//Kontennya kosong
}
}
kalau tidak
{ showHide(childNodeId);
}
}