[jQuery] EditTable – Editez un tableau bi-dimensionnel en ligne

jquery

Suite à la dernière Après-midi du développement sur le Javascript organisé par Microsoft à laquelle j’ai eu la chance de participer, nous avons été sensibilité au partage et à la création de plugin jQuery universel. Ainsi, lorsqu’une problématique se présente et qu’aucune réponse ne se trouve sur internet, il est alors de la responsabilité d’un développeur citoyen, de partager son travail et sa création.

Ainsi, la semaine dernière, j’ai eu à développer la problématique d’une variance d’un taux financier en fonction de deux paramètres. Jusque là, pas trop de soucis. Mais c’est au moment où le client m’a demandé de pouvoir gérer cette variance que tout s’est compliqué. Comment l’afficher au client ? Comment lui laisser la possibilité d’éditer ces valeurs ?

Préparation

La première étape est de formater les données de telles sortes qu’elles soient exploitables par le plugin EditTable. Pour se fare, il vous suffit de créer ce genre de tableau :

Array
(
    [0] => Array (
        [x] => 0
        [y] => 1
        [value] => 0.5
    )
    [2] => Array (
        [x] => 2
        [y] => 1
        [value] => 0.6
    )
    [3] => Array (
        [x] => 2
        [y] => 1
        [value] => 0.6
    )
)

L’installation

Rien de bien compliqué ! Commençons par un peu de CSS totalement facultatif puis le plugin jQuery.

Initialisation

$('#table').editTable();

Le reste, c’est à votre sauce ! Mais une démo et une documentation complète se trouvent ici.

N’hésitez pas à poser vos questions ou à demander de l’aide en commentaire.

A propos de Thibault HENRY

Passionné de web depuis toujours, j'ai développé mon premier site internet à l'âge de 12 ans, avec le feu Microsoft FrontPage. Depuis cette passion ne m'a pas quitté. Autodidacte, je dirige maintenant le service technique de Digital Dealer, agence de communication.

Laisser un commentaire