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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
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.
Dillo ad un amico
