Comment autoriser un utilisateur à définir son critère de tri avec MSXML et XSLT?
Réponse de Laurent Raffalli mise en forme par Eric van der Vlist,
Dyomedea (vdv@dyomedea.com).
jeudi 18 janvier 2001
J'ai un fichier XML qui est transformé en une page HTML via un feuille XSLT sur le poste client (IE 5.x et MSXML 3.0).
J'aimerais que l'utilisateur puisse trier en dynamique ces données.
Comment faut-il procéder ?
Un tri s'effectue en XSLT au moyen de l'instruction xsl:sort:
<xsl:sort select="NUMERO" order="descending"/>
Pour rendre le tri dynamique, on peut affecter à l'évènement "ONCLICK" de chaque entête d'un tableau une fonction Javascript que l'on appelera par exemple "tri" avec comme paramètre le nom de l'élément support du tri:
onclick="javascript:tri('NUMERO')
La fonction "tri" récupère le nom du noeud support de la commande SORT puis peut se servir de cette information pour modifier la feuille de style en accédant à son DOM avant de ré-appliquer la transformation.
Dans l'exemple qui suit, si le nom de l'élément présent dans l'ordre est déjà égal au nom passé en paramètre alors le tri a déjà était effectué sur cette colonne. Il s'agit donc d'un tri inversé par rapport au tri précédent.
En revanche si le nom est différent, alors la fonction tri porte sur un nouvel entête, d'ou changement de nom et un tri croissant.
Une fois les paramètres du tri modifiés, la fonction tri ré-applique la transformation de la feuille de style sur le fichier XML ce qui provoque l'affichage des données avec les nouveaux critères de tri.
Document tri.xml:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml:stylesheet type="text/xsl" href="tri.xsl"?>
<VEHICULES>
<VEHICULE>
<NUMERO>000066</NUMERO>
<MARQUE>Daewoo</MARQUE>
<MODELE>Lanos SE GPL</MODELE>
<IMMATRICULATION>9999 ZZ 99</IMMATRICULATION>
<DATE_IMMAT>1999-11-01</DATE_IMMAT>
</VEHICULE>
<VEHICULE>
<NUMERO>000180</NUMERO>
<MARQUE>Daewoo</MARQUE>
<MODELE>Lanos SE GPL</MODELE>
<IMMATRICULATION>7777 XX 99</IMMATRICULATION>
<DATE_IMMAT>1999-10-01</DATE_IMMAT>
</VEHICULE>
<VEHICULE>
<NUMERO>000280</NUMERO>
<MARQUE>Daewoo</MARQUE>
<MODELE>Lanos SE GPL</MODELE>
<IMMATRICULATION>8888 XX 99</IMMATRICULATION>
<DATE_IMMAT>2000-10-01</DATE_IMMAT>
</VEHICULE>
</VEHICULES>
Feuille tri.xsl:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
<head>
<title>Listing VO</title>
<script language="JScript"><![CDATA[
// Déclaration des variables
var XSLSource = new Object();
var XMLSource = new Object();
// Chargement des documents XML et XSL
XMLSource = document.XMLDocument;
XSLSource = document.XSLDocument;
function tri (rubrique) {
// Déclaration des variables
var XSLSort = new Object();
// Sélection de l'ordre xsl:sort
XSLSort =
XSLSource.documentElement.selectNodes("//xsl:sort");
// Affectation de la rubrique de tri
if (XSLSort[0].attributes(0).text == rubrique.toString()){
if ( XSLSort[0].attributes(1).text == "ascending") {
XSLSort[0].attributes(1).text = "descending";
} else {
XSLSort[0].attributes(1).text = "ascending";
}
} else {
XSLSort[0].attributes(1).text = "ascending";
}
XSLSort[0].attributes(0).text = rubrique.toString();
// affichage de l'ordre de tri
XSLem = XSLSource.documentElement.selectNodes("//p/em");
XSLem [0].text = rubrique.toString();
XSLem [1].text = XSLSort[0].attributes(1).text ;
// Réaffichage de la page
document.body.innerHTML =
XMLSource.transformNode(XSLSource);
}]]></script>
</head>
<body>
<p>Tri sur <em>NUMERO</em> par ordre <em>descending</em>.</p>
<p>Cliquez sur un titre pour changer l'ordre de tri.</p>
<table border="1" cellspacing="1">
<tr>
<th id="HeaderColumnNUMERO"
onclick="javascript:tri('NUMERO');">Numéro</th>
<th id="HeaderColumnMARQUE"
onclick="javascript:tri('MARQUE');">Marque</th>
<th id="HeaderColumnMODELE"
onclick="javascript:tri('MODELE');">Modèle</th>
<th id="HeaderColumnIMMATRICULATION"
onclick="javascript:tri('IMMATRICULATION');"
>Immatriculation</th>
<th id="HeaderColumnDATE_IMMAT"
onclick="javascript:tri('DATE_IMMAT');"
>Date d'immatriculation</th>
</tr>
<xsl:apply-templates select="VEHICULES/VEHICULE">
<xsl:sort select="NUMERO" order="descending"/>
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="VEHICULE">
<tr>
<td>
<xsl:value-of select="NUMERO"/>
</td>
<td>
<xsl:value-of select="MARQUE"/>
</td>
<td>
<xsl:value-of select="MODELE"/>
</td>
<td>
<xsl:value-of select="IMMATRICULATION"/>
</td>
<td>
<xsl:value-of select="DATE_IMMAT"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
JA: "[xml-tech] Trier des données dans un page HTML"Laurent Raffalli: "[xml-tech] tri par colonne dans un tableau généré par XSL"
Copyright 2001,
Laurent Raffalli (réponse) et Eric van der Vlist (mise en forme).
|
