Créer une table HTML éditable en javascript avec EditableGrid 1/2

Nous allons voir ici comment créer en toute simplicité une table HTML éditable. Je vais organiser le tutoriel en deux articles pour plus de clarté, dans un premier temps nous verrons un cas simple de table éditable. Ensuite, nous verrons l'édition d'un tableau statistique, avec les totaux calculés automatiquement.
Cela permettra de voir les différentes fonctionnalités de la librairie utilisée !

Librairie utilisée

J'ai testé différentes librairies pour créer et éditer des tables, et j'ai décidé de m'orienter vers EditableGrid que je trouve très puissant et simple à utiliser.

Vous pouvez déjà regarder le site et voir les nombreuses possibilités offertes (il y a même une gestion des graphiques si vous voulez).

Voici le premier résultat que nous obtiendrons:

Ici, chaque case est éditable en cliquant simplement dessus. Ça devient déjà intéressant de voir qu'on peut intégrer des listes ou des cases à cocher en plus de la gestion des cases de type string ou integer.

Avant de commencer, nous avons besoin de

• La librairie EditableGrid.

1. Partie HTML

On crée ici un tableau classique. La gestion des pays et des inscriptions se fera dans la partie javascript. True ou false pour les cases à cocher, un identifiant pour les pays.

On trouve également le bouton pour ajouter une ligne.

<h1>Tournoi des Super Héros</h1>
  
<a onclick="editableGrid.ajouterLigne();">Ajouter une ligne</a>

<table id="htmlgrid" class="testgrid">
 <tr>
  <th>Pseudo</th>
  <th>Niveau</th>
  <th>Pays</th>
  <th>Inscription</th>
  <th>Confirmée</th>
 </tr>
 <tr id="1">
  <td>Tintin</td>
  <td>9</td>
  <td>be</td>
  <td>10/04/2013</td>
  <td>false</td>
 </tr>
 <tr id="2">
  <td>Batman</td>
  <td>10</td>
  <td>us</td>
  <td>02/04/2013</td>
  <td>false</td>
 </tr>
 <tr id="3">
  <td>Fantômette</td>
  <td>8</td>
  <td>fr</td>
  <td>06/04/2013</td>
  <td>true</td>
 </tr>
</table>

2. Partie Javascript

La configuration va se faire assez vite et très simplement :)

window.onload = function() {

   // on crée notre EditableGrid
   // pour les options, enableSort si on peut trier (cliquer sur les colonnes)
   // shortMonthNames pour les noms francais des mois
 editableGrid = new EditableGrid("DemoGridAttach",
  {
   enableSort:true,
   shortMonthNames: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
  }
 ); 

   // on charge les données, on indique le nom de la colonne,
   // son type (string, integer, boolean..)
   // si la colonne est éditable
   // les valeurs pour les listes (ici les pays)
 editableGrid.load({ metadata: [
  { name: "pseudo", datatype: "string", editable: true },
  { name: "niveau", datatype: "integer", editable: true },
  { name: "pays", datatype: "string", editable: true, values: 
   { 'Europe': { "be" : "Belgique", "fr" : "France", "uk" : "Angleterre"},
     'Amerique du Nord': { "ca": "Canada", "us" : "Etats-Unis" },
   }
  },
  { name: "lastvisit", datatype: "date", editable: true },
  { name: "freelance", datatype: "boolean", editable: true }
  
 ]});
   // on attache notre EditableGrid au tableau HTML (avec son id)
 editableGrid.attachToHTMLTable('htmlgrid');
 editableGrid.renderGrid();
 
   // fonction qui permet d'ajouter une ligne
 editableGrid.ajouterLigne = function()
 {
  this.append(this.getRowCount()+1,{},false,false);
 };
}

Voilà, il en faut pas plus pour créer notre beau tableau d'inscription !

Retrouvez l'exemple sur jsFiddle.

Pour aller plus loin, je vous propose de lire l'article sur la création d'un tableau statistique éditable. Le principe est le même qu'ici, sauf que nous avons quelques fonctions supplémentaires pour les calculs des totaux.

N'hésitez pas à commenter l'article afin de l'améliorer !