Description

Classe Table avec ascenseur pour le contenu, entêtes cliquables pour trier le contenu et redimensionnement des colonnes.

Documentation

Pour utiliser l'objet MooTableau il faut inclure dans sa page la bibliothèque mooTools et le présent script :

<script type="text/javascript" src="mooTools.js"></script>
<script type="text/javascript" src="mooTableau.js"></script>

Il faut aussi intégrer à sa page le CSS contenant les styles du tableau :

<link type="text/css" rel="stylesheet" href="mooTableau.css" />

Ensuite, dans votre page web, il faut instancier sur votre table l'objet mooTableau via un script javascript, dans l'évènement domready :

var elt = $('montableau');
new MooTableau(elt, { options });

Voici la liste exhaustive des options possibles :

• width: Largeur totale du tableau,
• height: Hauteur totale du tableau,
• headerHeight: Hauteur de l'entête du tableau,
• normalColor: Couleur de fond d'une ligne non sélectionnée,
• highlightColor: Couleur de fond d'une ligne sélectionnée,
• resizable: Booléen indiquant s'il est possible de redimensionner les colonnes,
• sortable: Booléen indiquant s'il est possible de trier les données du tableau,
• fontSize: Taille de police de caractère du contenu du tableau.

Coté HTML, la table doit avoir un objet thead contenant les th servants à définir les entêtes du tableau et un tbody contenant les données à présenter. A noter que s'il on veut définir les tailles des différentes colonnes il faut le faire sur les td de la première ligne du tbody.

Voici un exemple :

<table id="montableau">
<thead><tr><th>Colonne 1</th><th>Colonne 2</th></tr></thead>
<tbody><tr><td>Donnée 1/1</td><td>Donnée 2/1</td></tr>
       <tr><td>Donnée 1/2</td><td>Donnée 2/2</td></tr>
       <tr><td>Donnée 1/3</td><td>Donnée 2/3</td></tr>
       <tr><td>Donnée 1/4</td><td>Donnée 2/4</td></tr>
</tbody>
</table>

Démonstration

<link type="text/css" rel="stylesheet" href="demos/mooTableau/mooTableau.css" />
<script type="text/javascript" src="demos/mooTableau/mooTableau.js"></script>

<script type="text/javascript">
  window.addEvent('domready', function() {
    new MooTableau($('montableau'));
  });
</script>

<table id="montableau">
<thead><tr><th>Caractère</th><th>Numérique</th><th>Date</th></tr></thead>
<tbody><tr><td>Donnée a</td><td style="width: 70px;">10</td><td style="width: 100px;">01/02/2010</td></tr>
       <tr><td>Donnée b</td><td>2</td><td>02/03/2010</td></tr>
       <tr><td>Donnée c</td><td>21</td><td>01/04/2010</td></tr>
       <tr><td>Donnée d</td><td>64</td><td>11/11/2009</td></tr>
       <tr><td>Donnée e</td><td>33</td><td>31/12/2007</td></tr>
       <tr><td>Donnée f</td><td>26</td><td>06/01/2011</td></tr>
       <tr><td>Donnée g</td><td>14</td><td>13/03/2013</td></tr>
       <tr><td>Donnée h</td><td>8</td><td>28/02/2010</td></tr>
       <tr><td>Donnée i</td><td>120</td><td>12/12/2012</td></tr>
       <tr><td>Donnée j</td><td>101</td><td>10/12/2012</td></tr>
       <tr><td>Donnée k</td><td>1</td><td>30/11/2010</td></tr>
       <tr><td>Donnée l</td><td>12</td><td>12/01/2010</td></tr>
</tbody>
</table>

Notes de version

Prérequis : mooTools v1.2.x - Site officiel

• v0.3 - Ajout d'options permettant de personnaliser le tableau. Parse des données au type approprié pour que les tris sur des numériques ou des dates s'opèrent correctement.
• v0.2 - Ajout possibilité de trier les colonnes en cliquant sur les entêtes.
• v0.1 - Définition d'une classe mooTools permettant d'afficher le tableau et la scrollbar du body.

Bugs connus

• Problème avec le redimensionnement des colonnes qui est hasardeux (le code a d'ailleurs été commenté en attendant une solution).
• Décalage d'un pixel entre l'entête et le contenu pour la première colonne.

Licence

Cette source est diffusée en open source sous la licence MIT, ce qui signifie que vous avez la possibilité de l'utiliser et la modifier en toute circonstance.

Téléchargement

mooTableau v0.3.rar

Commentaires

Aucun commentaire...

Ajouter un commentaire

Votre nom
Votre message