Maison > Article > développement back-end > XML Practical Cheats Volume 1 : Tri dynamique
XML Practical Cheats Volume 1 : Tri dynamique
- 巴扎黑original
- 2017-03-19 15:42:171551parcourir
[Introduction] 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. Laissez la fonction de tri
rendre 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 :
Tri dynamique des volumes XML
Il y a 2 fichiers : paixu.xml et paixu.xsl
Fonction :
Mettre à jour sans rafraîchir la page Réorganiser et affichez les données en fonction des besoins de l'utilisateur, améliorant efficacement la fonction d'interaction des données et rendant votre page plus colorée.
Effet :
Parcourir ici
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>
Explication :
1) paixu.xml est un fichier de données, je crois 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 : trouver le premier avec l'attribut order- par nœud, donc son nœud correspondant est
9b92dc4fa42eb944186860fecb66172b
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 de changer Layer1 après la conversion des données XML, donc après que le paramètre 'blue_name' soit transmis ,
825cd6951af0987ab74b04cc8251a1d0Nameb90dd5946f0946207856a8a37f441edf
Nous modifions la valeur de order-by en 'blue_name', c'est-à-dire , 'blue_name' est la méthode de tri.
Ensuite, le nouveau contenu trié est affiché en réaffichant la valeur innerHTML de Layer1.
(2) Dans le texte :
order-by
C'est indispensable, sinon vous ne pourrez pas le trouver Jetez un oeil à l'effet ! !
e2d95b683ed046563c51ca78d4163c09
Autre point :
Le codage est rarement ajouté au code affiché dans la plupart des manuels XML ="gb2312" ,
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.
Postscript :
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.
Nous suivons toujours cette idée dans les fonctions de requête dynamique et de pagination dynamique.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!