style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

Struts2-jquery - Mostrar registros en un JQGrid

Hola a todos, éste es mi primer blog y aporte en esta fabulosa comunidad de JAVA México, espero que les sea de muchísima ayuda para sus proyectos. En esta ocasión, les presento un ejemplo muy rápido y sencillo de cómo utilizar el plugin de Jquery para Struts2 y poder mostrar los registros de una consulta en el componente JQGrid, el cuál nos permite visualizar la información de una forma atractiva y nos abstrae un poco de operaciones bastante cotidianas como la paginación de resultados y la posibilidad de ordenar los registros por algun campo en particular.

En la red existen múltiples ejemplos del uso de este componente, la mayoría (como en casi todos los buenos manuales) están en inglés y otra cosa que tienen mucho en común es que lo ejemplifican con Anotaciones. En este caso el ejemplo que les mostraré evidentemente está en español pero también está basado en la configuración con XML y no con Anotaciones, que en mi opinión es un poco más fácil de entender (con XML).

Bueno, vayamos al ejemplo.

Lo primero que veremos será el Action, en el cual se centra practicamente la funcionalidad del JQGrid.

UserAction.java:

package action;

import java.util.List;

import to.UserTO;//Objeto Bean
import bo.UserBO;//Objeto de negocio que ejecuta el DAO que hace la consulta a la base de datos

import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
       
        //DI, inyectado via Spring
        private UserBO userBO;

        //Lista de resultados
        private List<UserTO> gridModel;
       
        //Lista temporal
        private List<UserTO> myUsers;

        //Número de filas que queremos tener dentro del grid - atributo "rowNum" del grid
        private Integer rows = 0;
       
        //Página actual. Por defecto el grid lo pone en 1
        private Integer page = 0;
       
        //Orden - asc o desc
        private String sord;
       
        //Índice de la fila - i.e. click del usuario para ordenar
        private String sidx;
       
        //campo de búsqueda
        private String searchField;
       
        //cadena de búsqueda
       
        private String searchString;
       
        //La operación de búsqueda ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
        private String searchOper;
       
        //Páginas totales
        private Integer total = 0;
       
        //todos los registros
        private Integer records = 0;
       
        private boolean loadonce = false;

        public String execute(){               
                //Número de registros(Select count(*) from users)
                setRecords(userBO.count());
               
                //Calcula HASTA qué registro será la consulta, suponiendo que rows=10....
                int to = (getRows() * getPage());//.....la primera vez to=10  (10*1)
 
                //Calcula DESDE qué registro se hará la consulta...
                int from = to - getRows();//....from=0  (10-10)

                //si la variable "to" sobrepasa el número de registros disponible, entonces le ponemos ese valor máximo de registros.
                if(to>getRecords())to=getRecords();
               
                //Utilizamos este List temporal para almacenar cada Objeto UserTO (Registro) que devolvió la consulta
                myUsers = userBO.getUsersGrid(from,to);

                //Le pasamos ese List lleno al List "gridModel", que es el que finalmente ocupará el JQGrid para dibujar la tabla..
                setGridModel(myUsers);

        //calcula el total de páginas que genera la consulta
        total = (int) Math.ceil((double) getRecords() / (double) getRows());
               
       
                return SUCCESS;
        }
       
        public String getJSON(){
                return execute();
        }

        //Getters y Setters de cada uno de los atributos de clase....
       
        public UserBO getUserBO() {
                return userBO;
        }

        public void setUserBO(UserBO userBO) {
                this.userBO = userBO;
        }

        public List<UserTO> getGridModel() {
                return gridModel;
        }

        public void setGridModel(List<UserTO> gridModel) {
                this.gridModel = gridModel;
        }
       
        public List<UserTO> getMyUsers() {
                return myUsers;
        }

        public void setMyUsers(List<UserTO> myUsers) {
                this.myUsers = myUsers;
        }

        public Integer getRows() {
                return rows;
        }

        public void setRows(Integer rows) {
                this.rows = rows;
        }

        public Integer getPage() {
                return page;
        }

        public void setPage(Integer page) {
                this.page = page;
        }

        public String getSord() {
                return sord;
        }

        public void setSord(String sord) {
                this.sord = sord;
        }

        public String getSidx() {
                return sidx;
        }

        public void setSidx(String sidx) {
                this.sidx = sidx;
        }

        public String getSearchField() {
                return searchField;
        }

        public void setSearchField(String searchField) {
                this.searchField = searchField;
        }

        public String getSearchString() {
                return searchString;
        }

        public void setSearchString(String searchString) {
                this.searchString = searchString;
        }

        public String getSearchOper() {
                return searchOper;
        }

        public void setSearchOper(String searchOper) {
                this.searchOper = searchOper;
        }

        public Integer getTotal() {
                return total;
        }

        public void setTotal(Integer total) {
                this.total = total;
        }

        public Integer getRecords() {
                return records;
        }

        public void setRecords(Integer records) {
                this.records = records;
        if (this.records > 0 && this.rows > 0) {
            this.total = (int) Math.ceil((double) this.records / (double) this.rows);
        } else {
            this.total = 0;
        }
        }
       
        public boolean isLoadonce() {
                return loadonce;
        }

        public void setLoadonce(boolean loadonce) {
                this.loadonce = loadonce;
        }
}

Una vez armado el Action, nuestro JSP queda asi.

user.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head jqueryui="true" jquerytheme="redmond"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Aplicación Struts 2 :: USUARIOS</title>
</head>
<body>
<h1>Usuarios</h1>

<s:url id="remoteurl" action="userAction" namespace="/" />
    <sjg:grid
        id="gridtable"
        caption="Usuarios"
        dataType="json"
        href="%{remoteurl}"
        pager="true"
        gridModel="gridModel"
        rowList="10,15,20"
        rowNum="10"
        rownumbers="true"
    >
     <!--   El "name" de cada columna debe coincidir con cada atributo del objeto Bean (UserTO) que representa cada registro de la tabla     -->
        <sjg:gridColumn name="idUser" index="idUser" title="ID Usuario" formatter="integer" sortable="false"/>
        <sjg:gridColumn name="name" index="name" title="Nombre" sortable="true"/>
        <sjg:gridColumn name="birthDate" index="birthDate" title="Fecha de Nacimiento" sortable="false"/>
        <sjg:gridColumn name="active" index="active" title="Activo" sortable="false"/>
    </sjg:grid>

</body>
</html>

Ahora resta ver cómo queda el archivo de configuración struts.xml

struts.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

        <constant name="struts.devMode" value="true" />

        <package name="mios" namespace="/" extends="struts-default,json-default">
                <action name="inicio">
                        <result name="success">pages/user.jsp</result>
                </action>
                <action name="userAction" class="action.UserAction">
                        <result name="success" type="json">
                                <param name="includeProperties">JSON,gridModel.*,page,records,rows,sidx,sord,total</param>
                        </result>
                </action>
        </package>
</struts>

Y precisamente es en éste último archivo en donde está la mayor diferencia con respecto a los ejemplos que hay con Anotaciones, explico:

El <action name="inicio">... es únicamente para que nos redirija a la jsp que contiene el JQGrid, en este caso users.jsp.

El <action name="userAction"....> es la más importante ya que, una vez que user.jsp se haya cargado, el JQGrid hará la llamada a esta acción vía ajax para obtener la consulta y los parámetros que usa. El resultado de la llamada al UserAction será un objeto json con todo lo que necesita el JQGrid para pintarse.

La parte de <param name="includeProperties">... es en donde se ponen, separados por coma, los atributos del UserAction que la respuesta enviará en formato json (de esto se encarga el plugin de jquery, invocando el método set de cada atributo que indicamos). Nótese en particular el atributo "gridModel", el cual, sabemos que es un List con objetos Bean (UserTO) que representan cada uno de los registros de la consulta, por esta razón lleva un punto y un asterisco (gridModel.*), para indicarle al jquery que ese parámetro tiene objetos dentro que debe pasar también a formato json. De tal manera que la respuesta será mas o menos de esta manera:

{"JSON":"success","gridModel":[{"active":1,"birthDate":"1986-07-16T00:00:00","idUser":1,"name":"Diego"},{"active":1,"birthDate":"1986-08-09T00:00:00","idUser":2,"name":"Roxana"},{"active":1,"birthDate":"1985-06-25T00:00:00","idUser":3,"name":"Arturo"},{"active":1,"birthDate":"1984-11-10T00:00:00","idUser":4,"name":"Paulina"},{"active":1,"birthDate":"1987-12-28T00:00:00","idUser":5,"name":"Roberto"},{"active":1,"birthDate":"1990-12-28T00:00:00","idUser":6,"name":"Adolfo"},{"active":1,"birthDate":"1990-12-28T00:00:00","idUser":7,"name":"David"},{"active":1,"birthDate":"1987-12-28T00:00:00","idUser":8,"name":"Irvin"},{"active":1,"birthDate":"1987-12-28T00:00:00","idUser":9,"name":"Guillermo"},{"active":0,"birthDate":"1987-12-28T00:00:00","idUser":10,"name":"Mauricio"}],"page":1,"records":56,"rows":10,"sidx":"","sord":"asc","total":6}

Y el resultado es el de la imagen que adjunto aqui.

Espero les haya sido de gran ayuda este pequeño blog, es la primera vez que aporto algo, por lo que si no me dí a entender claramente o creen que omití cosas importantes, una disculpa y les pido me lo hagan saber para mejorar ésta y mis próximas aportaciones.

Un saludo a todos!

AdjuntoTamaño
ejemplojqgrid.JPG39.25 KB

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de ale_imp

Orale Muchas Gracias!!!

Mu gusto mucho tu ejemplo muchas felicidades, gracias por tu aporte, yo en estos momentos ando aprendiedo struts 2 y de verdad q tu ejemplo me sirvio bastante de nuevo muchas gracias.

Imagen de jlopezjuy

Ejemplo

Hola como estas, tendrias el proyecto completo para probar, lo intento ahcer con eclipse y no me funciona, gracias.

Ejemplo Fuente

Hola como estas Brother , por favor si no fuera tanta molestia enviarme las fuenets de este ejemplo . te lo agradeceria . mi correo
es ffernandox@hotmail.com.

fuentes

por si acaso ya lo tienes las fuentes de este ejemplo .. ???

Sobre tu ejemplo

Buenas tardes, estoy recien programando en struts2 en mi oficina y justamente me estan pidiendo con jqgrid, me podrias enviar el ejemplo, gracias de antemano, Juan Carlos Espinoza Lima Peru jcjavadeveloper@gmail.com

Struts2-jquery

Buenos dias
Estoy recien programando en struts2 + jqgrid, me podrias enviar el ejemplo con el proyecto de java
Juan Brito Milano Italia brito.grandes@gmail.com gracias
Aunque quisiera saber si me puedes dar tu mail para poder hablar de un proyecto con Strust2

Necesito Asesoría URGENTE

Estimados, necesito que me puedan enseñar este concepto de jqGrid, pues estoy programando con Kohana (PHP)
y necesito obtener datos desde SQL/Server con jqGrid.

Como sería recomendable programar jqGrid para que al accesar a la base de datos (una tabla), pueda obtener los registros de la tabla desde la paginación que me envía el HTML jqGrid (No sé si 'XML', 'JSON' ó 'ARRAY'.

El 'ARRAY' no sé como llenarlo desde un PHP para ser enviado al HTML y este lo pagine.

agradecido por su ayuda, que me puedan enviar una solución a mi correo ' cbonick2@yahoo.cl'

NOTA:
Herramientas que utilizo son: Eclipse, SQL Server 2008, PHP sobre Kohana.

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">