In applicativi web che devono mostrare grandi quantità di dati all’utente, è necessario curare bene le griglie apposite facendo attenzione ad aspetti come la necessità di paginazione e l’esposizione di comandi per attivare modifiche. Tutto ciò può essere fatto molto velocemente con un ottimo plugin jQuery: jsGrid.

Il plugin jsGrid richiede una versione di jQuery almeno pari alla 1.8.

Lo si può scaricare direttamente tramite apposito link, installarlo con Bower o ottenerlo dinamicamente mediante CDN:

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

Fatto ciò, è sufficiente integrarlo nella pagina HTML mediante un blocco div:

<div id="jsGrid"></div>

e configurarlo da codice Javascript seguendo le indicazioni fornite dalla documentazione:

<script>
    
 
    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",
 
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
      
       /*
        * OMISSIS: collegamenti a tutti i dati da usare
        */

    });
</script>

I dati pervengono alla nostra griglia formattati in JSON ed in questa epoca dominata dai servizi REST  è fondamentale curare bene l’integrazione con il backend: non a caso il sito del progetto contiene un’apposita sezione dedicata ad esempi di integrazione con le principali tecnologie server.

E’ possibile inoltre trarre vantaggio da una serie di casi d’uso che introducono l’utente gradualmente verso utilizzi sempre più avanzati.

Conoscevate già questo plugin? Come curate l’esposizione dei vostri dati nelle applicazioni web? Commentate e fateci sapere!