Qualche mese fa ho scritto un articolo su come creare in pochi semplici passi una griglia con jqgrid.
La potenza di jqGrid sta nel fornire allo sviluppatore la possibilità di scegliere quale strada seguire per la gestione dei dati, senza dover ricorrere ad ulteriori plugin o soluzioni completamente fuori standard.
Esistono due modalità di modifica ed aggiornamento dei dati:
Delle due, sebbene l’inline editing consenta una modifica on the fly del dato, ha lo svantaggio di non permettere una visione generale del dettaglio del record.
Affinchè jqGrid possa gestire la modalità form editing, bisogna impostare una serie di proprietà:
grid.jqGrid('navGrid', '#gridpager',
{
edit: true,
view: false,
add: false,
del: false,
search: false
},
sfruttando la proprietà “navGrid” si abilita il pulsante di modifica del dato, presente nella parte inferiore sinistra della griglia:
A questo punto, dobbiamo:
- definire il comportamento della finestra modale per la modifica dei dati
- indicare a jqGrid qual’è il path al metodo server side che debba gestire la richiesta di aggiornamento dei dati.
Proprietà editing dati in jqGrid
{
width: 700,
height: 400,
closeOnEscape: true,
editCaption: "Modifica",
bSubmit: "Salva",
bCancel: "Annulla",
bClose: "Chiudi",
saveData: "Sono state apportate delle modifiche, sei sicuro di voler continuare?",
bYes: "Si",
bNo: "No",
bExit: "Annulla",
viewPagerButtons: false,
closeAfterEdit: true,
reloadAfterSubmit: true,
editData: {
"Codice": function () {
var selectedRow = grid.getGridParam("selrow");
var rowData = grid.getRowData(selectedRow);
return rowData["Codice"];
}
},
afterShowForm: function($form) {
$form.css({overflow: 'scroll'});
}
},
Potete trovare il dettaglio del comportamento di ogni singola proprietà, all’interno della documentazione ufficiale di jqGrid.
E’ interessante sottolineare il significato della proprietà EditData, perchè consente di personalizzare i dati da inviare al metodo server side. Nel pezzo di codice riportato, ho scelto di inviare il “codice” del record da modificare, di modo da poter individuare univocamente l’entità sulla quale poi lavorare.
Impostare url metodo server per modifica dati in jqGrid
molto semplicemente, è sufficiente impostare il valore della proprietà editurl
editurl: 'path/to/SaveOrUpdate',
