[Einleitung] Die Sortierfunktion lässt die Daten auf unserer Seite menschlicher erscheinen, was ein sehr häufiger funktionaler Effekt ist, den wir auf Websites gesehen haben. In der Vergangenheit wurde die automatische Sortierung mit viel Skriptcode durchgeführt, was für normale Enthusiasten schwierig war. Es ist jedoch viel einfacher, mit XML damit umzugehen. Lassen Sie die Sortierfunktion
die Daten auf unserer Seite humaner machen, was ein sehr häufiger Funktionseffekt ist, den wir auf Websites gesehen haben. In der Vergangenheit wurde die automatische Sortierung mit viel Skriptcode durchgeführt, was für normale Enthusiasten schwierig war. Es ist jedoch viel einfacher, mit XML damit umzugehen. Machen Sie Ihre Seite noch schöner, haha, Sie sind auch begeistert!
Material:
Dynamische Sortierung von XML-Volumes
Es gibt 2 Dateien: paixu.xml und paixu.xsl
Funktion:
Aktualisieren, ohne die Seite zu aktualisieren. Neu anordnen und zeigen Sie die Daten entsprechend den eigenen Bedürfnissen des Benutzers an, wodurch die Dateninteraktionsfunktion effektiv verbessert und Ihre Seite bunter wird.
Effekt:
Hier durchsuchen
Code:
paixu.xml
<?xml version="1.0" encoding="gb2312" ?> <?xml-stylesheet type="text/xsl" href="paixu.xsl" ?> <BlueIdea> <team> <blue_ID>1</blue_ID> <blue_name>Sailflying</blue_name> <blue_text>一个简单的排序</blue_text> <blue_time>2002-1-11 17:35:33</blue_time> <blue_class>XML专题</blue_class> </team> <team> <blue_ID>2</blue_ID> <blue_name>flyingbird</blue_name> <blue_text>嫁给你,是要你疼的</blue_text> <blue_time>2001-09-06 12:45:51</blue_time> <blue_class>灌水精华</blue_class> </team> <team> <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>Web 编程精华</blue_class> </team> <team> <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> </team> <team> <blue_ID>5</blue_ID> <blue_name>mmkk</blue_name> <blue_text>asp错误信息总汇</blue_text> <blue_time>2001-10-13 16:39:05</blue_time> <blue_class>javascript脚本</blue_class> </team> </BlueIdea>
paixu.xsl
<?xml version="1.0" encoding="gb2312" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <head> <title> XML卷之实战锦囊(1):动态排序</title> <style> body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; } table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink} span { font-size: 12px; color: red; } </style> <script> function taxis(x) { stylesheet=document.XSLDocument; source=document.XMLDocument; sortField=document.XSLDocument.selectSingleNode("//@order-by"); sortField.value=x; Layer1.innerHTML=source.documentElement.transformNode(stylesheet); } </script> </head> <body> <p align="center"><span>XML卷之实战锦囊(1):动态排序</span></p> <p id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /> </p> </body> </html> </xsl:template> <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="team" order-by="blue_ID"/> </table> </xsl:template> <xsl:template match="team"> <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:template> <xsl:template match="blue_ID"> <td bgcolor="#eeeeee"> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_name"> <td> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_text"> <td> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_time"> <td> <xsl:value-of /> </td> </xsl:template> <xsl:template match="blue_class"> <td> <xsl:value-of /> </td> </xsl:template> </xsl:stylesheet>
Erklärung:
1) paixu.xml ist eine Datendatei, ich glaube, dass jeder kein Problem haben wird.
2) paixu.xsl ist eine Formatdatei, es gibt mehrere Dinge zu beachten.
(1) Im Skript:
sortField=document.XSLDocument.selectSingleNode("//@order-by");
Die Funktion ist: Finde das erste mit dem Attribut order- nach Knoten, daher ist der entsprechende Knoten
Daher ist der Wert von order-by während des ersten onLoads blue_ID .
Und wir erreichen den Zweck des Sortierens, indem wir den Wert von „Ordnung nach“ neu definieren.
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
Die Funktion besteht darin, Layer1 nach der Konvertierung der XML-Daten zu ändern, also nachdem der Parameter „blue_name“ übergeben wurde ,
Das obige ist der detaillierte Inhalt vonXML Practical Cheats Band 1: Dynamische Sortierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!