แรงจูงใจ:
ฟังก์ชันการจัดเรียงทำให้ข้อมูลบนเพจของเราดูมีมนุษยธรรมมากขึ้น ซึ่งเป็นลักษณะการทำงานทั่วไปที่เราพบเห็นบนเว็บไซต์ ในอดีต การเรียงลำดับอัตโนมัติทำได้โดยใช้โค้ดสคริปต์จำนวนมาก ซึ่งเป็นเรื่องยากสำหรับผู้ที่ชื่นชอบทั่วไป อย่างไรก็ตาม การจัดการกับ XML นั้นง่ายกว่ามาก ทำให้เพจของคุณสวยขึ้นอีก 555 ตื่นเต้นเหมือนกันนะ!
วัสดุ:
การเรียงลำดับไดนามิกของวอลุ่ม XML มีสองไฟล์: paixu.xml และ paixu.xsl
ฟังก์ชันคือ:
โดยไม่ต้องรีเฟรชเพจ ข้อมูลสามารถจัดเรียงและแสดงใหม่ได้ตามความต้องการของผู้ใช้ ปรับปรุงฟังก์ชันการโต้ตอบข้อมูลได้อย่างมีประสิทธิภาพ และทำให้เพจของคุณมีสีสันมากขึ้น
ผล:
เรียกดูที่นี่
รหัส:
paixu.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<บลูไอเดีย>
<ทีม>
<blue_ID>1</blue_ID>
<blue_name>เรือใบ</blue_name>
<blue_text>การจัดเรียงแบบง่าย</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>หัวข้อ XML</blue_class>
</ทีม>
<ทีม>
<blue_ID>2</blue_ID>
<blue_name>นกบิน</blue_name>
<blue_text>การแต่งงานจะทำให้คุณเจ็บปวด</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>สาระสำคัญของการชลประทาน</blue_class>
</ทีม>
<ทีม>
<blue_ID>3</blue_ID>
<blue_name>เกาจื่อ</blue_name>
<blue_text>การประยุกต์ใช้นิพจน์ทั่วไปในฟอรัม UBB</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>แก่นแท้ของการเขียนโปรแกรมเว็บ</blue_class>
</ทีม>
<ทีม>
<blue_ID>4</blue_ID>
<blue_name>ไต้หลาง</blue_name>
<blue_text>คู่มือพวงมาลัยคลาสสิกส่งท้ายปี v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>พื้นที่ชลประทานฟอรัม</blue_class>
</ทีม>
<ทีม>
<blue_ID>5</blue_ID>
<blue_name>มมมม</blue_name>
<blue_text>สรุปข้อความแสดงข้อผิดพลาด Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>จาวาสคริปต์</blue_class>
</ทีม>
</บลูไอเดีย>
paixu.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:แม่แบบที่ตรงกัน="/">
<html>
<หัว>
<title> เคล็ดลับการปฏิบัติสำหรับวอลุ่ม XML (1): การเรียงลำดับแบบไดนามิก</title>
<สไตล์>
body,BlueIdea,ทีม,blue_ID,blue_name,blue_text,blue_time,blue_class{ แบบอักษร: 12px "宋体", "Arial", "Times New Roman";
ตาราง { ขนาดตัวอักษร: 12px; เส้นขอบ: 0px; เส้นขอบสี: #99CC99 #99CC99 #CCCCC #CCCCCC;
ขยาย { ขนาดตัวอักษร: 12px;
</สไตล์>
<สคริปต์>
ฟังก์ชั่นแท็กซี่(x)
-
stylesheet=document.XSLDocument;
แหล่งที่มา=document.XMLDocument;
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
sortField.value=x;
Layer1.innerHTML=source.documentElement.transformNode(สไตล์ชีท);
-
</สคริปต์>
</หัว>
<ร่างกาย>
<p align="center"><span>เคล็ดลับการปฏิบัติเกี่ยวกับไดรฟ์ข้อมูล XML (1): การเรียงลำดับแบบไดนามิก</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
</ร่างกาย>
</html>
</xsl:แม่แบบ>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td style="cursor:s-resize" onClick="taxis('blue_ID')">หมายเลข</td>
<td style="cursor:s-resize" onClick="taxis('blue_name')">ชื่อ</td>
<td style="cursor:s-resize" onClick="taxis('blue_text')">ธีม</td>
<td style="cursor:s-resize" onClick="taxis('blue_time')">เวลาเผยแพร่</td>
<td style="cursor:s-resize" onClick="taxis('blue_class')">การจัดประเภท</td>
</tr>
<xsl:apply-templates select="ทีม" สั่งซื้อโดย = "blue_ID"/>
</ตาราง>
</xsl:แม่แบบ>
<xsl:template match="ทีม">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:แม่แบบ>
<xsl:แม่แบบที่ตรงกัน="blue_ID">
<td bgcolor="#eeeeee">
<xsl:มูลค่าของ />
</td>
</xsl:แม่แบบ>
<xsl:แม่แบบที่ตรงกัน="blue_name">
<td>
<xsl:มูลค่าของ />
</td>
</xsl:แม่แบบ>
<xsl:แม่แบบที่ตรงกัน="blue_text">
<td>
<xsl:มูลค่าของ />
</td>
</xsl:แม่แบบ>
<xsl:template match="blue_time">
<td>
<xsl:มูลค่าของ />
</td>
</xsl:แม่แบบ>
<xsl:แม่แบบที่ตรงกัน="blue_class">
<td>
<xsl:มูลค่าของ />
</td>
</xsl:แม่แบบ>
</xsl:สไตล์ชีท>
อธิบาย:
1) paixu.xml เป็นไฟล์ข้อมูล ฉันเชื่อว่าทุกคนจะไม่มีปัญหา
2) paixu.xsl เป็นไฟล์ฟอร์แมต มีหลายสิ่งที่ต้องใส่ใจ
(1) ในสคริปต์:
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
ฟังก์ชันคือ: ค้นหาโหนดแรกที่มีแอตทริบิวต์ order-by ดังนั้นโหนดที่สอดคล้องกันคือ
<xsl:apply-templates select="ทีม" สั่งซื้อโดย = "blue_ID"/>
ดังนั้นค่าของการเรียงลำดับโดยระหว่าง onLoad แรกคือ blue_ID
และเราบรรลุวัตถุประสงค์ของการเรียงลำดับโดยกำหนดค่าใหม่ของการเรียงลำดับตาม
Layer1.innerHTML=source.documentElement.transformNode(สไตล์ชีท);
ฟังก์ชั่นคือ: เปลี่ยน Layer1 หลังจากแปลงข้อมูล XML ดังนั้นหลังจากส่งพารามิเตอร์ 'blue_name' แล้ว
<td style="cursor:s-resize" onClick="taxis('blue_name)">ชื่อ</td>
เราแก้ไขค่าของ order-by เป็น 'blue_name' นั่นคือใช้ 'blue_name' เป็นวิธีเรียงลำดับ
จากนั้นแสดงเนื้อหาที่เรียงลำดับใหม่โดยแสดงค่า innerHTML ของ Layer1 อีกครั้ง
(2) ในข้อความ:
สั่งซื้อโดย
คุณไม่ควรพลาดสิ่งนี้ ไม่เช่นนั้น คุณจะไม่สามารถค้นหามันได้ ลองดูเอฟเฟกต์สิ! -
<?xml version="1.0" encoding="gb2312" ?>
อีกสิ่งหนึ่ง:
Encoding="gb2312" ไม่ค่อยถูกเพิ่มลงในโค้ดที่แสดงในหนังสือเรียน XML ส่วนใหญ่
ดังนั้น เมื่อเราใช้ภาษาจีนใน XML ข้อผิดพลาดจะถูกรายงาน เหตุผลก็คือ การประกาศนี้ไม่ได้เขียนไว้
คำลงท้าย:
หลังจากที่ทุกคนคุ้นเคยกับแนวคิดของการเรียงลำดับแบบไดนามิกแล้ว คุณจะพบว่าวิธีการนำไปใช้ของเรานั้นง่ายมากจริงๆ
เพียงแก้ไขค่าตามลำดับแล้วแสดงอีกครั้ง
ในการทำงานของแบบสอบถามแบบไดนามิกและเพจแบบไดนามิก เรายังคงปฏิบัติตามแนวคิดนี้