julio 8, 2011 Uncategorized

Tablas Profesionales con JQGrid

Puedes ver la demo de las tablas en la siguiente dirección: http://jlmonteagudo.cloudfoundry.com/team

Puedes descargarte el código fuente en la siguiente dirección: jqgrid

En muchas de las aplicaciones web que desarrollamos tenemos la necesidad de mostrar la información en forma de tabla. Existe un plugin desarrollado con jQuery que podemos utilizar en nuestra aplicación para este propósito, independientemente del lenguaje de programación que utilicemos en nuestro servidor. El pugin en cuestión se llama jqGrid, y lo vamos a utilizar en combinación con Grails, como ya viene siendo habitual.

Una característica importante de jqGrid que cabe destacar es que no sólo permite mostrar información, sino que  permite agregar registros nuevos a la base de datos, consultarlos, actualizarlos y borrarlos.

jqgrid2

Quiero comentar que hoy en día ya existe un plugin para Grails que permite la utilización de jqGrid de forma sencilla. Sin embargo, he preferido demostrar el uso de jqGrid directamente porque, además de ser muy fácil utilizarlo, no estás supeditado a las actualizaciones del plugin de Grails para poder utilizar las últimas funcionalidades de jqGrid. Así, en el momento de escribir este post, la versión actual del plugin de Grails utiliza la versión 3.8 de jqGrid, pero la versión actual de jqGrid es la 4.1.1.

Para integrar jqGrid en nuestra aplicación Grails lo primero que tenemos que hacer es descargárnoslo desde su sitio web. Una vez descargado y descomprimido, tenemos que copiar los ficheros del directorio js (directorio i18n incluido) al directorio web-app/js de nuestra aplicación Grails. Lo mismo tenemos que hacer con el directorio css, copiamos los ficheros de la carpeta css de jqGrid al directorio web-app/css de nuestra aplicación Grails.

También nos tenemos que descargar uno de los muchos temas que puedes encontrar en la web jQuery UI, con el cuál conseguimos darle al grid un look & feel determinado. Una vez descargado y descomprimido el tema lo único que nos faltaría hacer sería copiar el contenido del directorio css, al directorio web-app/css de nuestra aplicación Grails.

A continuación, para utilizar el grid en una determinada página, tenemos que ir al GSP en cuestión y agregar las siguientes hojas de estilo:

Por otra parte tendríamos que agregar los siguientes ficheros JavaScript:

Y finalmente el siguiente código JavaScript:

En este fragmento de código se configuran una serie de parámetros (documentación oficial de las opciones) del grid. Uno de los más importantes es el parámetro URL, donde se le asigna al grid una dirección desde donde éste obtiene la información que tiene que presentar.

En nuestro controlador Grails necesitamos una closure que busque en la base de datos la información y que la devuelva en formato JSON, que es el formato que hemos definido mediante el parámetro datatype del grid. A continuación se muestra la closue, cuyo código se basa en el código del plugin jqGrid de Grails:

Esta closure recoge los parámetros enviados por el grid, y a partir de estos parámetros realiza la consulta en la base de datos.

En la aplicación mostrada existe un segundo grid más avanzado que, además de consultar la información de la base de datos, permite realizar operaciones CRUD sobre la entidad a representar. Este segundo grid tiene una barra de herramientas en su parte inferior a través de la cuál se pueden crear nuevos registros, actualizarlos y borrarlos. Además, en la cabecera, este grid contiene unos controles a través de los cuales se puede filtrar la información que se presenta. Para ver todas estas funcionalidades se recomienda revisar el código fuente que se adjunta más arriba.

  1. Yonis Cuisman dice:

    Hay algo que no entiendo y es lo referente a la tabla y los datos que utiliza. Debe crear una tabla. Cuales son los campos? en esa parte estoy perdido.

  2. Yonis Cuisman dice:

    básicamente, no entiendo esta instrucción:
    $result = mysql_query(“SELECT COUNT(*) AS count, SUM(amount) AS amount, SUM(tax) AS tax, SUM(total) AS total FROM invheader a, clients b WHERE a.client_id=b.client_id “.$wh);

    Y por consiguiente, esta tampoco:
    $SQL = “SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id”.$wh.” ORDER BY “.$sidx.” “. $sord.” LIMIT “.$start.” , “.$limit;

  3. jl_monteagudo dice:

    Hola Yonis,

    Por la información que envías en tu segundo comentario veo que estás siguiendo los ejemplos de la documentación de jqGrid.

    En efecto tienes que tener una tabla creada desde la cual extraes la información. En esta URL puedes ver cómo crean la tabla a la que haces referencia en tus comentarios:

    http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid

  4. Jose Luis dice:

    Excelente, muchas gracias por tu aporte, voy a tratar de implementarlo al proyecto que estoy desarrollando en Grails. Gracias de nuevo

  5. Luis dice:

    Amigo no tendrs un codigo para php?

  6. jl_monteagudo dice:

    Lo siento Luís, no tengo código para PHP pero, si no recuerdo mal, la documentación de JQGrid tiene ejemplos con PHP.

    Saludos

  7. Sergio dice:

    Amigo muy bueno los ejemplos; no tendrás un ejemplo con java web, me sería de mucha ayuda, gracias de antemano

  8. ee dice:

    Gracias por el articulo. Tengo unas consultas.
    Como puedo mandar los datos de la tabla al server para poder guardarla en la base de datos?
    Como le puedo mandar datos a la tabla jqGrid para poder mostrarla pero desde el lado del servidor??

  9. MMO dice:

    HOLA COMO IMPLEMENTO LA BUSQUEDA USANDO JSP

  10. Fabricio dice:

    Hola ya configure la grilla y puedo manipular los registros pero como puedo hacer para que me los guarde en la base de datos…

    me trae los datos de la tabla pero no actualiza ni borra ni agrega.

    si me puedes dar una mano, muchas gracias!!!

  11. IAN CARO dice:

    una pregunta como se toma el campo id link par agregar un nuevo renglon en el hijo..

    PHP y Mysql
    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Back to top