Fonctionnalités de la librairie jsFF

Test de la librairie jsFF - Composant TableKit

Le composant TableKit permet d'ajouter des fonctionnalités à un tableau HTML :
Ordonner et redimensionner des colonnes, Editer 'in situ' les valeurs des cellules.

Le composant se base sur une structure de tableau HTML comportant, suivant les fonctionnalités désirées les classes suivantes :

  • 'sortable' : permet de trier le tableau d'après les valeurs d'une colonne déterminée.
  • 'resizable' : permet de redimensionner les colonnes du tableau.
  • 'editable' : permet d'éditer le contenu des cellules du tableau.

La création du composant s'effectue simplement en invoquant la méthode :
jsFF.addTableKit(id, options, theme) pour laquelle les paramètres sont :

  • id : l'identifiant du tableau HTML à traiter.
  • options (les options de fonctionnement du composant ) :
    • autoLoad : lancement automatique du composant (true par défaut).
    • sortable: Active le tri par colonne (true par défaut).
    • resizable: Active le redimensionnement des colonnes (true par défaut).
    • editable: Active l'édition des celltrue par défaut).
    • stripe : Active l'entrelacement des lignes (true par défaut).
    • rowEvenClass: La classe css utilisée pour l'entrelacement des lignes (roweven par défaut).
    • rowOddClass: La seconde classe css utilisée pour l'entrelacement des lignes (rowodd par défaut).
    • sortableSelector: le sélecteur utilisé pour déterminer les tables 'à trier' (['table.sortable'] par défaut).
    • columnClass: La classe css utilisée pour chacun des en-têtes de colonnes 'sortable' ('sortcol' par défaut).
    • descendingClass : La classe css utilisée pour les en-têtes de colonnes triées dans l'ordre descendant ('sortdesc' par défaut).
    • ascendingClass: La classe css utilisée pour les en-têtes de colonnes triées dans l'ordre ascendant ('sortasc' par défaut).
    • noSortClass: La classe css permettant de rendre une colonne 'non triable' ('nosort' par défaut).
    • defaultSortDirection : 1: La direction initiale de tri pour chacune des colonnes triées : 1 indique 'ascendant', -1 indique 'descendant' (1 par défaut).
    • sortFirstAscendingClass: La classe css appliquée à un en-tête de colonne pour effectuer un tri initial ascendant sur cette colonne ('sortfirstasc' par défaut).
    • sortFirstDecendingClass: La classe css appliquée à un en-tête de colonne pour effectuer un tri initial descendant sur cette colonne ('sortfirstdesc' par défaut).
    • resizableSelector: Le sélecteur utilisé pour déterminer les tables redimensionnables (['table.resizable'] par défaut).
    • minWidth: Largeur minimale en pixels pour une colonne redimensionnable (10 px par défaut).
    • showHandle: Montre la poignée de redimensionnement, si cette option vaut false, la poignée n'est ps affichée et la taille de la colonne suit le mouvement de la souris (true par défaut).
    • resizeOnHandleClass: La classe css appliquée à la cellule d'en-tête lorsque le curseur de souris est sur la zone de redimensionnement ('resize-handle-active' par défaut).
    • editableSelector /code>: Le sélecteur utilisé pour déterminer les tables éditables (['table.editable'] par défaut).
    • formClassName: La classe css donnée au formulaire d'édition d'une cellule durant son édition ('editable-cell-form' par défaut)
    • noEditClass: La classe css utilisée pour indiquer qu'une colonne entière ou une cellule individuelle n'est pas éditable ('noedit' par défaut).
    • editAjaxURI : '/': L'URL ciblée pour la mise à jour d'une cellule éditable. ('/' par défaut).
    • editAjaxOptions: Les options à fournir au composant Prototype Ajax.Updater utilisé pour l'édiiton des cellules (vide par défaut).
    • évènements: Pour l'instant le seul évènement géré est onSortEnd généré en fin de tri d'une colonne. voir le code source de la page pour la mise en oeuvre.
  • theme : le thème du tableau (peut être omis pour le moment).

Exemple d'utilisation :

Nom Date de naissance Heure Métier Statut Rémunération Position
DURANT Jean-Paul 05-04-1983 06:30 Coiffeur actif 1100 € 5
LEFAUCHE Jacques 12-09-1963 09:15 Développeur Recherche d'emploi 800 € 3
RICHE Paul 13-12-1963 23:55 PDG actif 45000 € 1
MARTIN Alfred 02-01-2001 17:48 Maçon Recherche d'emploi 900 € 4
PAUL Etienne 07-07-1978 14:30 Plombier actif 2300 € 2
NomDate de naissanceHeureMétierStatutRémunérationPosition