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

Cette article est la suite de l'article précédent sur la création d'une table HTML éditable. Je vous conseille de le lire si ce n'est pas déjà fait, puisque je ne reviendrai pas sur les notions déjà vues.

Ce que nous allons voir ici servira surtout à la création de tableaux statistiques.

Voici le résultat que nous obtiendrons

Les totaux sont donc calculés automatiquement, on peut donc éditer que les lignes "oui" et "non".

Avant de commencer, nous avons besoin de

la librairie EditableGrid.
la librairie jQuery.

1. Partie HTML

Je n'ai pas cherché très compliqué, méthode à l'ancienne, un gros tableau englobant mes autres tableaux :D

Mon tableau principal

<table style="float:left;" id="datatable">
 <thead>
 <tr>
  <th>Col / Ligne</th>
  <th>Hommes</th>
  <th>Femmes</th>
 </tr>
 </thead>
 <tbody>
 <tr id="1">
  <td>Oui</td>
  <td>30</td>
  <td>83</td>
 </tr>
 <tr id="2">
  <td>Non</td>
  <td>43</td>
  <td>60</td>
 </tr>
 </tbody>
</table>

Mes 2 autres tableaux pour les totaux (total par lignes, total par colonnes). On oublie pas le total des totaux.

<table style="width:50px;" id="ligne_total">
 <tr><th>Total</th></tr>
 <tr id="l1"><td>00</td></tr>
 <tr id="l2"><td>00</td></tr>
</table>

<table style="width:100%">
 <tr id="colonne_total">
  <th>Total</th>
  <td id="c1">00</td>
  <td id="c2">00</td>
 </tr>
</table>
<div style="font-size:1.5em;" id="total"></div>

A vous ensuite de les organiser comme vous voulez !

2. Partie Javascript

Commencez par inclure les 2 librairies (editableGrid et jQuery).

editableGrid possède des fonctions assez intéressantes comme le fait de pouvoir obtenir le nombre de lignes et de colonnes d'un tableau, obtenir la valeur d'une case avec un simple get, mais aussi éditer une case tout aussi simplement. On va utiliser ces méthodes pour les calculs de nos totaux.

Pour commencer, on va rendre éditable 2 de nos tableaux pour utiliser les fonctions décrites ci-dessus.

var editableGrid = new EditableGrid("tabPrincipal",
{
 enableSort:false,
 // modelChanged : fonction appelée quand une valeur est modifiée
    // ici, on recalcule les totaux à chaque fois
    modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
  calculTotal();
 }
});
// notre tableau pour le total par ligne
var ligneGrid = new EditableGrid("ligneGrid",{enableSort:false});

Ensuite, nous allons les fonctions pour ajouter une ligne et pour calculer les totaux (par colonne, par ligne et le total général). Pour les fonctions disponibles, rendez-vous sur la doc.

// on doit ajouter une ligne sur 2 de nos tableaux.
// on appelle pour cela la méthode append
function ajouterLigne(){
  editableGrid.append(editableGrid.getRowCount()+1,{},false,false);
  ligneGrid.append("l"+(ligneGrid.getRowCount()+1),{},false,false);
}

// on calcule nos différents totaux
function calculTotal(){
  total=0;
  var x = 0;

  // le total par colonne
  for(i=1;i<editableGrid.getColumnCount();i++){
    x=0;
    for(j=0;j<editableGrid.getRowCount();j++){
   x += editableGrid.getValueAt(j,i);
    }
    $("#c"+i).html(x);
  }

  // le total par ligne
  for(i=0;i<editableGrid.getRowCount();i++){
    x=0;
    for(j=1;j<editableGrid.getColumnCount();j++){
   x += editableGrid.getValueAt(i,j);
    }
    ligneGrid.setValueAt(i,0,x);
    total+=x;
  }
  $("#total").html(total); // le super total :D
}

Une fois que nous avons nos 2 méthodes, il ne reste plus qu'à afficher tout ça :)

$(function () {

//notre tableau éditable
 editableGrid.load({ metadata: [
  { name: "X", datatype: "string", editable: true },
  { name: "Hommes", datatype: "integer", editable: true },
  { name: "Femmes", datatype: "integer", editable: true },
 ]});
 editableGrid.attachToHTMLTable('datatable');
 editableGrid.renderGrid();
 
 // tableau total lignes
 ligneGrid.load({ metadata: [
  { name: "Total", datatype: "integer", editable: false },
 ]});
 ligneGrid.attachToHTMLTable('ligne_total');
 ligneGrid.renderGrid();

//on lance le calcul des totaux une première fois, ensuite on l'appelle à chaque modification
 calculTotal();

// bouton ajouter une ligne
 $("#ajoutLigne").click(function() {
  ajouterLigne();
 });
});

Voilà, nous avons notre beau tableau statistique !

Si vous avez des questions ou remarques, n'hésitez pas :)

Je posterai bientôt un article pour associer un graphique à notre tableau, qui évoluera en fonction des modifications.

Les tutos utiles !