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).