• 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:

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

Formatter:

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

Nota.
disabled:true → se impostato su false, le celle(Checkbox) vengono abilitate alla modifica.

Esempio:

editoptions:

{editoptions:{maxlength:2}}


Esempio:

Formatter:

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

Esempio:

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:

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:

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:

Esempio Formatter e FormatOption:

_{1) metadato custom}

Per tutti i parametri originali, è possibile consultare la documentazione ufficiale.

Si verifica se la somma delle colonne non supera la larghezza delle icone in basso a sinistra. E' possibile risolvere modificando la larghezza delle colonne o impostando il metadato width della tabella.

65 visualizzazioni.