JavaScript  »  Guide  »  Guida Javascript: tecniche avanzate 

La classe DataGrid, che abbiamo definito nella lezione precedente, è definita da una semplice funzione e dalla modifica dell'oggetto prototype associato ad essa. Ovviamente per poter utilizzare questo approccio è necessario prima di tutto definire il costruttore e successivamente i metodi, in quanto l'oggetto DataGrid.prototype esiste solo successivamente alla definizione della funzione DataGrid.

Il costruttore non fa altro che impostare alcune proprietà private della classe in base ai parametri passati e a istanziare il vettore _selectedIndex che conterrà gli indici delle righe selezionate.

Il metodo più complesso è render il quale costruisce gli oggetti DOM che rappresentano la struttura della tabella ed appende questi oggetti all'elemento DOM ricevuto come parametro.

Il punto critico di questo metodo è l'assegnazione a ciascuna riga della tabella (tr) di tre callback per altrettanti eventi (onmouseover, onmouseout, onclick). A queste funzioni callback viene forzato lo scope tramite la funzione setScope, alla quale vengono passati alcuni parametri aggiuntivi: nel nostro caso un riferimento all'oggetto tr stesso e l'indice della riga selezionata.

Successivamente vengono definite queste funzioni callback, che modificarno l'aspetto grafico della tabella e, nel caso di _onclick, demandano le funzionalità a _onselect o a _ondeselect in base al fatto che la riga sulla quale l'utente ha cliccato sia già stata selezionata o meno (lo capiamo controllando che l'indice i sia presente o meno all'interno dell'oggetto _selectedIndex).Queste due funzioni a loro volta salvano o eliminano appunto da questa cache locale la riga selezionata.

Gli ultimi due metodi sono quelli pubblici (non presentano l'underscore iniziale), che forniscono all'utilizzatore di questa classe un'interfaccia comoda per interagire e ottenere informazioni riguardo la griglia.

Oltre a questa classe implementiamo altri metodi di utilità per gli oggetti Function e Array:

<script type="text/javascript">

Function.prototype.setScope = function(obj) {

  var method = this;
  var arg = [];
  for(var i = 1; i < arguments.length; i++) arg.push(arguments[i]);
  
  temp = function() {
    return method.apply(obj, arg);
  };
  
  return temp;
}

Array.prototype.exists = function(value) {
  for(var i = 0; i<this.length; i++) if(this[i] == value) return true;
  return false;
}

Array.prototype.remove = function(value) {
  for(var i = 0; i<this.length; i++) if(this[i] == value) this.splice(i,1);
}

</script> 

Il metodo setScopeè la versione leggermente modificata della funzione vista in precedenza: questa richiama la funzione passando anche un numero non definito di argomenti passati alla funzione setScope. Il ciclo for iniza da 1 e non da 0 proprio per "scartare" il primo argomento che rappresenta lo scope e non un parametro aggiuntivo.

Sono stati aggiunti anche due metodi di utilità all'oggetto implicito Array per ricercare se un elemento è già presente al suo interno e per eliminarlo.

Il funzionamento della griglia è semplicissimo:

<script type="text/javascript">
var grid;
window.onload = function() {
  grid = new DataGrid(["FirstName", "LastName", "Age"],
                      [
                        ["Luca","Luchi",32],
                        ["Marco","Marchi",42],
                        ["Bruno","Bruni",23]
                      ]);
  
  grid.render(document.getElementsByTagName("div")[0]);
}
</script>

<div></div>

<button onclick="alert(grid.getSelectedData())">GetSelecteData</button>
<button onclick="alert(grid.getSelectedIndex())">GetSelecteIndex</button> 

Oltre alla semplice creazione della griglia e il suo render all'interno del <div>, sono stati predisposti due bottoni per verificare l'effettivo funzionamento delle API della classe DataGrid.

L'esempio, come al solito, è perfettibile, sia sotto il profilo della funzionalità, sia nell'aspetto, ma dovrebbe essere sufficiente a mostrare la potenza dell'uso dei prototipi.

Altri articoli

Altre guide

Altre newsletter