Corsi on-line

Tabular Input: tabelle interattive con jQuery

Tabular Input è un plugin per il framework JavaScript Open Source jQuery che consente di creare delle tabelle composte essenzialmente da campi di input, gli stessi che vengono tradizionalmente utilizzati all’interno dei form online; le righe e le colonne delle tabelle potranno essere aggiunte o cancellate dinamicamente, nello stesso modo si potranno animare tali elementi in modo che possano essere spostati all’interno delle tabelle indipendentemente dai valori che contengono.jQueryPer utilizzare Tabular Input è naturalmente necessario richiamare la libreria di jQuery all’interno della propria pagina Web, fatto questo si deve includere il file del plugin, tabular-input.min.js (appena 4.1 KB), e il foglio di stile associato, tabular-input.min.css (2 KB):

<script src='tabular-input.min.js'></script>
<link type='text/css' rel='stylesheet' href='tabular-input.min.css'/>

Fatto questo diventerà disponibile il metodo tabularInput(), associato al selettore #tabular, che permette di passare gli attributi per la definizione della tabella. Il codice seguente permette per esempio di generare una tabella composta da 4 righe (rows) e 6 colonne (columns), si osservi anche l’abilitazione della direttiva (animate) che consente di attivare le animazioni:

jQuery('#tabular').tabularInput({
	'rows': 4,
	'columns': 6,
	'animate': true
});

Sono poi disponibili dei parametri appositamente concepito per il supporto all’interazione e alla gestione della tabella creata, sia per le righe che per le colonne:

// aggiunge una riga alla fine della tabella
$("#tabular").tabularInput("addRow");
// cancella l'ultima riga
$("#tabular").tabularInput("deleteRow");
// cancella la riga che ha 2 come indice		
$("#tabular").tabularInput("deleteRow", 2);		
# aggiunge una colonna alla fine della tabella
$("#tabular").tabularInput("addColumn");
# cancella una colonna			
$("#tabular").tabularInput("deleteColumn");

Nel caso in cui si voglia utilizzare Tabular Input per la rappresentazione di dati strutturati è possibile intestare le colonne assegnando a ciascuna di esse il nome del dato relativo ai valori elencati:

jQuery('#tabular').tabularInput({
	'rows': 4,
	'columns': 4,
	'columnHeads': ['Nome', 'Cognome', 'Email', 'Telefono']
});

Via Tabular Input

Post correlati
I più letti del mese
Tematiche