- Learn
- Guida Javascript OOP e tecniche avanzate
- La classe DataGrid
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;
}
Se vuoi aggiornamenti su La classe DataGrid inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali: