jQuery è un framework in grado di offrire un’ampia gamma di funzionalità per la manipolazione della proprie pagine web; questa libreria contiene una serie di metodi volti ad agevolare la vita del programmatore nella costruzione di effetti,transizioni,modifica stili e creazione interfacce utente user friendly.

Questo potente framework  è facilmente estendibile tramite plugin, ed è per questo che a mio parere ha riscosso un grande successo. Tra le novità che escono ogni giorno, oggi voglio presentarvi jqGrid, un add-in in grado di costruire un interfaccia grafica ed accattivante per la manipolazione e rappresentazione di dati tabulati sul web.  Tramite jqGrid saremmo in grado di creare tabelle e griglie, basate su moltitudine di sorgenti dati(mysql,xml,sqlserver,json) e di interagire aggiungendo,modificando e ricercando i nostri record. Vediamo un piccolo esempio, per la documentione ufficiale vi rimando alle demo:

jqGrid da XML:

Prerequisiti:


Configurazione:

  1. All’interno della cartella del proprio progetto copiare le due cartelle js e css dallo zip scaricato.
  2. All’interno della cartella css copiare il tema scaricato, nel mio caso ui-lightness.
  3. all’interno del progetto inserire il file xml che useremo come base dati, nel mio caso myxml.

Definizione pagina web:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Example</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

/*Inclusione javascript contenenti la libreria base e il plugin*/
 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-it.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
  $(document).ready(function(){
        $("#list").jqGrid
        ({
            /*Definizione path file xml*/
			url: 'myxml.xml',
            datatype: "xml",
            colNames:["Squadra","Giocate","Vinte","Perse","Pareggiate","Punti"],
            /*Definizione column Model,tutti i tipi disponibili li potete trovare qua:
			  trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter
			*/
			colModel :[
                          {name:'squadra', index:'squadra', width:100, search:true, xmlmap:"squadra"},
                          {name:'giocate', index:'giocate',width:100, xmlmap:"giocate"},
                          {name:'vinte', index:'vinte', width:100, xmlmap:"vinte"},
                          {name:'perse', index:'perse', width:100, xmlmap:"perse"},
                          {name:'pareggiate', index:'pareggiate', width:100, xmlmap:"pareggiate"},
                          {name:'punti', index:'punti', width:100, xmlmap:"punti"}
                      ],
            height:100,
            rowNum:10,
            rowList:[10,20,30],
            pager : '#gridpager',
            viewrecords: true,
            imgpath: 'css/ui-lightness/images',
            loadonce: true,
            xmlReader: {
                        /*radice del file xml*/
						root : "NewDataSet",
                        row: "Table",
                        repeatitems: false,
                        id: "squadra"
                        },
            sortorder: "punti",
            caption:'Classifica'
        });
		/*modulo di ricerca,occorre selezionare il modulo in fase di download del plugin*/
        $("#list").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch:"cn"});
    });
</script>

</head>
<body>
<center>
<!-- attraverso i relativi id, visualizzo la griglia -->
<table id="list"></table>
<div id="pager"></div>
</center>
</body>
</html>

Allego infine il progetto(jQgridExample) e vi invito a dare uno sguardo ad una piccola applicazione che utilizza jqGrid(LaStanza)

If you enjoyed this post, make sure you subscribe to my RSS feed!
Share

2 Responses to “jqGrid – creazione tabelle e griglie tramite jquery”

  1. 2
    cirio Says:

    @xavier: non c’è di che, è un ottimo plugin

  2. 1
    Xavier Says:

    Ottimo. Mi ha permesso di avviarmi. Grazie

Leave a Reply

You must be logged in to post a comment.