Que tal amigos !!!
Aquí les dejo este un pequeño ejemplo para implementar el GRID.
En este caso yo estoy utilizando una BD en MySQL lo cual no influye en nada.
Ok. Comenzamos , partimos de tener un documento JSP en mi caso un
index.jsp para efectos de prueba, es decir, la pagina en donde queremos mostrar el GRID, esta es su estructura:
Código:
<%--
Document : index
Created on : 4/02/2010, 10:39:22 PM
Author : @dahico.
Blog:[URL="http://dahicotux.wordpress.com"]http://dahicotux.wordpress.com[/URL]
--%>
<%@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>dahico-JQgrid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.7.1.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-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!-- Acá esta la parte buena del GRID -->
<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:'nombre_Usuario', width:150},
{name:'Email',index:'email_Usuario', 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%",
caption:"dahicotux.wordpress.com"
});
jQuery("#gridUsuarios").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="logoLogin" >
<img src="images/logoLogin.png" alt="">
</div>
<div class="tituloheaderLogin" style="color:#1a1a1a; padding:20px; text-align: center; font-family: sans-serif; font-weight: bold" >
dahicotux.wordpress.com
</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; ">
<!-- OJO en esta parte el identificador(ID) de la tabla debe de ser la misma declarada en la generacion del Grid, en la parte de arriba, lo mismo para el Div del Paginado -->
<table id="gridUsuarios">
<!--Aqui aparecera el GRID-->
</table>
<div id="pagGrid">
<!--Aqui aparecera el Paginador-->
</div>
</div>
</div> <!-- #RightPane -->
</body>
</html>
Hasta aquí, tenemos la pagina en donde mostraremos nuestro grid. Nada extraordinario solo se deben de tomar en cuenta los comentarios del codigo, asi como los CSS's y JavaScripts que importo.
Ahora bien, si notaron en el script que genera el Grid el parámetro url:'
getGriddahico.jsp', le indico un JSP, este es muy importante ya que aquí es donde se hacen las peticiones a la BD. También el parámetro datatype: "
json", declaramos que sera del Tipo JSON el cual por cuestión de ejemplo lo crearemos de manera manual.
Ahora si procedemos a realizar el
getGriddahico.jsp :
Código:
<%--
Document : getGriddahico
Created on : 4/02/2010, 11:00:58 PM
Author : @dahico.
Blog:[URL="http://dahicotux.wordpress.com"]http://dahicotux.wordpress.com[/URL]
--%>
<%@page import="java.sql.*" %>
<%@page import="app.classes.conexion" %>
<!--
En este punto importo mi clase conexion, que es donde creo la conexion al BD.
-->
<%
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.Conectar();
/*-----------------------------------------------------------------------------------------------------------*/
total = conexiondb.countRec("id_Usuario", "tbl_Usuario"); // Es funcion, es parte de mi clase de conexión. Aqui es importante contar el numero de registros para el paginado.
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); // Ejecuto la consulta SQL con mi clase
/*Acá viene la parte donde creamos la cadena para el JSON manualmente*/
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();
%>
Y con esto ya nos estaria devolviendo mediante JSON el resultado de la BD, espero les sirva.