jueves, 1 de diciembre de 2011

JqGrid Un Grid para Jquery


Hoy les presento un plugin para jQuery muy útil, el cual te permite crear Grid muy completos con algunas  pequeñas lineas de código.

Esta herramienta es muy poderoso y permite hasta cierto punto crear un grid completo con filtros, búsqueda, organización ascendente y descendente, paginación, etc casi sin necesidad que del lado del servidor halla código.  También se puede crear un Crud completo y bastante avanzado, con multigrid, grid dentro de grids, etc, con un poco más de interacción con un lenguaje del lado del servidor.

Otra Característica destacable de este plugin es que se ajusta a el jQuery UI, lo cual permite que se integre con  el diseño de nuestra interfaz con mucha facilidad. y modificarlo como queramos.



En este tutorial vamos a crear un Grid muy básico sin nada de interacción con el servidor, solo usando un array javascript con los datos, para ir viendo las funcionalidades de este poderoso plugin.  Por ahora solo vamos a trabajar con lo básico para que nos podamos ir sintiendo a gusto con este plugin.

Lo primero es descargar los archivos necesarios, de la pagina de jqgrid nos descargamos la ultima actualización del plugin y de la pagina de jquery UI nos descargamos el tema de nuestra preferencia.

Y ahora configuramos el area de trabajo de esta manera:

./css/ui.jqgrid.css
./css/images //adentro van las imagenes del tema.
./css/jquery-ui-1.8.16.custom.css
./js/jquery-1.5.2.min.js
./js/grid.locale-es.js
./js/jquery.jqGrid.min.js
./jqgrid.html

El archivo jqgrid.html sera donde crearemos el grid, lo primero es poner la estructura básica html, cuando pongamos los enlaces de jqgrid, debemos colocar primero el de idioma y después el de jqgrid porque sino nos dara error. Después agregamos una tabla dentro del body y le colocamos el id igual a list. Ya con esto podemos empezar a examinar este plugin.

Este plugin se manejo como todos los plugins de Jquery, primero $ + un selector + la función jqGrid + objeto con las opciones, en este tutorial voy a hacer un listado de las opciones básicas (el listado completo esta aqui!), para hacer el ejemplo básico:

Variables indispensables

  • datatype: especifica el tipo de dato que va a esperar jqgrid para hacer la representación de datos. los valores posibles son: xml, json, jsonp, local, xmlstring, jsonstring, javascript.
  • colNames: aquí se especifica el array javascript con los nombres de las columnas que se verán en el Grid.
  • colModel: esta es la más importante de todas, y debe estar en el mismo orden que colNames, desde aquí se especifican nombres, ancho, opciones de busqueda, filtros, ordenación, etc. es como la columna vertebral del jqGrid.
Variables opcionales basicas para este ejemplo:

  • caption: Especifica un nombre a la tabla.
  • data: especifica cual es el source cuando la variable es local. EL array debe seguir el patrón de colModel.
  • height: especifica la altura de el grid.
  • altRows: le pone la alternancia de colores a la tabla.

Especificaciones del colModel

El colModel como dije antes es la columna vertebral de este plugin y es donde se especifica cual va a ser la estructura y el comportamiento de cada una de las columnas, tenemos que tener claro que deben ser especificados en el mismo orden que especificamos los nombres de cada columna. Cada columna tiene las siguientes opciones básicas:


  • name: esta variable especifica el nombre unico de esa columna, no puede haber otra columna con el mismo nombre ni en subgrids.
  • align (opcional): esta variable especifica como se va a alinear el texto en la celda: left, center, right.
  • width (opcional): define el ancho de la columna, por defecto es 150px.
  • sortable (opcional): especifica si la columna puede ser ordenable
Ejemplo de Grid básico


Ahora si, aquí vamos con el ejemplo sencillo, la información es aleatoria, pero las claves deben ser las mismas el atributo name del colModel, voy a agregar la información a el Grid de dos maneras, una con el atributo data y otra con el metodo addRowData para agregar la fila al Grid, en la pagina recomiendan que para objetos grandes se haga con el atributo, pero es bueno conocer los dos métodos.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>prueba</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css" /> 
  <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> 
     <script src="js/jquery-1.5.2.min.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"> 
  var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; 
  $(document).ready(function(){
  $("#list").jqGrid({ 
   datatype: "local", 
   data: mydata,
   height: 250, 
   colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
   colModel:[ 
    {name:'id',index:'id', width:60}, 
    {name:'invdate',index:'invdate', width:90}, 
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right"}, 
    {name:'tax',index:'tax', width:80, align:"right"}, 
    {name:'total',index:'total', width:80,align:"right"}, 
    {name:'note',index:'note', width:150, sortable:false}
    ], 
   caption: "http://sosinformatico.blogspot.com",
   altRows: true
  });
  
   for(var i=0;i<=mydata.length;i++) 
    jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
  });
  </script>
    </head> 
    <body> 
     <table id='list'></table>
 </body>
</html>

A la final se debería ver así:


Repositorio GitHub: https://github.com/bomba1990/JqGrid-Ejemplos

Pueden Descargar el ejemplo desde:

http://www.box.com/s/oadoy8jey3idonmx381e

Pueden ver el ejemplo funcionando desde. http://bomba1990.pythonanywhere.com/sosinformatico/js/JqGrid_Basico

Despues pienso sacar 3 tutoriales más un con un grid más avanzado, y dos integrandolo con Codeigniter y Python. Estos ultimos quiero hacerlos como screencast por eso me voy a tardar un poquito más.


45 comentarios:

  1. Mariano, muy buena la explicacion, te hago una pregunta, donde se modifica el ancho de la grid, por defecto tengo width=650.
    Desde ya muchas gracias y muy amable.

    ResponderEliminar
  2. bueno en cada modelo de columna, le especificas el ancho de la columna. si quieres especificar un ancho general deves poner width:650 en el objeto de jqgrid.

    ResponderEliminar
  3. Hola me llamo carlos soy de peru arequipa, muy buenos tus tutoriales pero le faltaia alguito, como un enlace de ejmplo terminado y otro enlace de descargarlo y poder revisarlo. :)

    ResponderEliminar
  4. no tengo para poner para revisarlo, porque no tengo un server fiable, donde montarlo. pero si lo puedo poner para descargar ahora pongo el enlace

    ResponderEliminar
    Respuestas
    1. mariano y por que no usas github?..github no solo te sirve como repositorio sino tambien para paginas estaticas...:D ..

      Eliminar
    2. Si últimamente e estado pensando en hacerlo. pero ya la mayoría de las cosas las tengo en box, entonces me voy a ir migrando poco a poco. Ademas que llevo tiempo que no escribo un articulo

      Eliminar
  5. Hola Mariano, muy bueno el tutorial, tienes alguna ayuda para ver como integrarlo con Codeigniter?
    Gracias!
    Ariel

    ResponderEliminar
    Respuestas
    1. si tengo, inclusivo lo hiba a sacar un tutorial pero no e tendio tiempo cuando tenga chance lo hago

      Eliminar
  6. Muy bueno el documento y luego el poder descargarlo es genial!!!!
    Yo en mis ejemplos tengo problemas con los iconos de buscar, de ir hacia delante y hacia atras en el grid y todos los iconos en general. No sé el motivo pero no se ven y con el firebug puedo llegar a ver que las imágenes están en la ruta.
    ¿Tienes idea del motivo por el cuál no se pueden ver los iconos?

    ResponderEliminar
    Respuestas
    1. bueno, la mejor forma de saberlo es entrar directamente con el firebug e inspeccionar el elemento para ver el porque, el firebug del lado de recho te dice que estilos aplican al elemento y porque no se ve algo en especifico, de todas maneras puedes compara tu codigo con el mio a ver como te funciona.

      Eliminar
  7. hola muy fino tu tutorial queria saber a ver si m puedes ayudar necesito mostrar son los datos de una consulta de una tabla de mysql?? que debo cambiar o como debo hacerlo.. te agradezco la ayuda que me puedas facilitar..

    ResponderEliminar
    Respuestas
    1. Hola hay dos maneras una que las muestres como un arreglo dentro de l apagina con json_encode y la otra es que le coloques creo que era url y en la url qu ele colocaces pusieres un json con los resultados que quieres mostrar. de todas maneras voy a ver si creo una entrada con eso en estos días.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Hola, esta genial tu tutorial, tengo la misma duda que Dolis, yo me los he traído con un json, mi problema es que tengo caracteres con acentos en mi tabla mysql y no me los muestra bien; sin embargo cuando entro en el detalle de mi registro, sí que saca bien los acentos. Sabes cómo puedo "formatear" las columnas de "colModel" para que agarre bien el UTF?

      Eliminar
  8. He estado investigando sobre este grid pero aun no entiendo como funciona los botones para agregar,editar,eliminar o filterar datos, si tuvieras un ejemplo completo de como implementar esas funciones con javascript y si puedes hacer un ejemplo con JAVA

    ResponderEliminar
  9. Tengo la misma inquietud que "Erick", estuve probando con las demos que hay en la web para las funciones de editar, borrar y agregar, pero no logre ningun resultado favorable, podrias crear ejemplos para esto? sobre esta misma tabla si es posible, Gracias.

    Hago una consulta extra, hay alguna manera de importar al Grid un archivo de Excel?.

    ResponderEliminar
    Respuestas
    1. YA yo la tengo lista, desde hace tiempo, pero no e tenido tiempo de redactar el articulo, voy a ver si la monto, aunque no la explique mucho y despues creo un articulo explicandolo al detalle.

      Y lo de exportar no me acuerdo ahorita bien como se hacia pero voy a revisar y te aviso.

      Eliminar
  10. Hola perdon que moleste ya estara el ejemplo de eliminar, agregar y editar??? por fa seria de muhc ayuda

    ResponderEliminar
  11. ESto no tiene opciones para editar, es el punto malo de casi todos los grids, y los que lo tienen hay que pagar por ellos

    ResponderEliminar
    Respuestas
    1. disculpa, que te refieres con editar? porque este grid tiene para agregar, modificar, eliminar y editar un elemento.

      Eliminar
  12. Hola, el tutorial esta muy bueno, solo una pregunta como que editor de Javascript utilizas para que salga en esos colores porque de esa forma, es mas entendible el texto.
    Saludos.
    Sigue así con los tutoriales.

    ResponderEliminar
    Respuestas
    1. Hola te recomiendo dos editores, sublimetext y notepad++. los dos muy buenos.

      Eliminar
  13. Hola, tengo una cuestión! tengo muchos campos que mostrar y definido un width: 900 que por supuesto no es suficiente para mi información, por lo que quisiera que de manera automática apareciera una barra de scroll para que se respete el tamaño del grid y con la barra poder navegar en los campos que no se ven, pero no logro hacerlo, lo que me hace el grid es que cambia el tamaño de mis campos y todo se ve amontonado, pueden ayudarme? de ante mano muchas gracias!

    ResponderEliminar
    Respuestas
    1. Realmente nunca lo e echo. pero se me ocurre que aprovechs con css y a este elemento ui-jqgrid-bdiv le pongas overflow-x: scroll;. Y busques la manera de que el tamañp que le des a jqgrid lo mantengas y asi lo que sobresalga tendra scroll. Es lo que se me ocurre, prueba a ver y me comentas que tal te fue.

      Eliminar
  14. Hola, probé agregar la propiedad que comentaste en el elemento de ui, y si me muestra el scroll pero aunque los campos tienen un tamaño definido, no aparecen como tal, si necesito buscar el modo de hacer que tome el tamaño que le indico para las celdas

    ResponderEliminar
  15. Se me hace raro que en la página de http://trirand.com/blog/jqgrid/jqgrid.html en el demo de FROZEN, hay un caso como lo que me ocurre de que aparece el scroll, pero no indica alguna configuración para hacerlo ni nada, pero si aparece solo

    ResponderEliminar
    Respuestas
    1. Creo que en el ejemplo esta claro, a cada columna le colocan frozen : true y aaprte al final de el script ponen

      jQuery("#gfrc1").jqGrid('setFrozenColumns');

      Aparte tambien te recomiendo que veas shrinkToFit, que es otra de las opciones que usan en el script:

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

      y la otra "setGridWidth" http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

      seguro que con eso lo logras. SI lo haces por favor publica la respuesta, y si quieres la monto en el blog.

      Eliminar
  16. Maravilloso, el tema de frozen no me interesaba, si no solo la parte del scroll en ese ejmplo, pero tenías razón, ya comprendí bien el tema de la propiedad con shrinkToFit, al inicializar el objeto del grid, con width defino el ancho de mi grid, y con la propiedad shrinkToFit = false, el grid no ajusta las celdas al ancho del grid, si no que respeta el ancho definido en las propiedades de los mismos campos, y si la suma de los anchos de cada campo es superior al ancho del grid, de manera automática aparece el scroll para poder recorrer los campos dentro del grid sin alterar el ancho de este último ni modificar el ancho de los campos.

    ResponderEliminar
  17. hola, tengo una duda. Como podria hacer para que en el form para editar despues del submit si se ha encontrado un error en el servidor, se me muestre un mensaje en la parte superior del form edit

    ResponderEliminar
    Respuestas
    1. por defecto cuando hay un error 502 o 404 o lo que sea por defecto ej jqform te muestra un mensaje de error en la parte superrior.

      Eliminar
  18. ooh muchas gracias!!! No lo sabía, pero además de esto es posible que sí yo inserto un campo en la base de datos desde el grid y éste
    ya se encuentra, me pueda mandar un mensaje de alerta. similar a como se muestran los errores que mencionas anteriormente??

    ResponderEliminar
    Respuestas
    1. similar no se, creo que habia algo de eso, pero de que si puedes añadir validaciones para ese tipo de cosa si se puede, pero ahorita no me acuerdo

      Eliminar
  19. Hola, como puedo hacer una consulta con sql y una variable

    // you can provide custom SQL query to display data
    //$g->select_command = "SELECT * FROM (SELECT i.codalbaran, i.numlinea, c.referencia, c.descripcion, i.cantidad, i.importe FROM pedidoslineatmp i INNER JOIN articulos c ON i.codigo = c.codarticulo WHERE i.codalbaran='$codalbarantmp') o";

    si la variable = es un numero me lo filtra perfectamente pero cuando intento poner la variable $codalbarantmp no filtra nda

    ResponderEliminar
    Respuestas
    1. muestrame un poco más de codigo a ver de donde sale el codigo. lo más probable es que no la estes tomando bien la variable.

      Eliminar
  20. que bueno post compa pero tengo una pregunta como modifico el ancho de colNames ya que pongo el nombre y me sale muy grande la columna quiero ajustarla pero no encuentro como hacerle

    ResponderEliminar
  21. Hola Mariano.. ya me has ayudado bastante con este tutorial y con el código fuente..
    Pero necesito tu ayuda.

    LLevo meses buscando la solución o un ejemplo pero no he encontrado nadad.. lo que quiero hacer es lo siguiente..

    Tengo el grid con las cajas de busqueda.. la busqueda funciona bien... pero quiero que al darle enter.. luego de realizar la busqueda que me mande el focus a la primera fila que de la busquedad

    ResponderEliminar
    Respuestas
    1. ya le conseguiste solucion a esto? o la sigues buscando?

      Eliminar
    2. Tristemente no lo he conseguido.... Y hoy tengo otro inconveniente. Necesito que cuando cargue el el grid.. en una pagina abierta a traves de opener.. el focus. me lo mande a la primera casilla de busqueda que tenga el Grid... .. sigo buscando.. primero Dios.. más tarde que temprano lo encontraré.. a no ser que tu sepas como puedo hacer lo segundo.. que te menciono..

      Eliminar
    3. guillermo las dos cosas que quieres son "sencillas" Pero necesito qu emonter un ejercicios rela de lo que esta shaciendo y me lo envies para poder mandarte las lineas de codigo que necesitas.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
  22. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  23. https://docs.google.com/file/d/0B4i5_Dpg-6GbNFRScDJEVnRuUzQ/edit

    https://docs.google.com/file/d/0B4i5_Dpg-6GbYldObjY4ZzJjb0U/edit

    hay va los dos archivos que estoy usando... te lo agradecere mucho,......

    LO QUE QUIERO ES QUE CUANDO CARGUE buscarContribuyentes.jsp el focus se vaya para uno de los cuadros de busqueda .., adjunto imagen,..

    imagen
    https://mail.google.com/mail/u/0/#sent/14982c88d8db48e3?projector=1

    ResponderEliminar
  24. donde puedo conseguir //opciones add

    ResponderEliminar
  25. una pregunta. Tienes algún ejemplo para exportar a excel??, eso me trae liado...

    ResponderEliminar
    Respuestas
    1. echo por mi no tengo a la mano. disculpa.

      Pero en stackoverflow esta este que te podria servir https://stackoverflow.com/questions/15699301/export-mysql-data-to-excel-in-php

      Eliminar