He intentado implementar la interfaz "Custom Edit" (http://trirand.com/blog/jqgrid/jqgrid.html) que aparece como ejemplo en la pagina del Framework. En vez de usar buttons he probado a usar Imagebuttons, pero ese no es el problema por el que no funciona.
Por ejemplo los datos pertenecientes a E-mail se cargan en la columna anterior (Telefono) y así con todas las columnas. Si elimino la columna que he añadido posteriormente (Acciones) los datos se muestran correctamente.
Por mas que repaso el codigo no doy con el porque, a ver si podeis sacarme de este atasco del que no soy capaz de salir.
El siguiente codigo se encarga de pintar el grid de jqGrid y la pagina en general.
Codigo ListadoClientes.jsp
Código HTML:
<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listado de clientes</title> <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.6.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/grid.locale-es.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> $().ready(function() { var windowWidth = (document.documentElement.clientWidth - 100) /1.2; jQuery("#gridClientes").jqGrid( { url:'getCustomerGrid.jsp', datatype: "json", colNames:['Codigo','Nombre','Apellidos','Dirección','Teléfono','E-mail','Mierda'], colModel: [ {name:'id',index:'codcli', width:10, hidden:true}, {name:'Nombre1',index:'nomcli1', width:150}, {name:'Apellidos',index:'apecli', width:150}, {name:'Dirección',index:'dircli', width:150}, {name:'Teléfono',index:'telcli', width:150}, {name:'E-mail',index:'emailcli', width:150}, {name:'Mierda',index:'apecli', width:150}, ], rowNum:10, rowList:[10,20,30], multiselect: false, pager: '#pagGrid', sortname: 'codcli', viewrecords: true, sortorder: "desc", editurl: "getCustomerGrid.jsp", width: windowWidth, height: "100%", // nSelectRow: subGridReferenciasImagenes, caption:"Clientes" }); jQuery("#gridClientes").jqGrid('navGrid','#pagGrid',{edit:false,add:false,del:false}); }); </script> </head> <body style="background: #121212"> <div id="Encabezado" class="ui-layout-north" style="padding:0px; background:#ccc"> <div style="float:left;width: 100%; background:#9bd252; border :0px solid #ccc; height:55px"> <div class="tituloheaderLogin" style="color:#1a1a1a; padding:20px; text-align: center; font-family: sans-serif; font-weight: bold" > Listado de clientes </div> </div> <div class="topBar" style="background:#1c1c1c;"> </div> </div> <div id="LeftPane" class="ui-layout-west ui-widget ui-widget-content" > <table id="west-grid"></table> </div> <!-- #LeftPane --> <div id="RightPane" class="ui-layout-center ui-helper-reset ui-widget-content" ><!-- Tabs pane --> <div id="switcher"></div> <div id="tabs" class="jqgtabs"> <ul></ul> </div> <div id="LogoPanel" style="width:90%; border:0px solid #000;margin-left:10%; margin-top:2%; text-align:center; "> <table id="gridClientes"></table> <div id="pagGrid"></div> </div> </div> <!-- #RightPane --> </body> </html>
codigo getCustomerGrid
Código HTML:
<%@page import="java.sql.*" %> <%@page import="classes.Conexion" %> <% int start=0; int total=0; int total_pages=0; int intpage = new Integer(request.getParameter("page")); int limit = new Integer(request.getParameter("rows")); String sidx = request.getParameter("sidx"); String sord = request.getParameter("sord"); String strQuery=""; String json =""; boolean rc; ResultSet rs = null; if(sidx =="") { sidx ="1"; } /*-----------------------------------Conexión a la base de datos MySQL-------------------------------------------*/ Conexion conexiondb = new Conexion(); conexiondb.Inicializar(); conexiondb.Conectar(); /*-----------------------------------------------------------------------------------------------------------*/ total = conexiondb.countRec("codcli", "cliente"); if(total>0) { double d = Math.ceil((double)(total) / (double)(limit)); total_pages = (int)(d); } else { total_pages = 0; } if (intpage > total_pages) { intpage=total_pages; } start = limit * intpage - limit; if(start < 0) { start = 0; } strQuery = "SELECT * FROM cliente ORDER BY " + sidx + " " + sord + " LIMIT " + start + " , " + limit; System.out.println(strQuery); rs = conexiondb.Consulta(strQuery); total = conexiondb.countRec("codcli", "cliente"); response.setContentType("text/x-json"); response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache, must-revalidate"); response.setHeader("Pragma", "no-cache"); json = ""; json = json + "{\n"; json = json + " \"page\":\"" + intpage + "\",\n"; json = json + "\"total\":" + total_pages + ",\n"; json = json + "\"records\":" + total + ",\n"; json = json + "\"rows\": ["; rc = false; while(rs.next()) { if(rc) { json = json + ","; } json = json + "\n{"; json = json + "\"id\":\""+rs.getInt("codcli")+"\","; json = json + "\"cell\":["+rs.getInt("codcli")+""; json = json + ",\""+rs.getString("nomcli")+"\""; json = json + ",\""+rs.getString("apecli")+"\""; json = json + ",\""+rs.getString("dircli")+"\""; json = json + ",\""+rs.getString("telcli")+"\""; json = json + ",\""+rs.getString("emailcli")+"\"]"; json = json + "}"; rc=true; } json = json +"]\n"; json = json +"}"; out.print(json); out.close(); %>
