Buenas tardes a tod@s. Me encuentro desarrollando una aplicacion en JSP y he descubierto el framework de JqGrid.
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> El siguiente codigo accede a la BBDD y carga los valores para visualizarlos en la pagina de listado.
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();
%> Gracias a todos.