Tabelle

Tabelle

Struttura

Formattazione di celle

Grid ad Albero

Sottogriglia

Tabella con editing inline multiplo (ita-dataSheet)

Anagrafica metadati tabella

Anagrafica metadati colonne

Per quanto riguarda i dati elemento per una tabella sono:

Nome Univoco Elemento Preceduto dal prefisso “grid”. Es. gridTabella

Tipo elemento:

table→ ita-jqGrid: Tabella. Stile: definito dal tema.

Classe elemento ( ita-jqGrid )

Colonne elemento Per indicare il numero di colonne che deve avere la tabella.

Nota. Se si inserisce un valore inferiore al numero di colonne, la form darà errore. Mentre se si inserisce un numero superiore andrà bene ugualmente.

Dati non necessari:

Classe label

Posizione label

Larghezza label

Access key

Testo alternativo

Caratteristiche input elemento:

Obbligatorio

Attributi elemento più tutti quelli html possibili per gli elementi:

class:

E' possibile impostare la classe: ita-jqGrid anche qui.

metadati , sempre racchiusi tra {…}:

cellEdit:true/false, → Rende la cella modificabile o meno.

rowList:[], → Lista delle righe

rowNum:n, → Numero di righe da visualizzare nella form (Se si vorranno ottenere tutte le righe in una sola pagina sarà necessario impostare il rowNum ad un numero uguale o superiore al numero di righe contenuto nel DB)

caption: “Titolo” → E' l'intestazione visualizzata nelle Grid

sortname:'NomeCampo', → Riordinare per nome,'Nome del campo che viene usato per riordinare'

sortorder:'NomeCampo', → Riordinare con ordine ascendente o discendente, per default è ascendente

navGrid:true/false, → Visualizza o meno la barra che conterrà i vari bottoni di navigazione. Se impostata su false e altri eventuali bottoni su true, i bottoni non verranno ugualmente visualizzati. (Es. navButtonDel,navButtonAdd ecc.)

navButtonDel:true/false, → Imposta il bottone del(cancella) visibile/non visibile

navButtonAdd:false/true, → Definisce se il bottone Add è visibile/non visibile

navButtonEdit:true/false, → Imposta il bottone edit visibile/non visibile

navButtonView:true/false, → Imposta il bottone view visibile/non visibile

navButtonExcel:true/false, → Imposta il bottone Excel visibile/non visibile

navButtonPrint:true/false, → Imposta il bottone Stampa visibile/non visibile

navButtonRefresh:true/false, → Imposta il bottone Refresh visibile/non visibile

shrinkToFit:true/false, → Adatta la tabellla alla workspace

resizeToParent:true/false → Adatta la tabella alla workspace, la ridimensiona a seconda dello spazio che ha a disposizione.

maximized:true/false, → Espande l'elemento, in questo caso la tabella, per lo spazio disponibile.

closeButton:true/false, → (?)

autowidth:true/false,→ Per impostare la larghezza della tabella automatica.

autoheigth:true/false,→ Per impostare l'altezza della tabella automatica.

pgbuttons:true/false, → Per visualizzare o meno i bottoni di navigazione delle pagine della tabella.(Se non inserito tra i metadati i bottoni verranno automaticamente visualizzati)

pginput:true/false, → Per visualizzare o meno la text per inserire direttamente il N° della pagina della tabella a cui si vuole andare(Se non inserito tra i metadati verrà automaticamente visualizzata)

itaSelectable:true: Abilita l'evento select di una cella

multiselect:true/false,: Abilita la multiselezione

altRows:true/false,: Imposta l'effetto “zebra”, le righe assumono in modo alternato 2 colori differenti.

filterToolbar:true/false → Abilita l'utilizzo dei filtri sopra alle colonne, per poter effettuare una ricerca più dettagliata

showInlineButtons: { view: (boolean), edit: (boolean), delete: (boolean) } → Abilita i bottoni per le azioni impostate all'interno delle singole righe. E' possibile impostare la variabile a “true” per abilitare tutti i pulsanti.

Nota.
Per maggiori informazioni sui Metadati (Opzioni) della grid consulta anche Questa Lista

style:

font-size: Se inserito è possibile definire le dimensioni del testo

font-style: Se inserito è possibile definire lo stile utilizzato(Italic,Underscore,Bold)

font-weight: Se inserito è possibile definire lo spessore del font

color: Se inserito è possibile definire il colore

margin-top:px/%/auto: Utilizzato per definire il margine dal th. A che distanza dal th verranno visualizzati i vari td.

margin-left:px/%/auto: Utilizzato per definire la distanza dei td dal margine sinistro

margin right:px/%/auto: Utilizzato per definire la distanza dei td dal margine destro

Esempio:

Nome Attributo	Valore Attributo
class	{caption: “Elenco Passi Procedimento”,width:570,height:320,autowidth:true,rowNum:1000,rowList:[],navGrid:true,navButtonEdit:true,navButtonAdd:true,navButtonDel:true,shrinkToFit:true,resizeToParent:true,pgbuttons:false,pginput:false}
style	font-size:100%;

Struttura

Generalmente è utilizzata per i td, in quanto il th oltre ad un label elemento non necessita di altri attributi.
La table→ ita-jqGrid gestisce automaticamente i campi che verranno riempiti, e come sottoelementi della tabella dovranno essere dichiarati i vari th(Intestazioni) e td(colonne).

Per quanto riguarda i dati elemento per gli elementi delle tabelle utilizzabili sono:

Nome Univoco Elemento

Tipo elemento:

th→ generico: Intestazione di una tabela

th→ vuoto: Intestazione di una tabella impostato vuoto.

td→ generico: Colonna generica di una tabella.

Label elemento: Per impostare l'intestazione. Generalmente utilizzata per i th generico e th vuoto. Non deve quindi essere impostato in un td→ generico.

Dati non necessari:

Classe label

Posizione label

Larghezza label

Access key

Testo alternativo

Classe elemento

Colonne elemento

Caratteristiche input elemento:

Obbligatorio

Attributi elemento più tutti quelli html possibili per gli elementi:

class:

Width: Utilizzato per definire la larghezza della cella.Necessario nel td.(Espressa in pixel, ma è possibile aggiungere un % per una larghezza in percentuale)

Height: Utilizzato per definire l'altezza della cella.(espressa in pixel, ma è possibile aggiungere un % per una larghezza in percentuale)

Metadati:

formatter:'checkbox', formatoptions:{disabled:true} Esempio

formatter:'currency', Per formattare una cella in tipo valuta (1,00)Esempio

formatter:eqdate, formatoptions:{disabled:true} Esempio

editable:true,cellEdit:true Per rendere una cella editabile.Esempio

editoptions:{maxlength:N}: Dare una massima lunghezza ad una cella.Esempio

selectable:true: Formattazione che rende la cella selezionabile e che al click fa ritornare l'evento “cellSelect”.

style:

font-size : Se inserito è possibile definire le dimensioni del testo

font-style : Se inserito è possibile definire lo stile utilizzato(Italic,Underscore,Bold)

font-weight : Se inserito è possibile definire lo spessore del font

Formattazione di celle:

Rendere una cella una checkbox

Formatter:
{formatter:'checkbox', formatoptions:{disabled:true}}
Nota.
disabled:true → se impostato su false, le celle(Checkbox) vengono abilitate alla modifica.
Esempio:

Nome Attributo	Valore Attributo
class	{formatter:'checkbox', formatoptions:{disabled:true}}

Maxlength Ad una Cella

editoptions:
{editoptions:{maxlength:2}}
Esempio:

Nome Attributo	Valore Attributo
class	{editable:true,cellEdit:true,editoptions:{maxlength:2}}

Rendere una cella Date

Formatter:
{formatter:eqdate, formatoptions:{disabled:true}} Nota.
disabled:true → se impostato su false, le celle(Checkbox) vengono abilitate alla modifica.
Esempio:

Nome Attributo	Valore Attributo
class	{formatter:eqdate, formatoptions:{disabled:true}}

Rendere una cella Editabile

Per rendere una cella editabile tra i metadati della cella (td) è opportuno inserire:
{editable:true,cellEdit:true} → se impostato su false o comunque non viene inserito il metadato “editable:true” la cella non risulterà editabile.

Esempio:

Nome Attributo	Valore Attributo
class	{editable:true,cellEdit:true}

Rendere una colonna non sortabile

Per rendere una colonna non sortabile è opportuno inserire:
{sortable:false} → se impostato su false o comunque non viene inserito il metadato “sortable:false” la colonna sarà sortabile.

Esempio:

Nome Attributo	Valore Attributo
class	{sortable:false}

Rendere una cella di formato valuta 0,00

Per rendere una cella di formato valuta tra i metadati della cella (td) è opportuno inserire:
{formatter:'currency'}
E' possibile inserire alcuni formatoption come:

formatoptions:{….}

{prefix: “€ ”} Per mettere come prefisso il simbolo €

{decimalPlaces: N} Dove N indica quanti valori ci dovranno essere dopo la “,”

{decimalSeparator:“ ”} All'interno degli apici dovrà essere indicato il separatore dei decimali, come ad esempio: “,” o “.”

{thousandsSeparator: “ ”} All'interno degli apici dovrà essere indicato il separatore delle migliaia , come ad esempio “,” o “.”

{defaultValue: 'valore'} All'interno dovrà essere indicato il valore che deve essere visalizzato di deafult, come ad esempio “0.00” o “0,00”

{ suffix:“”} All'interno degli apici può essere indicato il suffisso dei valori come un “.” o qualsiasi altro suffisso.

Esempio Solo Formatter:

Nome Attributo	Valore Attributo
class	{formatter:'currency'}

Esempio Formatter e FormatOption:

Nome Attributo	Valore Attributo
class	{formatter:'currency',formatoptions:{prefix: “€ ”}}

Anagrafica metadati tabella

Metadato	Valore	Default	Descrizione

Anagrafica metadati colonne

Metadato	Valore	Default	Descrizione

Torna alla lista.	Vai alla Lista Analitica