motivasi:
Fungsi penyortiran membuat data di halaman kita tampak lebih manusiawi, yang merupakan efek fungsional yang sangat umum kita lihat di situs web. Dulu, penyortiran otomatis dilakukan dengan banyak kode skrip, yang menyulitkan peminat awam. Namun, lebih mudah untuk menanganinya menggunakan XML. Jadikan halamanmu lebih cantik, haha, kamu juga bersemangat!
Bahan:
Penyortiran dinamis volume XML memiliki dua file: paixu.xml dan paixu.xsl
.
Tanpa menyegarkan halaman, data dapat diurutkan ulang dan ditampilkan sesuai dengan kebutuhan pengguna, yang secara efektif meningkatkan fungsi interaksi data dan membuat halaman Anda lebih berwarna.
Memengaruhi:
Telusuri di sini
Kode:
paixu.xml
<?xml versi="1.0" pengkodean="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<Ide Biru>
<tim>
<blue_ID>1</blue_ID>
<blue_name>Berlayar</blue_name>
<blue_text>Penyortiran sederhana</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>Topik XML</blue_class>
</tim>
<tim>
<blue_ID>2</blue_ID>
<blue_name>burung terbang</blue_name>
<blue_text>Menikahimu akan menyakitimu</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Esensi Irigasi</blue_class>
</tim>
<tim>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Penerapan ekspresi reguler di forum UBB</blue_text>
<blue_time>23-11-2001 21:02:16</blue_time>
<blue_class>Esensi Pemrograman Web</blue_class>
</tim>
<tim>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Panduan lengkap pesta kemudi klasik akhir tahun v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Area irigasi forum</blue_class>
</tim>
<tim>
<blue_ID>5</blue_ID>
<nama_biru>mmkk</nama_biru>
<blue_text>Ringkasan pesan kesalahan Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</tim>
</Ide Biru>
paixu.xsl
<?xml versi="1.0" pengkodean="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:templat pertandingan="/">
<html>
<kepala>
<title> Tip Praktis untuk Volume XML (1): Penyortiran Dinamis</title>
<gaya>
badan,Ide Biru,tim,ID_biru,nama_biru,teks_biru,waktu_biru,kelas_biru{ font: 12px "宋体", "Arial", "Times New Roman"; }
tabel { ukuran font: 12px; batas: 0px ganda; warna batas: #99CC99 #99CC99 #CCCCCC #CCCCCC;
span { ukuran font: 12 piksel; warna: merah }
</gaya>
<skrip>
taksi fungsi (x)
{
stylesheet=dokumen.XSLDocument;
sumber=dokumen.XMLDokumen;
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
sortField.nilai=x;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
</skrip>
</kepala>
<tubuh>
<p align="center"><span>Tips Praktis Volume XML (1): Penyortiran Dinamis</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-template pilih="BlueIdea" />
</div>
</tubuh>
</html>
</xsl:templat>
<xsl:templat pertandingan="Ide Biru">
<tabel lebar = "500" border = "1" align = "center" cellpadding = "1" Cellspacing = "1" bordercolordark = "#ffffff" bordercolorlight = "#ADAAAD">
<tr bgcolor="#FFCC99" align="tengah">
<td style="cursor:s-resize" onClick="taxis('blue_ID')">Nomor</td>
<td style="cursor:s-resize" onClick="taxis('blue_name')">Nama</td>
<td style="cursor:s-resize" onClick="taxis('blue_text')">Tema</td>
<td style="cursor:s-resize" onClick="taxis('blue_time')">Waktu publikasi</td>
<td style="cursor:s-resize" onClick="taxis('blue_class')">Klasifikasi</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</tabel>
</xsl:templat>
<xsl:templat pertandingan="tim">
<tr menyelaraskan="tengah">
<xsl: apply-template pilih = "blue_ID" />
<xsl: apply-template pilih = "nama_biru" />
<xsl:apply-template pilih="blue_text" />
<xsl: apply-template pilih = "blue_time" />
<xsl:template penerapan pilih="kelas_biru" />
</tr>
</xsl:templat>
<xsl:templat pertandingan="blue_ID">
<td bgcolor="#eeeeee">
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="nama_biru">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="blue_text">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="blue_time">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="kelas_biru">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
</xsl:lembar gaya>
menjelaskan:
1) paixu.xml adalah file data, saya yakin semua orang tidak akan mengalami masalah.
2) paixu.xsl adalah file berformat, ada beberapa hal yang perlu diperhatikan.
(1) Dalam skrip:
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
Fungsinya adalah: mencari node pertama dengan atribut order-by, sehingga node yang bersesuaian adalah
<xsl:apply-templates select="team" order-by="blue_ID"/>
Oleh karena itu, nilai order-by selama onLoad pertama adalah blue_ID.
Dan kami mencapai tujuan penyortiran dengan mendefinisikan ulang nilai pesanan berdasarkan.
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
Fungsinya adalah: mengubah Layer1 setelah mengkonversi data XML, jadi setelah membagikan parameter 'nama_biru',
<td style="cursor:s-resize" onClick="taxis('blue_name)">Nama</td>
Kami mengubah nilai order-by menjadi 'blue_name', yaitu menggunakan 'blue_name' sebagai metode pengurutan.
Kemudian tampilkan konten baru yang diurutkan dengan menampilkan kembali nilai innerHTML Layer1.
(2) Dalam teks:
dipesan berdasarkan
Anda tidak boleh melewatkan ini, jika tidak, Anda tidak akan dapat menemukannya. Lihatlah efeknya! !
<?xml versi="1.0" pengkodean="gb2312" ?>
Satu hal lagi:
Encoding="gb2312" jarang ditambahkan ke kode yang ditampilkan di sebagian besar buku teks XML.
Oleh karena itu, ketika kita menggunakan bahasa Mandarin dalam XML, kesalahan akan dilaporkan karena deklarasi ini tidak ditulis.
nota bene:
Setelah semua orang memahami gagasan penyortiran dinamis, Anda akan menemukan bahwa metode penerapan kami sebenarnya sangat sederhana.
Cukup ubah nilai pesanan berdasarkan lalu tampilkan lagi.
Dalam fungsi query dinamis dan paging dinamis, kami masih mengikuti ide ini.