Conception de contrôles Web JavaScript avancés : Créer une table HTML éditable - HtmlEditTable v1.0


précédentsommairesuivant

V. Implémentation : 3ème étape - les données

Pour terminer notre implémentation, voici quelques fonctions utiles pour étoffer notre HtmlEditTable.

V-A. Qui es-tu ?

Il est intéressant pour l'utilisateur de notre contrôle de pouvoir accéder aux noms des lignes et colonnes de la table.

HtmlEditTable.prototype.LineNames
Sélectionnez
LineNames: function(){
  if (arguments.length > 0){
    this.lines = lines;
  }
  return this.lines;
},
HtmlEditTable.prototype.ColumnNames
Sélectionnez
ColumnNames: function(){
  if (arguments.length > 0){
    this.columns = columns;
  }
  return this.columns;
},

Suivant que vous passiez ou non en argument un Array contenant les noms des lignes ou colonnes, vous affectez ou accédez à l'Array correspondant du HtmlEditTable. Ces fonctions ont le rôle d'accesseur et de mutateur sur les attributs lines et columns de notre contrôle.

V-B. Où es-tu ?

Tout comme les noms des lignes et colonnes, il est très utile de pouvoir accéder aux données d'une ligne ou d'une colonne entière. C'est le rôle des fonctions Line() et Column(). La fonction Line() attend en paramètre un objet définissant les propriétés name, nom de la ligne, et data, Array contenant les données à affecter à la ligne. La fonction Column() attend en paramètre un objet définissant les propriétés name et data, ainsi que la propriété head, titre de la colonne.

HtmlEditTable.prototype.Lines
Sélectionnez
Line: function(){
  if (arguments.length == 0
    || typeof arguments[0].name == "undefined"){
    return undefined;
  }

  var data = [];
  var y = Tools.IndexOf(this.lines, arguments[0].name);

  if (y > -1){
    var cells = this.control.getElementsByTagName("tbody")[0].rows[y].cells;

    if (typeof arguments[0].data != "undefined"){
      data = arguments[0].data;
      for (var i=0, imax=data.length; i<imax; i++){
        cells[i].firstChild.data = data[i];
      }
    }
    else{
      for (var x=0, xmax=cells.length; x<xmax; x++){
        data.push(cells[x].firstChild.data);
      }
    }
  }
  else if (typeof arguments[0].data != "undefined"){
    this.lines.push(arguments[0].name);
    data = arguments[0].data;

    var row = this.control.insertRow(-1);
    for (var j=0, jmax=this.columns.length; j<jmax; j++){
      var cell = row.insertCell(-1);
      HtmlEditTableHelper.CellInitialize(cell, data[j]);
    }
  }

  return data;
},
HtmlEditTable.prototype.Columns
Sélectionnez
Column: function(){
  if (arguments.length == 0
    || typeof arguments[0].name == "undefined"){
    return undefined;
  }

  var data = [];
  var rows = this.control.getElementsByTagName("tbody")[0].rows;
  var x = Tools.IndexOf(this.columns, arguments[0].name);

  if (x > -1){
    if (typeof arguments[0].data != "undefined"){
      data = arguments[0].data;
      for (var i, imax=data.length; i<imax; i++){
        rows[i].cells[x].firstChild.data = data[i];
      }
    }
    else{
      this.lines.push(arguments[0].name);
      for (var y=0, ymax=rows.length; y<ymax; y++){
        data.push(rows[y].cells[x].firstChild.data);
      }
    }
  }
  else if (typeof arguments[0].data != "undefined"){
    this.columns.push(arguments[0].name);
    data = arguments[0].data;

    for (var y=0, ymax=rows.length; y<ymax; y++){
      var cell = rows[y].insertCell(-1);
      HtmlEditTableHelper.CellInitialize(cell, data[y]);
    }

    var thead = this.control.getElementsByTagName("thead");
    if (thead.length > 0){
      thead = thead[0];
      var title = typeof arguments[0].head != "undefined" ? arguments[0].head : "";
      var cell = thead.rows[0].insertCell(-1);
      cell.appendChild(document.createTextNode(title));
    }
  }

  return data;
},

Ces fonctions ont également le rôle d'accesseur et de mutateur. Accesseur si l'unique paramètre passé aux fonctions est le nom de la ligne ou de la colonne à laquelle on désire accéder. Mutateur si, en plus du nom de la ligne ou colonne, on passe un Array contenant les données que l'on veut affecter à ladite ligne ou colonne.

Dans le cas où la ligne ou la colonne existe et que la propriété data du paramètre est définie, les données que la ligne ou la colonne contient sont remplacées par celles passées en paramètre. Si la ligne ou la colonne n'existe pas, elle est créée et initialisée. Pour la colonne, si le paramètre défini également la propriété head, alors l'en-tête de la colonne prendra cette valeur.

V-C. Tous pour un, un pour tous

Nous pouvons maintenant accéder à la totalité des données via la fonction AllData(), à une ligne ou une colonne via les fonctions Line() et Column(). Il ne nous manque plus que pouvoir accéder à la donnée d'une cellule particulière. C'est ce que nous permet la fonction Data().

HtmlEditTable.prototype.Data
Sélectionnez
Data: function(column, line, data){
  if (arguments.length < 2){
    return undefined;
  }
  var x, y;
  x = Tools.IndexOf(this.columns, arguments[0]);
  if (x > -1){
    y = Tools.IndexOf(this.lines, arguments[1]);
    if (y > -1){
      if (arguments.length > 2){
        this.control.rows[y].cells[x].appendChild(document.createTextNode(arguments[2]));
      }
      return this.control.rows[y].cells[x].firstChild.data;
    }
  }
  return undefined;
}

Encore une fois, cette fonction est à la fois accesseur et mutateur. Accesseur si on lui passe en paramètre les noms de la colonne et de la ligne qui permettront d'identifier la cellule cherchée. Mutateur si, en plus des paramètres précédents, on passe la valeur à affecter à la cellule.

V-D. Interface finale

A l'issue de l'ajout des fonctionnalités précédentes, voici l'interface finale de notre contrôle mise à disposition de l'utilisateur :

Interface publique de HtmlEditTable - v1.0
Sélectionnez
/*

public class HtmlEditTable {

  public:
  
  HtmlEditTable(object o);
  void AppendTo(control parent);
  Array LineNames();
  Array LineNames(Array t);
  Array ColumnNames();
  Array ColumnNames(Array t);
  object Dimensions();
  object Dimensions(object d);
  Array Line();
  Array Line(object o);
  Array Column();
  Array Column(object o);
  void Clean();
  void Populate(Array data);
  void Build(object o);
  T Data(string col, string row);
  T Data(string col, string row, T data);
  Array AllData();
};

*/

voir la démo - télécharger les sources


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2009 Nourdine FALOLA. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.