gablog

Un tempo i siti venivano impaginati tramite le tabelle, oggi le tabelle le impagini dentro ai siti! Mi sono trovato nelle condizioni di dover scrivere un applicazione web che presenta un gran numero di dati, che per loro stessa natura devono essere disposti all'interno di tabelle. Non sono più avvezzo alle tabelle da quando produco siti in XHTML, e mi sono scontrato con tutti i loro limiti e difetti. Ho trovato però un valido alleato: OpenRico. Si tratta di un framework javascript, che tra le altre cose gestisce le tabelle in un modo che un paio di anni fa sarebbe stato considerato fantascienza.

Ma niente è meglio di un esempio:

Ce n'è da sbizzarrirsi, una volta caricati i dati della tabella tramite PHP, AJAX, HTML o XML entra in gioco il javascript, che permette un'infinità di giochetti. In questo esempio ho usato l'ordinamento per colonna, i filtri, l'highlight delle righe ed i link condizionali. Oltre naturalmente alla possibilità di ridimensionare al volo le colonne ed al fatto che la tabella occupa una spazio prefissato. Non ultimo l'header resta fisso durante lo scrolling, risultato non banale se mai avete tentato di fare qualcosa di simile!

Il codice usato è relativamente poco, grazie all'ottimo framework OpenRico, che si appoggia su ProtoType. Inizio con l'inizializzazione di ciò che mi serve:

// Carico tutti gli elementi necessari
Rico.loadModule('LiveGrid','LiveGridMenu','gest.css');
// var orderGrid,buffer;
var CustId='1';
var CustIdCol=7;

Qui c'è la parte più succosa: definisco una classe che in seguito assegnerò alla variabile control, all'interno della definizione delle colonne. Questa classe indica a alla LiveGrid che le colonne interessate dovranno avere un determinato colore di sfondo ed un link condizionale, stabilito sulla base del contenuto di una colonna. Le classi predefinite in OpenRico sono disponibili nel file ricoLiveGridControls.js, e sono un ottimo punto di partenza per svilupparne di proprie.

// Creo la Classe - classi preesistenti in ricoLiveGridControls.js
HighlightCellAndLink = Class.create();
// Dichiaro la classe - si tratta di un misto tra due classi esistenti
HighlightCellAndLink.prototype = {

	initialize: function(chkcol,chkval,highlightColor,highlightBackground,href,target) {
		this._chkcol=chkcol;
		this._chkval=chkval;
		this._highlightColor=highlightColor;
		this._highlightBackground=highlightBackground;

		this._href=href;
		this._target=target;
		this._anchors=[];
	},
  _create: function(gridCell,windowRow) {
		this._anchors[windowRow] = RicoUtil.createFormField(gridCell,'a',null,this.liveGrid.tableId+'_a_'+this.index+'_'+windowRow);
		if (this._target) this._anchors[windowRow].target=this._target;
		this._clear(gridCell,windowRow);
  },
  _clear: function(gridCell,windowRow) {
		gridCell.style.color='';
		gridCell.style.backgroundColor='';
	
		this._anchors[windowRow].href='';
		this._anchors[windowRow].innerHTML='';
  },
  _display: function(v,gridCell,windowRow) {
		var gridval=this.liveGrid.buffer.getWindowValue(windowRow,this._chkcol);
		var match=(gridval==this._chkval);
		gridCell.style.color=match ? this._highlightColor : '';
		gridCell.style.backgroundColor=match ? this._highlightBackground : '';
	
		this._anchors[windowRow].innerHTML=this._format(v);
		var getWindowValue=this.liveGrid.buffer.getWindowValue.bind(this.liveGrid.buffer);
		this._anchors[windowRow].href=this._href.replace(/\{\d+\}/g,
		function ($1) {
			var colIdx=parseInt($1.substr(1));
			return getWindowValue(windowRow,colIdx);
		}
	);
  }

}

Infine dichiaro alcune variabili ed intervengo sul core della LiveGrid: definisco i parametri di ciascuna colonna.

Rico.onLoad( function() {
// Carico i dati della tabella dentro al Rico Buffer javascript
var buffer = new Rico.Buffer.Base($('dataTable').tBodies[0]);
// Preparo le opzioni
var grid_options = {
headingSort: 'hover',
highlightElem: 'cursorRow',
FilterLocation: -1,
visibleRows: 23,
saveColumnInfo: {width:false, filter:false, sort:false},
columnSpecs: [

{
	height:50, 
	width:113,
	filterUI:'t^20',
	control:new Rico.TableColumn.HighlightCell(CustIdCol,CustId,'black','#FBC880')
}, // id
{
	width:185, 
	filterUI:'t^20', 
	control:new Rico.TableColumn.HighlightCell(CustIdCol,CustId,'black','#FBC880')
}, // Rag. sociale
{
	width:78, 
	filterUI:'t^20', 
	control:new Rico.TableColumn.HighlightCell(CustIdCol,CustId,'black','#FBC880')
}, // tipo lic.
{
	width:25, 
	control:new Rico.TableColumn.HighlightCell(CustIdCol,CustId,'black','#FBC880'),
	ClassName:'centred'
}, // n. lic.
{
	type:'date',
	dateFmt:'dd/mm/yyyy',
	width:75, 
	control:new Rico.TableColumn.HighlightCell( CustIdCol,CustId,'black','#FBC880' )
}, // scad. ass.
{
	visible:false
}, // log id
{
	control:new HighlightCellAndLink(CustIdCol,CustId,'black','#FBC880','/','_blank'), 
	type:'date', 
	dateFmt:'dd/mm/yyyy', 
	width:75
}, // ultimo agg.
{
	width:25, 
	filterUI:'t', 
	control:new Rico.TableColumn.HighlightCell(CustIdCol,CustId,'black','#FBC880'),
	ClassName:'centred'
}, // B
{
	width:25, 
	filterUI:'t', 
	control:new Rico.TableColumn.HighlightCell(CustIdCol,CustId,'black','#FBC880'),
	ClassName:'centred'
}, // L
{
	type:'date', 
	dateFmt:'dd/mm/yyyy', 
	width:75, control:new Rico.TableColumn.HighlightCell( CustIdCol,CustId,'black','#FBC880' )
}, // ultimo int.
{
	type:'date', 
	dateFmt:'dd/mm/yyyy', 
	width:75, 
	control:new Rico.TableColumn.HighlightCell( CustIdCol,CustId,'black','#FBC880' )
}, // data stipula

] };

// Creo un'istanza della LiveGrid
var grid = new Rico.LiveGrid('dataTable', buffer, grid_options);
});

Il codice completo è disponibile visualizzando il sorgente della pagina, dopo una learning curve un pochino ripida vi troverete a lavorare in modo davvero semplice con questo ottimo prodotto.

Happy coding