===== Tabelle ===== * [[tabelle#Tabelle|Tabelle]] * [[tabelle#struttura|Struttura]] * [[tabelle#Formattazione_di_celle|Formattazione di celle]] * [[Grid_albero#Grid ad Albero]] * [[sviluppo:tabelle:sottogriglia#Sottogriglia]] * [[sviluppo:tabelle:datasheet|Tabella con editing inline multiplo (ita-dataSheet)]] * [[tabelle#anagrafica_metadati_tabella|Anagrafica metadati tabella]] * [[tabelle#anagrafica_metadati_colonne|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 [[http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options|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}** [[tabelle#Rendere una cella una checkbox|Esempio]] * **formatter:'currency',** Per formattare una cella in tipo valuta (1,00)[[tabelle#Rendere una cella di formato valuta 0,00|Esempio]] * **formatter:eqdate, formatoptions:{disabled:true}** [[tabelle#Rendere una cella Date|Esempio]] * **editable:true,cellEdit:true** Per rendere una cella editabile.[[tabelle#Rendere una cella Editabile|Esempio]] * **editoptions:{maxlength:N}:** Dare una massima lunghezza ad una cella.[[tabelle#Maxlength 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 ^ | altRows | (boolean) | false | Abilita colori alternati per le righe della tabella. | | caption | (string) | %%'%%%%'%% | La caption della tabella. Se vuoto non viene inserito l'header della caption. | | cellEdit | (boolean) | false | Abilita l'edit inline nelle celle. | | filterToolbar 1 | (boolean) | false | Abilita la barra dei filtri. | | itaSelectable 1 | (boolean) | | Abilita gli eventi alla selezione delle righe. | | multiselect | (boolean) | false | Abilita le checkbox per la seleziona multipla delle righe. | | multiselectEvents 1 | (boolean) | false | Abilita gli eventi alla spunta delle checkbox di selezione multipla. | | pgbuttons | (boolean) | true | Indica se mostrare i pulsanti di navigazione pagine. | | pginput | (boolean) | true | Indica se mostrare l'input per l'inserimento della pagina da navigare. | | resizeToParent 1 | (boolean) | false | Abilita l'autoresize della griglia relativamente alla width e height dell'elemento padre. | | rowList | (array) | [] | Se popolato, costruisce una select per la selezione delle righe da mostrare in una pagina basata sui valori inseriti nell'array. | | rowNum | (int) | 20 | Numero di righe da mostrare per pagina. | | showAuditColumns 1 | (boolean) | false | | | showRecordStatus 1 | (boolean) | false | | | showInlineButtons 1 | (boolean%%|%%array) | false | | | shrinkToFit | (boolean) | | | | sortname | (string) | %%'%%%%'%% | Nome della colonna per cui ordinare i dati della tabella all'apertura. | | sortorder | (string) | 'asc' | Ordine per cui sortare la colonna. I valori accettati sono ''asc'' e ''desc''. | ^ ^^^^ | navGrid 1 | (boolean) | false | | | navButtonAdd 1 | (boolean) | false | | | navButtonEdit 1 | (boolean) | false | | | navButtonCopy 1 | (boolean) | false | | | navButtonDel 1 | (boolean) | false | | | navButtonView 1 | (boolean) | false | | | navButtonExcel 1 | (boolean) | false | | | navButtonPrint 1 | (boolean) | false | | | navButtonRefresh 1 | (boolean) | false | | | columnChooser 1 | (boolean) | true | | ^ ^^^^ | onExpandNode 1 | (boolean) | false | | | onCollapseNode 1 | (boolean) | false | | | expandAllButton 1 | (boolean) | false | | 1) metadato custom\\ \\ Per tutti i parametri originali, è possibile consultare la [[http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options#options|documentazione ufficiale]]. ===== Anagrafica metadati colonne ===== ^ Metadato ^ Valore ^ Default ^ Descrizione ^ | | | | ------- ===== Risoluzione problemi ===== {{:sviluppo:ris_problemi_jqgrid_01.png?nolink|}} 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. ------- ------- \\ | [[ tipi_di_elementi#Tipo_Elemento|Torna alla lista.]] || [[Lista Analitica|Vai alla Lista Analitica]] | \\ {{counter}} visualizzazioni.