Questo è il primo di una serie di post in cui spiegherò come creare una griglia che esponga dei dati letti da database e che consenta all’utente di modificarli tramite dei form creati ad hoc.
Il mondo IT è pieno di soluzioni ed alternative per poter raggiungere l’obiettivo prefissato, qui di seguito elenco le tecnologie, i frameworks ed i pluginsche ho scelto, partendo dal presupposto che si abbia una conoscenza di base di ognuna:
- .net framework
- asp.net { web forms }
- Entity Framework
- jQuery
- jQuery ui dialog
- jqGrid
Il primo passo è quello di estrarre i dati da database ed esporli nella griglia. Per farlo, dovremo creare un metodo server side per poter leggere i dati.
Affinandola nel corso del tempo, ho costruito una piattaforma software che, tramite il pattern Repository, mi consente di leggere (con poche righe di codice) i dati contenuti in una specifica tabella del nostro database.
Adesso dobbiamo agganciare la chiamata per instanziare la griglia:
grid.jqGrid({
// setup custom parameter names to pass to server
prmNames: {
search: "isSearch",
nd: null,
rows: "numRows",
page: "page",
sort: "sortField",
order: "sortOrder"
},
// add by default to avoid webmethod parameter conflicts
postData: {
searchString: '',
searchField: '',
searchOper: ''
},
// setup ajax call to webmethod
datatype: function (postdata) {
$.ajax({
url: '/path/to/GetMethod',
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(postdata),
dataType: "json",
success: function (data, st) {
if (data.d == "KO") {
grid.GridUnload();
dialogType.dialog("close");
return false;
}
if (st == "success") {
var grid = $("#grid")[0];
grid.addJSONData(JSON.parse(data.d));
ret = JSON.parse(data.d);
}
},
error: function (xhr, textStatus, errorThrown) {
jAlert("Si è verificato un errore: " + textStatus + " " + errorThrown + " -- " + $.parseJSON(xhr.statusText), "Book2Guest");
}
});
},
jsonReader: {
root: "rows",
page: "page",
total: "totalpages",
records: "totalrecords",
cell: "cell",
id: "id",
userdata: "userdata",
repeatitems: true
},
ajaxSelectOptions: {
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
data: {
rowId: function () {
if (JSON.stringify(grid.jqGrid('getRowData', grid.jqGrid('getGridParam', 'selrow'))['Codice']) == undefined)
return "";
return JSON.stringify(grid.jqGrid('getRowData', grid.jqGrid('getGridParam', 'selrow'))['Codice']);
}
}
},
loadui: "disable",
loadComplete: function () {
hideLoading();
},
loadError: function () {
hideLoading();
},
colNames: [ 'Codice', 'Titolo'],
colModel:
[
{ name: 'Codice', index: 'Codice', width: 22, align: 'center', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'Titolo', index: 'Titolo', width: 60, searchoptions: { sopt: ['eq', 'ne', 'cn'] } }
],
rowNum: 100,
rowList: [10, 20, 30],
height: 'auto',
pager: '#gridpager',
loadonce: false,
viewrecords: true,
shrinkToFit: false,
loadComplete: function () {
hideLoading();
},
loadError: function () {
hideLoading();
},
sortname: "ID",
sortorder: "desc",
caption: "Storico Ospiti",
onSelectRow: function (id, status) { },
ondblClickRow: function (rowid) { },
emptyDataText: 'Non ci sono record. '
});
grid.jqGrid('navGrid', '#gridpager',
{
edit: false,
view: false,
add: false,
del: false,
search: false
});
Nei prossimi articoli vedremo come attivare la funzionalità di editing della griglia e quali alternative ci offre jqGrid per poter consentire la modifica dei dati.
