Maison > Article > développement back-end > Conseils pratiques sur les volumes XML (1) : Tri dynamique
Conseils pratiques sur les volumes XML (1) : Tri dynamique
- 黄舟original
- 2017-02-10 16:09:321840parcourir
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ériaux :
Tri dynamique des volumes XML
Il existe 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 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 avoir converti les données XML, donc après avoir transmis le paramètre 'blue_name',
<td style="cursor:s-resize" onClick="taxis('blue_name)">姓名</td>
Nous va commander La valeur de -by est modifiée en 'blue_name', c'est-à-dire que 'blue_name' est utilisé comme 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 retrouver Jetez un oeil à l'effet ! !
<?xml version="1.0" encoding="gb2312" ?>
Dans le code affiché dans la plupart des manuels XML, encoding="gb2312" est rarement ajouté
Par conséquent, lorsque nous utilisons le chinois en XML, une erreur sera signalée. est non Écrivez cette déclaration.
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.
Nous suivons toujours cette idée dans les fonctions de requête dynamique et de pagination dynamique.
Ce qui précède concerne les conseils pratiques pour les volumes XML (1) : tri dynamique du contenu. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !