motivation:
La fonction de tri rend les données de notre page plus humaines, ce qui est un effet fonctionnel très courant que nous avons constaté sur les sites Web. Dans le passé, le tri automatique était effectué avec beaucoup de code de script, ce qui était difficile pour les passionnés ordinaires. Cependant, il est beaucoup plus simple de le gérer en utilisant XML. Rendez votre page plus belle, haha, êtes-vous également excité !
Matériel:
Le tri dynamique des volumes XML comporte deux fichiers : paixu.xml et paixu.xsl.
Les fonctions sont :
Sans actualiser la page, les données peuvent être triées et affichées selon les propres besoins de l'utilisateur, améliorant ainsi efficacement la fonction d'interaction des données et rendant votre page plus colorée.
Effet:
Parcourez ici
Code:
paixu.xml
<?xml version="1.0" encodage="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<Idée Bleue>
<équipe>
<blue_ID>1</blue_ID>
<blue_name>Vol à voile</blue_name>
<blue_text>Un tri simple</blue_text>
<blue_time>11/01/2002 17:35:33</blue_time>
<blue_class>Sujet XML</blue_class>
</équipe>
<équipe>
<blue_ID>2</blue_ID>
<blue_name>oiseau volant</blue_name>
<blue_text>T'épouser te fera du mal</blue_text>
<blue_time>06/09/2001 12:45:51</blue_time>
<blue_class>Essence d'irrigation</blue_class>
</équipe>
<équipe>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Application des expressions régulières dans le forum UBB</blue_text>
<blue_time>23/11/2001 21:02:16</blue_time>
<blue_class>Essence de programmation Web</blue_class>
</équipe>
<équipe>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Manuel complet du pilotage classique de fin d'année v0.1</blue_text>
<blue_time>08/12/2000 10:22:48</blue_time>
<blue_class>Zone d'irrigation du Forum</blue_class>
</équipe>
<équipe>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Résumé du message d'erreur Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</équipe>
</IdéeBleue>
paixu.xsl
<?xml version="1.0" encodage="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<tête>
<title> Conseils pratiques pour le volume XML (1) : tri dynamique</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ police : 12px "宋体", "Arial", "Times New Roman" };
table { taille de police : 12 px ; bordure : 0px double ; couleur de la bordure : #99CC99 #99CCCC #CCCCCC ; espacement des cellules : 3 ;
span { taille de police : 12 px ; couleur : rouge ;
</style>
<script>
fonction taxis(x)
{
feuille de style=document.XSLDocument;
source=document.XMLDocument;
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
sortField.value=x;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
</script>
</tête>
<corps>
<p align="center"><span>Conseils pratiques sur les volumes XML (1) : Tri dynamique</span></p>
<div id="Couche1" nom="Couche1">
<xsl:apply-templates select="BlueIdea" />
</div>
</corps>
</html>
</xsl:modèle>
<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')">Numéro</td>
<td style="cursor:s-resize" onClick="taxis('blue_name')">Nom</td>
<td style="cursor:s-resize" onClick="taxis('blue_text')">Thème</td>
<td style="cursor:s-resize" onClick="taxis('blue_time')">Heure de publication</td>
<td style="cursor:s-resize" onClick="taxis('blue_class')">Classification</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:modèle>
<xsl:template match="équipe">
<tr align="centre">
<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:modèle>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_name">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_text">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_time">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_class">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
</xsl:feuille de style>
expliquer:
1) paixu.xml est un fichier de données, je pense que tout le monde n'aura aucun problème.
2) paixu.xsl est un fichier au format, il y a plusieurs choses auxquelles il faut faire attention.
(1) Dans le script :
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
La fonction est la suivante : trouver le premier nœud avec l'attribut order-by, donc son nœud correspondant est
<xsl:apply-templates select="team" order-by="blue_ID"/>
Par conséquent, la valeur de order-by lors du premier onLoad est blue_ID.
Et nous atteignons l’objectif du tri en redéfinissant la valeur de order-by.
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
La fonction est la suivante : changer Layer1 après la conversion des données XML, donc après avoir transmis le paramètre 'blue_name',
<td style="cursor:s-resize" onClick="taxis('blue_name)">Nom</td>
Nous modifions la valeur de order-by en « blue_name », c'est-à-dire que nous utilisons « blue_name » comme méthode de tri.
Affichez ensuite le nouveau contenu trié en réaffichant la valeur innerHTML de Layer1.
(2) Dans le texte :
order-by
Vous ne pouvez pas le manquer, sinon vous ne pourrez pas le trouver. Jetez un œil à l'effet ! !
<?xml version="1.0" encodage="gb2312" ?>
Encore une chose :
Encoding="gb2312" est rarement ajouté au code affiché dans la plupart des manuels XML.
Par conséquent, lorsque nous utilisons le chinois en XML, une erreur sera signalée. La raison est que cette déclaration n'est pas écrite.
post-scriptum :
Une fois que tout le monde sera familiarisé avec l'idée du tri dynamique, vous constaterez que notre méthode de mise en œuvre est en fait très simple.
Modifiez simplement la valeur de tri, puis affichez-la à nouveau.
Dans les fonctions de requête dynamique et de pagination dynamique, nous suivons toujours cette idée.