Motivation:
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. Allerdings ist die Handhabung mit XML wesentlich einfacher. Machen Sie Ihre Seite noch schöner, haha, Sie sind auch begeistert!
Materialien:
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>正则表达式在ＵＢＢ论坛中的应用</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 lautet: 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 „Ordnen nach“ neu definieren.
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
Die Funktion besteht darin, Layer1 nach der Konvertierung der XML-Daten zu ändern, also nach der Übergabe des Parameters „blue_name“,
<td style="cursor:s-resize" onClick="taxis('blue_name)">姓名</td>
Wir wird bestellen Der Wert von -by wird in „blue_name“ geändert, dh „blue_name“ wird als Sortiermethode verwendet.
Dann wird der neue sortierte Inhalt angezeigt, indem der innerHTML-Wert von Layer1 erneut angezeigt wird.
(2) Im Text:
Ordnen nach
Dies ist unbedingt erforderlich, sonst können Sie es nicht finden. Schauen Sie sich die Wirkung an! !
<?xml version="1.0" encoding="gb2312" ?>
Im in den meisten XML-Lehrbüchern gezeigten Code wird die Codierung = „gb2312“ selten hinzugefügt.
Daher wird bei der Verwendung von Chinesisch in XML ein Fehler gemeldet ist nein Schreiben Sie diese Aussage.
Nachtrag:
Nachdem jeder mit der Idee der dynamischen Sortierung vertraut ist, werden Sie feststellen, dass unsere Implementierungsmethode eigentlich sehr einfach ist.
Ändern Sie einfach den Bestellwert und zeigen Sie ihn dann erneut an.
Wir verfolgen diese Idee weiterhin in den dynamischen Abfrage- und dynamischen Paging-Funktionen.
Das Obige sind die praktischen Tipps für XML-Volumen (1): Dynamische Sortierung von Inhalten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!
