La classe DataGrid

Per esaminare tutti gli aspetti più critici della programmazione ad oggetti in JavaScript, utilizziamo un esempio, cui faremo riferimento in tutto il capitolo. Vediamo come creare un semplice componente DataGrid con poche funzionalità utili allo scopo.

Una DataGrid è caratterizzata da due vettori: il primo rappresenta il nome delle colonne e il secondo contiene a sua volta altri vettori che rappresentano i dati effettivi da mostrare. Presenta alcuni aspetti grafici come l'effetto rollover sulla riga sottostante il cursore del mouse e la possibilità di selezionare dei record.

Gli unici due metodi esposti sono getSelectedIndex che ritorna un vettore contenente gli indici delle righe selezionate, e getSelectedData che ritorna un vettore contenente i dati contenuti nelle righe selezionate.

Per nascondere eventuali proprietà e metodi privati è stata utilizzata la naming convention che prevede di chiamare gli oggetti con un underscore (_) davanti al nome.

Ecco una parte del codice (versione integrale).

function DataGrid(header, data) {
  this._header = header;
  this._data = data;
  this._selectedIndex = [];
}
DataGrid.prototype.render = function(to) {
  var table = document.createElement("TABLE");
  var thead = document.createElement("THEAD");
  var trHead = document.createElement("TR");
  for(var i = 0; i<this._header.length; i++) {
    var th = document.createElement("TH");
    th.appendChild(document.createTextNode(this._header[i]));
    trHead.appendChild(th);
  }
  thead.appendChild(trHead);
  table.appendChild(thead);
  var tbody = document.createElement("TBODY");
  for(var i = 0; i<this._data.length; i++) {
    var trBody = document.createElement("TR");
    trBody.onmouseover = this._onmouseover.setScope(this, trBody, i);
    trBody.onmouseout = this._onmouseout.setScope(this, trBody, i);
    trBody.onclick = this._onclick.setScope(this, trBody, i);
    for(var c = 0; c<this._data[i].length; c++) {
      var td = document.createElement("TD");
      td.appendChild(document.createTextNode(this._data[i][c][/c]));
      trBody.appendChild(td);
    }
    tbody.appendChild(trBody);
  }
  table.appendChild(tbody);
  to.appendChild(table);
}
// event handler privati
DataGrid.prototype._onmouseover = function(tr, i) { /* ...  */ }
DataGrid.prototype._onmouseout = function(tr, i) { /* ...  */ }
DataGrid.prototype._onclick = function(tr, i) { /* ...  */ }
DataGrid.prototype._onselect = function(tr, i) { /* ...  */ }
DataGrid.prototype._ondeselect = function(tr, i) { /* ...  */ }
// metodi esposti
DataGrid.prototype.getSelectedIndex = function() { return this._selectedIndex; }
DataGrid.prototype.getSelectedData = function() {
  var temp = [];
  for(var i = 0; i<this._selectedIndex.length; i++)
    temp.push(this._data[this._selectedIndex[i]]);
  return temp;
}