Maison > développement back-end > Tutoriel XML/RSS > XML Practical Cheats Volume 1 : Tri dynamique

XML Practical Cheats Volume 1 : Tri dynamique

巴扎黑
Libérer: 2017-03-19 15:42:17
original
1580 Les gens l'ont consulté

[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>正则表达式在UBB论坛中的应用</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>
Copier après la connexion




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(&#39;blue_ID&#39;)">编号</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_name&#39;)">姓名</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_text&#39;)">主题</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_time&#39;)">发表时间</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_class&#39;)">归类</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>
Copier après la connexion




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

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 ,
Name
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 ! !


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal