Software is like sex... It's better when it's free.

Blog - Tables, CSS et XSL

Tables, CSS et XSL
Si vous voulez afficher une liste d'entités en XSL en appliquant du style css sur les lignes du tableau, vous pouvez jouer sur les modulos à l'aide de la fonction position() en XSL.

Supposons le flux XML suivant listant un ensemble d'utilisateurs :

<?xml version="1.0" encoding="UTF-8"?>
<users>
  <user>
    <id>1</id>
    <login>lo</login>
    <email>laurent@sillysmart.org</email>
  </user>
  <user>
    <id>2</id>
    <login>flo</login>
    <email>florian@sillysmart.org</email>
  </user>
  <user>
    <id>3</id>
    <login>charly</login>
    <email>charly@sillysmart.org</email>
  </user>
</users>

Le css suivant :

table.bo_table_visible {	
  border:1px solid #000;
  border-spacing: 0px;
  margin-top:10px;
  margin-bottom:10px;
}
table.bo_table_visible tr.summary th {
  background:#2E2D2D;
  color:#E45A49;
}
table.bo_table_visible tr td, table.bo_table_visible tr th {
  padding:0 10px;
}
table.bo_table_visible tr.even td {
  background-color:#FFF;
  color:#000;	
}
table.bo_table_visible tr.even:hover td {
  background-color:#FF8ABC;
  color:#FFF;
}
table.bo_table_visible tr.odd td {
  background-color:#DFDFDF;
  color:#000;
}
table.bo_table_visible tr.odd:hover td {
  background-color:#64B8FE;
  color:#FFF;
}

Il vous suffit d'appliquer le script XSL suivant pour appliquer les styles sur votre liste d'utilisateurs :

<!--
- Apply css with XSL
-->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl" version="1.0">
<xsl:output method="xml" encoding="UTF-8" indent="yes" />
  <xsl:template match="root">
    <html>
      <head></head>
      <body>
        <table class="bo_table_visible">
          <tr>
            <th>Id</th>
            <th>Login</th>
            <th>Email</th>
          </tr>
          <xsl:for-each select="//users/user">
            <xsl:variable name="cssClass">
              <xsl:choose>
                <xsl:when test="(position() mod 2) = 0">
                  even
                </xsl:when>
                <xsl:otherwise>
                  odd
                </xsl:otherwise>
              </xsl:choose>
            </xsl:variable>
            <tr class="{$cssClass}">
              <td><xsl:value-of select="id" /></td>
              <td><xsl:value-of select="login" /></td>
              <td><xsl:value-of select="email" /></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Ce qui produira :

Id Login Email
1 lo laurent@sillysmart.org
2 flo florian@sillysmart.org
3 charly charly@sillysmart.org
Tags:  cssxmlxsl.
Posté le Mardi 08 septembre 2009 17:20:44