jQuery Grid Plugin – JSP

Estoy de regreso…

En los últimos 3 meses estuve trabajando en un proyecto, una aplicación web. Uno de los puntos fue la elección del Grid a utilizar para la visualización de datos.

Decidí utilizar jqGrid un plugin mas JQuery, en realidad es muy funcional y practico en cuanto a código se refiere .

Hoy traigo una simple manera de implementar este Grid con JSP y JSON:

Ya que se ha descargado el plugin de la pagina de descargas iniciamos con la implementación.

Se intenta que logres algo parecido a este ejemplo:

De dahico

La declaración del Grid entre las etiquetas HEAD.

<script type=”text/javascript”>
$().ready(function() {
var windowWidth = (document.documentElement.clientWidth – 100) /1.2;

jQuery(“#gridUsuarios”).jqGrid({
url:’getGriddahico.jsp’,
datatype: “json”,
colNames:['id_Usuario','Usuario','Email','Fecha/Hora'],
colModel:[
{name:'id',index:'id_Usuario', width:10, hidden:true},
{name:'Usuario',index:'usuario_Usuarios', width:150},
{name:'Email',index:'email_Usuarios', width:350},
{name:'Fecha/Hora',index:'timestamp_Usuairo', width:150},
],
rowNum:10,
rowList:[10,20,30],
multiselect: true,
pager: ‘#pagGrid’,
sortname: ‘id_Usuario’,
viewrecords: true,
sortorder: “desc”,
width: windowWidth,
height: “100%”,</code>
// nSelectRow: Evento,
caption:”dahicotux.wordpress.com”
});

jQuery(“#gridUsuarios”).jqGrid(‘navGrid’,'#pagGrid’,{edit:false,add:false,del:false});

});
</script>

Y entre las etiquetas BODY no es necesario nada mas que crear un tabla con ID con el que declaramos el Grid en este caso #gridUsuarios y un DIV  para el área de la paginación en este caso #pagGrid.

<div>
<table id=”gridUsuarios”></table>
<div id=”pagGrid”></div>
</div>

Ahora vamos a trabajar el codigo de lado del servidor en este caso sera una pagina JSP la cual ya esta declarada como parámetro url en el grid  url:’getGriddahico.jsp’.

<%–
Document   : getGriddahico
Created on : 4/02/2010, 11:00:58 PM
Author     : @dahico
–%>

<%@page import=”java.sql.*” %>
<%@page import=”app.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
conexion  conexiondb = new conexion();
conexiondb.Conectar();

total = conexiondb.countRec(“id_Usuario”, “tbl_Usuario”);

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 tbl_Usuario ORDER BY “+sidx + ” ” +sord +” LIMIT “+start+” , “+limit;

rs = conexiondb.Consulta(strQuery);

total = conexiondb.countRec(“id_Usuario”, “tbl_Usuario”);

response.setContentType(“text/x-json”);
response.setCharacterEncoding(“utf-8″);
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("id_Usuario")+"\",";
json = json + "\"cell\":["+rs.getInt("id_Usuario")+"";
json = json + ",\""+rs.getString("nombre_Usuario")+"\"";
json = json + ",\""+rs.getString("email_Usuario")+"\"";
json = json + ",\""+rs.getString("timestamp_Usuario")+"\"]“;
json = json + “}”;

rc=true;
}
json = json +”]\n”;

json = json +”}”;

out.print(json);
out.close();

%>

Para este ejemplo utilice una tabla en Mysql con la siguiente estructura:

CREATE TABLE `dahicotux`.`tbl_Usuario` (
`id_Usuario` INT  NOT NULL,
`nombre_Usuario` VARCHAR(10)  NOT NULL,
`email_Usuario` VARCHAR(150)  NOT NULL,
`timestamp_Usuario` TIMESTAMP  NOT NULL,
PRIMARY KEY (`id_Usuario`)
)
ENGINE = MyISAM;

Esta es solo una manera de implementar el Grid, les recomiendo leer la documentación para aprovechar al máximo sus funcionalidades.

Por ahora esto es todo, en lo próximos días espero profundizar en el tema ya que no se sabe cuando necesitaras un grid.

Advertisement