giGrid

giCombo

Download

download
gigrid.zip (69 KB)

GI Grid

GiGrid è un custom widget per JQuery che fornisce un controllo GRID da poter facilmente includere nelle proprie applicazioni.
Il widget è stato scritto e testato con JQuery 1.12.4 e JQuery UI 1.12.1.

Le principali caratteristiche sono:

  • autogenerazione delle colonne;
  • definizione delle colonne e della struttura dei dati con impostazione delle formattazione;
  • colonne e righe ridimensionabili dall'utente;
  • risoluzione automatica delle reference alle anagrafiche;
  • filtro dei dati;
  • impaginazione;
  • ordinamento delle righe;
  • editing dei dati (inserimento, modifica e cancellazione);
  • selezione singola e multipla delle righe;
  • visualizzazione in modalità Data Form;

Uso:

$("selettore").giGrid({opzioni});

Opzioni:

rows Array JSON contenente i dati della griglia da visualizzare;

es.

[
{ "nome": "Paolo", "cognome": "Parente", "sesso": "M", "dataN": "1986-05-02T00:00:00",
"LocN": 12, "livello": 5, "ral": 25000.00, "rsu": false }
,...
]
header imposta la struttura delle colonne.
Caption: il testo dell'intestazione della colonna; field: il campo del JSON; type: il tipo di dato (string, datetime, int, real, bool, ref, img); midWidth: la larghezza minima della colonna; align: l'allineamento del testo.
Il tipo datetime è previsto nel formato ISO 8601 (yyyy-mm-ddThh:mm:ss[.mmm]) o nel formato datetime json (\/Date(1502356881547)\/)
e prevede un ulteriore campo format per la formattazione;
Per i nuovi inserimenti è possibile impostare i campi iso e utc per sceglire il formato della data;
Nel caso di datetime nel formato ISO 8601 la presenza del carattere Z (yyyy-mm-ddThh:mm:ss[.mmm]Z) indica di trattare il dato come datetime UTC.
Il tipo real prevede un ulteriore campo sep per l'impostazione del carattere usato come separatore decimale in visualizzazione, due ulteriori campi: min e max e il campo culture per la modalita editing (culture:'it-IT');
Il tipo img prevede un ulteriore campo imgInfo : {"width":"16", "height":"16", "onclik":img_click};
Il tipo int prevede due ulteriori campi: min e max;

es.

[
{ "caption": "Nome", "field": "nome", "type": "string", "minWidth": "100px", "align": "left" }
,...
]
anagrafica array JSON contente l'anagrafica a cui i dati della griglia fanno riferimento;

es.

var struttura = [ { "caption": "Sesso", "field": "sesso", "type": "ref:AnagSesso", "minWidth": "50px", "align": "center" } ];

var AnagSesso = [{ label: "Maschio", value: "M" }, { label: "Femmina", value: "F" }];

$("selettore").giGrid({
rows: dati
,header: struttura
,AnagSesso: AnagSesso
});

sort proprietà che impostata a true attiva l'ordinamento automatico della griglia;

es.

$("selettore").giGrid({
rows: dati
,sort: true
});

filter imposta il filtro;

es.

$("selettore").giGrid("option", { filter: [{field:"sesso", value:'M'}, {field:"LocN", value:'354'}] });

$("selettore").giGrid("refresh");

edit attiva la modalità edit; l'opzione editConfig configura la modalità edit: add - permette l'aggiunta di righe; edit - permette la modifica, del - permette la cancellazione; onsave - permette di impostare una funzione di validazione (return true o false) che riceverà l'oggetto modificato come argomento e una variabile che indica il tipo di operazione (add, edit e del).
L'opzione editTooltip permette di impostare i tooltip delle icone.

es.

$("selettore").giGrid({
rows: dati
,edit: true
,editConfig: {
  add: true, edit: true, del: true, onsave: function (obj, op) {
   switch (op)
   {
   case "add":
   ...
   break;
   case "edit":
   ...
   break;
   case "del":
   ...
   break;
  }
  return ...// true o false;
  }
 }
,editTooltip: {add:'aggiungi', edit:'modifica', del:'cancella', cancel:'annulla', save:'salva'}
,cellspacing: 0
,cellpadding: 5
});

selectable attiva la selezione della riga. Tramite la proprietà selectableConfig sarà possibile impostare la gestione dell'evento onselected;

es.

$("selettore").giGrid({
rows: dati
,selectable: true
,selectableConfig: { onselected: function(pos){ ... }, multiselect:false }
});

dataForm attiva la visualizzazione in modalità Data Form;

es.

$("selettore").giGrid({
rows: dati
,header: struttura
,dataForm:true
,dataFormConfig: {widthColLabel:"100px", widthColData:"200px"}
,edit:true
,...
});

cellspacing distanza in pixel tra le celle;

es.

$("selettore").giGrid({
rows: dati
,cellspacing: 0
,cellpadding: 5
});

cellpadding distanza in pixel tra il contenuto e il bordo della cella;

es.

$("selettore").giGrid({
rows: dati
,cellspacing: 0
,cellpadding: 5
});

resizeHeader impostata a true permette il ridimensionamento delle colonne;

es.

$("selettore").giGrid({
rows: dati
,resizeHeader: true
});

resizeRows impostata a true permette il ridimensionamento delle righe;

es.

$("selettore").giGrid({
rows: dati
,resizeRows: true
});

rowsPage imposta il numero di righe per pagina;

es.

$("selettore").giGrid({
,rows: dati
,rowsPage: 5
,showPager: true
});

showPager impostata a true visualizza i controlli per la navigazione tra le pagine;

es.

$("selettore").giGrid({
rows: dati
,rowsPage: 5
,showPager: true
});

labelPager Permette di impostare i tooltip dei controlli per la navigazione tra le pagine;

es.

$("selettore").giGrid({
rows: dati
,rowsPage: 5
,showPager: true
,labelPager: {"first":"Prima pagina", "previous":"Pagina precedente", "next":"Pagina successiva", "last":"Ultima pagina", "pag":"Pag.", "of":"di"}
});

Metodi:

destroy elimina il controllo dalla pagina;

es.

$("selettore").giGrid("destroy");

option permette di impostare/prelevare le opzioni successivamente alla fase di inizializzazione;

es.

$("selettore").giGrid("option", {resizeHeader:false});
$("selettore").giGrid("refresh");

goPage permette di fare visualizzare la griglia il contenuto di una determinata pagina;

es.

$("selettore").giGrid("goPage", 2);

getRows permette di estrarre i dati della griglia;

es.

console.log($("selettore").giGrid("getRows"));

refresh ridisegna la griglia;

es.

$("selettore").giGrid("refresh");

sort ordina la griglia in base al field passato come argomento;

es.

// ordina per il campo nome in modo crescente
$("selettore").giGrid("sort", "nome");

// la chiamata successiva ordina per il campo nome in modo decrescente
$("selettore").giGrid("sort", "nome");

// la chiamata successiva disattiva l'ordinamento
$("selettore").giGrid("sort", "nome");

delRow cancella la riga della tabella ad una determinata posizione (base 0);

es.

// cancella la 2 riga!
$("selettore").giGrid("delRow", 1);

editRow imposta la modalità edit di una determinata riga (è richiesta l'opzione Edit=true) - indice a base 0;

es.

// edit della 2 riga!
$("selettore").giGrid("editRow", 1);

newRow inserisce una nuova riga dopo la posizione passata come argomento(è richiesta l'opzione Edit=true) - indice a base 0;

es.

// insert nuova riga in modalità edit dopo la 2 riga!
$("selettore").giGrid("newRow", 1);

selectedIndex imposta o restituisce la riga selezionata - indice a base 0; se sono selezionati più elementi (multiselect:true) verrà restituito un array di indici.

es.

// imposta la riga selezionata
$("selettore").giGrid("selectedIndex", 0);
// legge la riga selezionata
alert($("selettore").giGrid("selectedIndex"));
// deseleziona la prima riga in una selezione multiselect
$("selettore").giGrid("selectedIndex", 0, false);

Esempi

Griglia solo con dati grezzi (colonne auto generate)

Esempio: 
 
        var dati = [
            , { "nome": "Paolo", "cognome": "Parente", "sesso": "M", "dataN": "1986-05-02T00:00:00", 
                "LocN": 12, "livello": 5, "ral": 25000.00, "rsu": false }
            , { "nome": "Pietro", "cognome": "Pisa", "sesso": "M", "dataN": "1975-11-09T00:00:00", 
                "LocN": 354, "livello": 6, "ral": 30450.70, "rsu": true }
        ];

        $("#GrigliaDati").giGrid({
            rows:dati 
            ,cellspacing: 0
            , cellpadding: 5
            , resizeHeader: true
            ,resizeRows: true
        });
Risultato:

Griglia con colonne definite

Esempio: 
 
        var dati = [
            , { "nome": "Paolo", "cognome": "Parente", "sesso": "M", "dataN": "1986-05-02T00:00:00", 
                "LocN": 12, "livello": 5, "ral": 25000.00, "rsu": false }
            , { "nome": "Pietro", "cognome": "Pisa", "sesso": "M", "dataN": "1975-11-09T00:00:00", 
                "LocN": 354, "livello": 6, "ral": 30450.70, "rsu": true }
        ];

        var struttura = [
            { "caption": "Nome", "field": "nome", "type": "string", "minWidth": "100px", "align": "left" }
            , { "caption": "Cognome", "field": "cognome", "type": "string", "minWidth": "100px", "align": "left" }
            , { "caption": "Sesso", "field": "sesso", "type": "ref:AnagSesso", "minWidth": "50px", "align": "center" }
            , { "caption": "Data di Nascita", "field": "dataN", "type": "datetime", "format": "d/m/y", "minWidth": "100px", "align": "center" }
            , { "caption": "Località di Nascita", "field": "LocN", "type": "ref:AnagLoc", "minWidth": "100px", "align": "left" }
            , { "caption": "Liv.", "field": "livello", "type": "int", "minWidth": "30px", "align": "center" }
            , { "caption": "R.A.L.", "field": "ral", "type": "real", "sep": ",", "minWidth": "100px", "align": "right" }
            , { "caption": "R.S.U.", "field": "rsu", "type": "bool", "minWidth": "50px", "align": "center" }
        ];

        var AnagSesso = [{ label: "Maschio", value: "M" }, { label: "Femmina", value: "F" }];
        var AnagLoc = [{ label: "Roma", value: "354" }, { label: "Napoli", value: "12" }, { label: "Firenze", value: "150" }];


        $("#GrigliaDati2").giGrid({
                rows: dati
                , header: struttura
                , AnagSesso: AnagSesso
                , AnagLoc: AnagLoc
                 , resizeHeader: true
            , cellspacing: 0
            , cellpadding: 5
            });
Risultato:

Griglia con impaginazione

Esempio: 
 
        var dati = [
            , { "nome": "Paolo", "cognome": "Parente", "sesso": "M", "dataN": "1986-05-02T00:00:00", 
                "LocN": 12, "livello": 5, "ral": 25000.00, "rsu": false }
            , { "nome": "Pietro", "cognome": "Pisa", "sesso": "M", "dataN": "1975-11-09T00:00:00", 
                "LocN": 354, "livello": 6, "ral": 30450.70, "rsu": true }
        ];

        var struttura = [
            { "caption": "Nome", "field": "nome", "type": "string", "minWidth": "100px", "align": "left" }
            , { "caption": "Cognome", "field": "cognome", "type": "string", "minWidth": "100px", "align": "left" }
            , { "caption": "Sesso", "field": "sesso", "type": "ref:AnagSesso", "minWidth": "50px", "align": "center" }
            , { "caption": "Data di Nascita", "field": "dataN", "type": "datetime", "format": "d/m/y", "minWidth": "100px", "align": "center" }
            , { "caption": "Località di Nascita", "field": "LocN", "type": "ref:AnagLoc", "minWidth": "100px", "align": "left" }
            , { "caption": "Liv.", "field": "livello", "type": "int", "minWidth": "30px", "align": "center" }
            , { "caption": "R.A.L.", "field": "ral", "type": "real", "sep": ",", "minWidth": "100px", "align": "right" }
            , { "caption": "R.S.U.", "field": "rsu", "type": "bool", "minWidth": "50px", "align": "center" }
        ];

        var AnagSesso = [{ label: "Maschio", value: "M" }, { label: "Femmina", value: "F" }];
        var AnagLoc = [{ label: "Roma", value: "354" }, { label: "Napoli", value: "12" }, { label: "Firenze", value: "150" }];

         $("#GrigliaDati3").giGrid({
                rows: dati
             , header: struttura
             , AnagSesso: AnagSesso
             , AnagLoc: AnagLoc
             , resizeHeader: true
             , cellspacing: 0
             , cellpadding: 5
             ,rowsPage: 5
             ,showPager: true
             , labelPager: {"first":"Prima pagina", "previous":"Pagina precedente", "next":"Pagina successiva", 
                            "last":"Ultima pagina", "pag":"Pag.", "of":"di"}
            });
Risultato:

Pagina:

Filtraggio della Griglia

Esempio: 

            var dati = [
            , { "nome": "Paolo", "cognome": "Parente", "sesso": "M", "dataN": "1986-05-02T00:00:00", 
            "LocN": 12, "livello": 5, "ral": 25000.00, "rsu": false }
            , { "nome": "Pietro", "cognome": "Pisa", "sesso": "M", "dataN": "1975-11-09T00:00:00", 
            "LocN": 354, "livello": 6, "ral": 30450.70, "rsu": true }
            ];

            var struttura = [
                { "caption": "Nome", "field": "nome", "type": "string", "minWidth": "100px", "align": "left" }
                , { "caption": "Cognome", "field": "cognome", "type": "string", "minWidth": "100px", "align": "left" }
                , { "caption": "Sesso", "field": "sesso", "type": "ref:AnagSesso", "minWidth": "50px", "align": "center" }
                , { "caption": "Data di Nascita", "field": "dataN", "type": "datetime", "format": "d/m/y", "minWidth": "100px", "align": "center" }
                , { "caption": "Località di Nascita", "field": "LocN", "type": "ref:AnagLoc", "minWidth": "100px", "align": "left" }
                , { "caption": "Liv.", "field": "livello", "type": "int", "minWidth": "30px", "align": "center" }
                , { "caption": "R.A.L.", "field": "ral", "type": "real", "sep": ",", "minWidth": "100px", "align": "right" }
                , { "caption": "R.S.U.", "field": "rsu", "type": "bool", "minWidth": "50px", "align": "center" }
            ];

            var AnagSesso = [{ label: "Maschio", value: "M" }, { label: "Femmina", value: "F" }];
            var AnagLoc = [{ label: "Roma", value: "354" }, { label: "Napoli", value: "12" }, { label: "Firenze", value: "150" }];



           $("#GrigliaDati4").giGrid({
           rows: dati
           , header: struttura
           , AnagSesso: AnagSesso
           , AnagLoc: AnagLoc
           , resizeHeader: true
           , cellspacing: 0
           , cellpadding: 5
           , rowsPage: 5
           , showPager: true
           , labelPager: { "first": "Prima pagina", "previous": "Pagina precedente",
                             "next": "Pagina successiva", "last": "Ultima pagina", "pag": "Pag.", "of": "di" }
            });

            $("#cboSesso").giCombo({ data: AnagSesso, emptyElement: { label: "", value: "-1" } });
            $("#cboLocalita").giCombo({ data: AnagLoc, emptyElement: { label: "", value: "-1" } });

            function ImpostaFiltro(fieldName, v)
            {
                var filtri = $("#GrigliaDati4").giGrid("option", "filter");

                filtri = RimuoviFiltro(filtri, fieldName);

                if (v != null && v != "" && v != "-1") {
                    filtri.push({ field: fieldName, value: v });
                }

                $("#GrigliaDati4").giGrid("option", { filter: filtri });
                $("#GrigliaDati4").giGrid("refresh");
            }

            $("#cboSesso").on("change", function () {
                var v= $(this).val();
                ImpostaFiltro("sesso", v);
            });


            $("#cboLocalita").on("change", function () {
                var v = $(this).val();
                ImpostaFiltro("LocN", v);
            });
Risultato:
Sesso:
Località:

Griglia con immagini

Esempio: 
            var strutturaImg = [
                    { "caption": "Pagina", "field": "pagina", "type": "string", "minWidth": "100px", "align": "left" }
                ,{ "caption": "", "field": "urlEditImg", "type": "img", "imgInfo":{"width":"16", "height":"16", 
                                                        "onclik":img_click},  "minWidth": "40px", "align": "center" }
            ];

            var datiImg = [{ pagina: "indice.htm", urlEditImg: "images/EditTableHS.png" }
                , { pagina: "Autore.htm", urlEditImg: "images/EditTableHS.png" }
                ,{ pagina: "Licenza.htm", urlEditImg: "images/EditTableHS.png" }
            ];

            function img_click(indice)
            {
                var ar= $("#GrigliaDati5").giGrid("getRows");

                alert(ar[indice].pagina);
            }

            $("#GrigliaDati5").giGrid({rows:datiImg, header:strutturaImg});
Risultato:

Griglia con ordinamento

Esempio: 
             
            var dati = [
            , { "nome": "Paolo", "cognome": "Parente", "sesso": "M", "dataN": "1986-05-02T00:00:00", 
            "LocN": 12, "livello": 5, "ral": 25000.00, "rsu": false }
            , { "nome": "Pietro", "cognome": "Pisa", "sesso": "M", "dataN": "1975-11-09T00:00:00", 
            "LocN": 354, "livello": 6, "ral": 30450.70, "rsu": true }
            ];

            var struttura = [
                { "caption": "Nome", "field": "nome", "type": "string", "minWidth": "100px", "align": "left" }
                , { "caption": "Cognome", "field": "cognome", "type": "string", "minWidth": "100px", "align": "left" }
                , { "caption": "Sesso", "field": "sesso", "type": "ref:AnagSesso", "minWidth": "50px", "align": "center" }
                , { "caption": "Data di Nascita", "field": "dataN", "type": "datetime", "format": "d/m/y", "minWidth": "100px", "align": "center" }
                , { "caption": "Località di Nascita", "field": "LocN", "type": "ref:AnagLoc", "minWidth": "100px", "align": "left" }
                , { "caption": "Liv.", "field": "livello", "type": "int", "minWidth": "30px", "align": "center" }
                , { "caption": "R.A.L.", "field": "ral", "type": "real", "sep": ",", "minWidth": "100px", "align": "right" }
                , { "caption": "R.S.U.", "field": "rsu", "type": "bool", "minWidth": "50px", "align": "center" }
            ];

            var AnagSesso = [{ label: "Maschio", value: "M" }, { label: "Femmina", value: "F" }];
            var AnagLoc = [{ label: "Roma", value: "354" }, { label: "Napoli", value: "12" }, { label: "Firenze", value: "150" }];


            $("#GrigliaDati6").giGrid({
            rows: dati
            ,sort:true
            , header: struttura
            , AnagSesso: AnagSesso
            , AnagLoc: AnagLoc
            , cellspacing: 0
            , cellpadding: 5
            , rowsPage: 5
            , showPager: true
            , labelPager: { "first": "Prima pagina", "previous": "Pagina precedente", "next": 
                            "Pagina successiva", "last": "Ultima pagina", "pag": "Pag.", "of": "di" }
            });
Risultato:

Griglia in modalità Edit (modifica, inserimento e cancellazione)

Esempio: 
            $("#GrigliaDati7").giGrid({
            rows: dati
            , edit: true
            , editConfig: {
                add: true, edit: true, del: true, onsave: function (obj, op) {

                    var ret = false;
                    switch (op)
                    {
                        case "add":
                        	ret = true;
                            if (obj.nome == null || obj.nome.length == 0)
                            {
                                alert("nome obbligatorio!");
                                ret = false;
                            }
                            break;
                            
                        case "edit":
                            ret = true;
                            if (obj.nome == null || obj.nome.length == 0)
                            {
                                alert("nome obbligatorio!");
                                ret = false;
                            }
                            break;
                        case "del":
                            ret= confirm("cancellazione di " + obj.nome + " " + obj.cognome + "?");
                            break;
                    }

                    return ret;
                }
            }
            ,editTooltip: {add:'aggiungi', edit:'modifica', del:'cancella', cancel:'annulla', save:'salva'}
            , header: struttura
            , AnagSesso: AnagSesso
            , AnagLoc: AnagLoc
            , cellspacing: 0
            , cellpadding: 5
            , rowsPage: 5
            , showPager: true
            , labelPager: { "first": "Prima pagina", "previous": "Pagina precedente", 
            	"next": "Pagina successiva", "last": "Ultima pagina", "pag": "Pag.", "of": "di" }
        	});
Risultato:

Griglia con righe selezionabili

Esempio: 
            
            $("#GrigliaDati8").giGrid({
                rows: dati
                , selectable: true
                , selectableConfig: { 
                	onselected: function (pos) {
                		var rg= $("#GrigliaDati8").giGrid("getRows");
                		var obj= rg[pos];
                		var lbl= $("#lblSelezionato");
                		
                		lbl.html("Hai selezionato: " + obj.nome + " " + obj.cognome + "");

                    }
                }
                , header: struttura
                , AnagSesso: AnagSesso
                , AnagLoc: AnagLoc
                , cellspacing: 0
                , cellpadding: 5
                , rowsPage: 5
                , showPager: true
                , labelPager: { "first": "Prima pagina", "previous": "Pagina precedente", 
                	"next": "Pagina successiva", "last": "Ultima pagina", "pag": "Pag.", "of": "di" }
            });
Risultato:

 
 
 
 

Griglia con righe selezionabili (multiselect)

Esempio: 
             $("#GrigliaDati9").giGrid({
                rows: dati
                , selectable: true
                , selectableConfig: { 
                	multiselect:true
                }
                , header: struttura
                , AnagSesso: AnagSesso
                , AnagLoc: AnagLoc
                , cellspacing: 0
                , cellpadding: 5
                , rowsPage: 5
                , showPager: true
                , labelPager: { "first": "Prima pagina", "previous": "Pagina precedente", 
                	"next": "Pagina successiva", "last": "Ultima pagina", "pag": "Pag.", "of": "di" }
            });
Risultato:

Griglia con colonne a larghezza fissa

Esempio: 
             $("#GrigliaDati10").giGrid({
                rows: datiOptions
                ,header:[{caption:"Key", field:"key", width:"100px"},
                         {caption:"Descrizione", field:"desc", width:"400px"}]
                , cellspacing: 0
                , cellpadding: 5
               
            });
            
            
            $("#SetLarghezza").slider({
                value: 400,  orientation: 'horizontal', min: 150, max: 700
                , slide: function (event, ui)
                {
                	var header= $("#GrigliaDati10").giGrid("option", "header");
                	header[1].width=  ui.value + "px";
                	$("#lblLarghezza").text(header[1].width);
                	
                	$("#GrigliaDati10").giGrid("refresh");
                	
                }
                
            });
Risultato:
 

 

Data Form

Esempio: 
             $("#GrigliaDati11").giGrid({
                rows: dati
                , header: struttura
                , dataForm:true
                , dataFormConfig: {widthColLabel:"100px", widthColData:"200px"}
                ,edit:true
                , editConfig: {
                    add: true, edit: true, del: true, onsave: function (obj, op) {

                        var ret = false;
                        switch (op)
                        {
                            case "add":
                            	ret = true;
                                if (obj.nome == null || obj.nome.length == 0)
                                {
                                    alert("nome obbligatorio!");
                                    ret = false;
                                }
                                break;
                                
                            case "edit":
                                ret = true;
                                if (obj.nome == null || obj.nome.length == 0)
                                {
                                    alert("nome obbligatorio!");
                                    ret = false;
                                }
                                break;
                            case "del":
                                ret= confirm("cancellazione di " + obj.nome + " " + obj.cognome + "?");
                                break;
                        }

                        return ret;
                    }
                }
                ,editTooltip: {add:'aggiungi', edit:'modifica', del:'cancella', cancel:'annulla', save:'salva'}
                , AnagSesso: AnagSesso
                , AnagLoc: AnagLoc
                , cellspacing: 0
                , cellpadding: 5
                 , labelPager: { "first": "Prima pagina", "previous": "Pagina precedente", 
                 	"next": "Pagina successiva", "last": "Ultima pagina", "pag": "Pag.", "of": "di" }
            });
Risultato:

GI Combo

GiCombo è un custom widget per JQuery che consente di popolare una combo con una determinata anagrafica.
Il widget è stato scritto e testato con JQuery 1.12.4 e JQuery UI 1.12.1.

Uso:

$("selettore").giCombo({opzioni});

Opzioni:

data associa la combo all'array di dati contenente l'anagrafica.

es.

var AnagSesso = [{ label: "Maschio", value: "M" }, { label: "Femmina", value: "F" }];

$("#cboSesso").giCombo({ data: AnagSesso});

emptyElement imposta l'elemento per la selezione vuota.

es.

var AnagSesso = [{ label: "Maschio", value: "M" }, { label: "Femmina", value: "F" }];

$("#cboSesso").giCombo({ data: AnagSesso, emptyElement: { label: "", value: "-1" }});

Metodi:

destroy elimina il controllo dalla pagina;

es.

$("selettore").giCombo("destroy");

option permette di impostare/prelevare le opzioni successivamente alla fase di inizializzazione;

es.

$("selettore").giCombo("option", {data: AnagSesso});
$("selettore").giCombo("refresh");

refresh ricarica la combo;

es.

$("selettore").giCombo("refresh");

Esempi

Combobox in relazione

Esempio: 
 
       
            var regioni = [{ label: "Campania", value: "1" }, { label: "Lazio", value: "2" }];
            var provincie = [
                        { label: "Avellino", value: "1", parent: "1" }, { label: "Benevento", value: "2", parent: "1" }
                        , { label: "Caserta", value: "3", parent: "1" }, { label: "Napoli", value: "4", parent: "1" }
                        , { label: "Salerno", value: "5", parent: "1" }, { label: "Frosinone", value: "6", parent: "2" }
                        , { label: "Latina", value: "7", parent: "2" }, { label: "Rieti", value: "8", parent: "2" }
                        , { label: "Roma", value: "9", parent: "2" }, { label: "Viterbo", value: "10", parent: "2" }
                        ];
          
            $("#cboProvincie").giCombo({data:[], emptyElement:{label:"", value:"-1"}});
            $("#cboRegione").giCombo({data:regioni, emptyElement:{label:"", value:"-1"}});
            $("#cboRegione").on("change", function(){
                var v= $("#cboRegione").val();
                
                if (v == null || v == "-1" || v == "") {
                    $("#cboProvincie").giCombo("option", "data", []);

                } else {

                    var ar = provincie.filter(function (o) {
                        return (o.parent == v);
                    });

                    $("#cboProvincie").giCombo("option", "data", ar);
                }

            });
Risultato:
Regione
Provincie

Autore: Giovanni Iacobelli
Data: Agosto 2017
$Ver:1.1


web:http://www.iacosoft.com
email: info@iacosoft.com

Testata su: Firefox e Internet Explorer
Compatibilità: tutti i browser

USO

La libreria puo' essere utilizzata a scopo didattico e per produrre proprio software di qualsiasi genere (persino commerciale) senza alcuna limitazione. Può essere utilizzata senza alcuna limitazione in propri siti web.

DISTRIBUZIONE

La libreria appartiena alla categoria FREEWARE. Ciò significa che puo' essere copiata e distribuita liberamente a patto che non venga venduta e che sia distribuita così come è, ovvero, senza alcuna modifica ed insieme a tutti gli altri file presenti nell'archivio zip. L'autore conserva sui sorgenti tutti i diritti e ne può fare tutto ciò che vuole (compreso venderli).

La libreria può essere liberamente distribuita dalle riviste d'informatica a patto che esse citino l'autore dei sorgenti e indicano il collegamento web del suo sito. E' gradita la comunicazione della pubblicazione.

Puo' essere liberamente distribuiti da siti WEB contenenti raccolte di sorgenti a patto che nella pagina del download venga inserita una didascalia che evidenzi la paternità dei file e un link al sito dell'autore. E' gradita la comunicazione della pubblicazione.

Non possono essere inclusi in propri pacchetti commerciali senza l'autorizzazione scritta dell'Autore. L'autore è Iacobelli Giovanni e il collegamento web del suo sito è http://www.iacosoft.com .