Dr0gNan on Row values do not correspond to column values

Tue, 23 Nov 2010 19:43:58 +0200

Hi, im newbie with JSP and JqGrid, sorry for my english, i use a web translator. I tried to implement the interface "Custom Edit" (http://trirand.com/blog/jqgrid.....qgrid.html) shown as examples in the Framework page. Instead of using buttons Imagebuttons've tried to use, but that's not the problem that does not work. For example, data pertaining to E-mail are loaded in the previous column (Phone) and so with all the columns. If I delete the column that I added later (Actions) data is displayed correctly. For more than review the code I can not find why, to see if you can get me out of this jam that I can not leave. The following code handles jqGrid paint the grid and the page in general.

ListadoClientes.jsp


<%@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>

The following code accesses to the database and load the values for display on the listing page.

getCustomerGrid.jsp


<%@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();
%>

Thank you for your help, greetings! 🙂

jQuery Grid Plugin - jqGrid - Topic: Row values do not correspond to column values

Dr0gNan on Row values do not correspond to column values