Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

Handsontable : un Excel-like dans vos pages HTML !
Sous forme de plugin jQuery

Le , par FirePrawn, Expert éminent sénior
Handsontable est un plugin jQuery qui vous permettra de créer des tableurs web dont le style n'est pas sans rappeler celui d'Excel.
Il est très simple, et la prise en main est rapide, à condition bien entendu de connaitre jQuery.

Ce plugin offre différentes fonctionnalités qui vous facilitent la vie lors de la création de votre tableur :
  • la génération du tableur ;

  • possibilité d'ajouter des cases de légendes avec gestion de la police, de la couleur, etc. ;

  • l'autocomplétion de données en cours de saisie ;

  • des scrollbars ;

  • un drag down qui peut être appliqué sur plusieurs cases (ce qui a pour effet de copier le contenu de la case sélectionnée dans les autres) ;

  • un menu contextuel au clic gauche sur une case (insérer une ligne, insérer une colonne, etc.) ;

  • un callback après la saisie de données ;

  • et bien d'autres petites options qui font de votre tableur un outil solide.


L'utilisation qui en résulte est la suivante :
  • on définit un élément HTML qui fera office de conteneur du tableur ;

  • on génère le tableur dans cet élément, en précisant un nombre de lignes et de colonnes ;

  • on remplit le tableur avec nos données à partir d'un array.


Pour plus d'exemples, je vous invite à lire la documentation.

A vous de jouer !

Source : Handsontable

Et vous ?

Que pensez-vous de ce plugin ?
Avez-vous déjà eu besoin d'un tableur style Excel dans vos pages web ?
Si oui, ce plugin vous faciliterait-il la vie ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de SpaceFrog SpaceFrog - Rédacteur/Modérateur https://www.developpez.com
le 27/06/2012 à 15:49
Avatar de braham esi braham esi - Nouveau Candidat au Club https://www.developpez.com
le 20/10/2013 à 10:56
bonjour, je suis toujours en train de découvrir le handsontable j'ai trouvé pas mal de fonctionnalités qui montrent ses point fort mais j'ai un seul souci qui me bloque un peu : comment accéder a une tel cellule (example : une cellule C1 = C3+C6 avec la cellule C1 est de readonly: true )

merci beaucoup les amis
Braham
Offres d'emploi IT
RESPONSABLE WEB ANALYTICS F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur WEB PHP F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur Web FULL-STACK
VACALIANS GROUP - Languedoc Roussillon - SETE (34)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -