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!
Material:
Die dynamische Sortierung von XML-Volumes verfügt über zwei Dateien: paixu.xml und paixu.xsl.
Die Funktionen sind:
Ohne die Seite zu aktualisieren, können die Daten entsprechend den eigenen Bedürfnissen des Benutzers neu sortiert und angezeigt werden, wodurch die Dateninteraktionsfunktion effektiv verbessert und Ihre Seite bunter wird.
Wirkung:
Stöbern Sie hier
Code:
paixu.xml
<?xml version="1.0"kodierung="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<BlueIdea>
<Team>
<blue_ID>1</blue_ID>
<blue_name>Segelfliegen</blue_name>
<blue_text>Eine einfache Sortierung</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML-Thema</blue_class>
</team>
<Team>
<blue_ID>2</blue_ID>
<blue_name>fliegender Vogel</blue_name>
<blue_text>Dich zu heiraten wird dir wehtun</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Bewässerungsessenz</blue_class>
</team>
<Team>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Anwendung regulärer Ausdrücke im UBB-Forum</blue_text>
<blue_time>23.11.2001 21:02:16</blue_time>
<blue_class>Essenz der Webprogrammierung</blue_class>
</team>
<Team>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Jahresend-Klassiker-Lenkungsparty-Kompletthandbuch v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Forum-Bewässerungsgebiet</blue_class>
</team>
<Team>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Zusammenfassung der Asp-Fehlermeldungen</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"kodierung="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<Kopf>
<title>Praktische Tipps für XML Volume (1): Dynamische Sortierung</title>
<Stil>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ Schriftart: 12px "宋体", "Arial", "Times New Roman" }
Tabelle {Schriftgröße: 12px; Randfarbe: #99CC99 #99CC99 #CCCCCC #CCCCCC; bgcolor:#eeeee;
span { Schriftgröße: 12px; Farbe: rot }
</style>
<Skript>
Funktion 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>
<Körper>
<p align="center"><span>Praktische Tipps zu XML-Volumen (1): Dynamische Sortierung</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td style="cursor:s-resize" onClick="taxis('blue_ID')">Nummer</td>
<td style="cursor:s-resize" onClick="taxis('blue_name')">Name</td>
<td style="cursor:s-resize" onClick="taxis('blue_text')">Theme</td>
<td style="cursor:s-resize" onClick="taxis('blue_time')">Veröffentlichungszeit</td>
<td style="cursor:s-resize" onClick="taxis('blue_class')">Klassifizierung</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ären:
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: Finden Sie den ersten Knoten mit dem Attribut order-by, also ist der entsprechende Knoten
<xsl:apply-templates select="team" order-by="blue_ID"/>
Daher ist der Wert von order-by beim ersten onLoad 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 lautet: Layer1 nach der Konvertierung der XML-Daten ändern, also nach der Übergabe des Parameters „blue_name“
<td style="cursor:s-resize" onClick="taxis('blue_name)">Name</td>
Wir ändern den Wert von order-by in „blue_name“, verwenden also „blue_name“ als Sortiermethode.
Zeigen Sie dann den neuen sortierten Inhalt an, indem Sie den innerHTML-Wert von Layer1 erneut anzeigen.
(2) Im Text:
Bestellen nach
Das dürfen Sie nicht verpassen, sonst finden Sie es nicht. Schauen Sie sich den Effekt an! !
<?xml version="1.0"kodierung="gb2312" ?>
Noch etwas:
Encoding="gb2312" wird dem in den meisten XML-Lehrbüchern angezeigten Code selten hinzugefügt.
Wenn wir Chinesisch in XML verwenden, wird daher ein Fehler gemeldet. Der Grund dafür ist, dass diese Erklärung nicht geschrieben wurde.
Nachwort:
Nachdem jeder mit der Idee der dynamischen Sortierung vertraut ist, werden Sie feststellen, dass unsere Implementierungsmethode eigentlich sehr einfach ist.
Ändern Sie einfach den Order-by-Wert und zeigen Sie ihn dann erneut an.
In den Funktionen dynamische Abfrage und dynamisches Paging folgen wir dieser Idee weiterhin.