Come istanziare una tabella con jqGrid
Fatte salve le importazioni nella pagina HTML di CSS e Javascript, le cui informazioni le trovate a questo indirizzo
http://www.trirand.com/jqgridwiki/doku. ... wiki:begin, ecco come collegare la jqGrid ad una classe JAVA che mette a disposizione un metodo pubblico appropriato (la chiamata avviene, in questo caso, attraverso Struts usando l'indirizzo di una action e passando come parametro il nome del metodo da eseguire):
Pagina JSP
Codice: Seleziona tutto
jQuery(function() {
jQuery("#cap").jqGrid({
datatype: 'local',
mtype: 'POST',
colNames: ['idCap', 'Codice', 'Località', '', ''],
colModel : [
{name: 'idCap', key: true, hidden:true},
{name: 'codice', index:'codice', align:'center', width: 45, editable:false, sortable: true},
{name: 'localita', index:'localita', align:'center', width: 300, editable:false, sortable: true},
{name: 'operation', width:20,sortable:false},
{name: 'space', width:20,sortable:false}
],
jsonReader : {
root: "list",
page: "page",
total: "total",
records: "records",
repeatitems: false},
viewrecords: true,
gridview: true,
recordpos: 'right',
scrollrows : true,
caption: 'Risultato ricerca cap',
pager: '#pager_cap',
height: 'auto',
rownumbers: true,
rowNum: 10,
rowList: [10, 20, 50, 100],
gridComplete: function() {
var jqG = jQuery("#cap");
var ids = jqG.jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++) {
// Inserisco una icona per la chiamata ad una funzione Javascript che poi effettuerà l'update del record nel DB
var idCap = encodeURIComponent(jqG.getCell(ids[i], 'idCap'));
var html = '<div style="float:left; padding: 1px" onclick="javascript: go_update(\'' + idMateriale + '\')"><div class="ui-icon-search"></div></div>';
jQuery("#cap").jqGrid('setRowData',ids[i],{operation: '<center>' + html + '</center>'});
}
},
onPaging: function(pgButton) {
/*
This event fires after click on [page button] and before populating the data.
Also works when the user enters a new page number in the page input box (and presses [Enter])
and when the number of requested records is changed via the select box. To this event we pass only
one parameter pgButton (string) which can be - first,last,prev,next in case of button click, records
in case when a number of requested rows is changed and user when the user change the number of the
requested page. If the string stop is returned from the function then the paging will be stopped.
*/
var myfilter = new Array();
var currentPage = jQuery('#cap').jqGrid('getGridParam','page');
var currentRowNum = jQuery("#cap").jqGrid('getGridParam', 'rowNum');
switch(pgButton) {
case 'first_pager_cap':
myfilter.push("method=ricercaCapJson&rows=" + currentRowNum + "&page=1");
break;
case 'last_pager_cap':
myfilter.push("method=ricercaCapJson&rows=" + currentRowNum + "&page=" + jQuery('#cap').jqGrid('getGridParam','lastpage'));
break;
case 'prev_pager_cap':
myfilter.push("method=ricercaCapJson&rows=" + currentRowNum + "&page=" + (parseInt(currentPage)));
break;
case 'next_pager_cap':
myfilter.push("method=ricercaCapJson&rows=" + currentRowNum + "&page=" + (parseInt(currentPage)));
break;
default:
myfilter.push("method=ricercaCapJson&rows=" + currentRowNum + "&page=" + currentPage);
break;
}
myfilter.push(jQuery(".campi_ricerca").serialize());
jQuery("#cap").jqGrid('setGridParam',{
datatype: 'json',
url:"${pageContext.request.contextPath}/ajaxServer/display.do?" + myfilter.join("&")
}).trigger("reloadGrid");
}
});
jQuery("#gbox_cap").css("margin", "0 auto");
});
function cercaCap() {
var myfilter = new Array();
var currentRowNum = jQuery("#cap").jqGrid('getGridParam', 'rowNum');
myfilter.push("method=ricercaCapJson&page=1");
myfilter.push(jQuery(".campi_ricerca").serialize()); // Class dei campi da usare come ricerca o che vanno passati alla request
jQuery("#cap").jqGrid('setGridParam', {
datatype: 'json',
url: "${pageContext.request.contextPath}/ajaxServer/display.do?" + myfilter.join("&")
}).trigger("reloadGrid");
}
function go_update(idCap) {
// Chiamata ad un metodo che fa l'aggiornamento del CAP
}
Gli eventuali campi da usare come ricerca vanno definiti nella form html dando loro come class il valore "campi_ricerca"
JAVA
La action chiamata dalla URI /ajaxServer/display.do è stata implementata nella classe DisplayAction.java dove è presente il metodo ricercaCapJson.
Codice: Seleziona tutto
// Metodo per la ricerca dei CAP da passare ad una vista JQGrid
@SuppressWarnings("unchecked")
public ActionForward ricercaCapJson(ActionMapping actionMapping,
ActionForm actionForm, HttpServletRequest request,
HttpServletResponse response) throws Exception {
String rowsReq = (String) request.getParameter("rows");
String pageReq = (String) request.getParameter("page");
String sortColumnReq = (String) request.getParameter("sidx");
String sortDirectionReq = (String) request.getParameter("sord");
Writer writer = response.getWriter();
CapDelegate delegate = ProjectDelegateFactory.getInstance().getCapDelegate(); // Classe business che si occupa di interfacciarsi con il DB
if (rowsReq != null && pageReq != null) {
Integer rows = Integer.parseInt(rowsReq);
Integer page = Integer.parseInt(pageReq);
int recordInit = rows * (page - 1);
String orderField = null;
if(sortColumnReq != null && !sortColumnReq.equals("") && sortDirectionReq != null && !sortDirectionReq.equals("")) {
orderField = "[{\"fieldName\": \"" + sortColumnReq + "\", \"sortType\": \"" + sortDirectionReq + "\"}]";
}
// Bean che rappresenta l'oggetto CAP (avrà i getter ed i setter per gestire i campi della tabella CAP del DB)
CapBean cap = new CapBean();
// Utile ad effettuare una eventuale ricerca. Nella parte business se codice è valorizzato viene eseguita una "where codice like "
String codice = (String) request.getParameter("codMateriale");
if (codice != null && !codice.equals(""))
cap.setCodice(codice);
// Metodo business che esegue una query "select from cap where ... order by ... offset ... limit ..."
PaginatedList pList = delegate.searchCapPaginated(cap, orderField, recordInit, rows);
// Conversione dell'oggetto in JSON da inviare come risposta della richiesta
ElementiGrid<CapBean> elencoCap = new ElementiGrid<CapBean>();
elencoCap.setList(pList.getList());
elencoCap.setPage(page);
elencoCap.setRecords(pList.getRecordsNumber());
int pagTotali = pList.getRecordsNumber() / rows;
if(pList.getRecordsNumber() % rows > 0)
pagTotali += 1;
elencoCap.setTotal(pagTotali);
JsonConfig jsonConfig = new JsonConfig();
JSONObject jsonObject = JSONObject.fromObject(elencoCap, jsonConfig);
writer.write(jsonObject.toString());
}
return null;
}
