martes, 27 de marzo de 2012

jqGrid Búsqueda y Barra de Filtro (FilterToolbar)

Siguiendo en el tema de jqGrid, ahora vamos a hablar de los filtros y la búsqueda. Cuando estamos haciendo una tabla de datos, una de las parte más fastidiosa es programar la parte de los filtros y la búsqueda, porque si el cliente lo quiere por cédula, e que la diseño la hizo por nombre, y así cada quien dio su opinión y esto nos puedo consumir mucho tiempo. Pero este plugin de jqGrid, nos trae dos soluciones fáciles y sencillas con las cuales podamos agregar esto al grid fácilmente. Lo chevere de esto es que a la hora de programarlo también va a ser sencillo agregar nuevos campos y crear filtros de forma fácil y sencilla.

Barra de navegación(Búsqueda)

La barra de navegación es fácil de agregar, y tiene muchas opciones, por ahora solo vamos a usar la opción de búsqueda. Esta opción lo que hace es agregar un icono de lupa en la barra de abajo y al hacer clic, podemos agregar reglas para filtrar la información, no es muy compleja, y es sencilla de agregar, solo tenemos que agregar el código siguiente después del constructor de jqGrid. ".navGrid('#pager', { view: false, del: false, add: false, edit: false });"

Con esto vamos a agregar dos botones, el de buscar y el de recargar grid. el de recargar solamente reinicia el grid a su estado original, en el caso de que hayamos agregado un filtro. Con esto el grid se vería asi.

De las opciones destacables que le podemos agregar a la configuración de la opción search están:
  • multipleSearch: Que permite agregar varias reglas de búsqueda, al mismo tiempo.
  • closeOnEscape: que determina si el dialogbox, se va a cerrar presionando la tecla escape
  • closeAfterSearch: esta opción habilita que se va a cerrar el cuadro de dialogo después de darle a la opción buscar.

Esta es la wiki dedicada al navgrid: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator, si desean leer más del tema, como la configuración y esas cosas.

A la final con todas las opciones anteriores el codigo quedaría así:

$(document).ready(function(){ $("#list").jqGrid({ datatype: "local", data: mydata, height: "auto", colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, search:false}, {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", //viewrecords: true, altRows: true, pager:'#pager', rowNum: 10, rowList:[10,15,20] }).navGrid('#pager', { view: false, del: false, add: false, edit: false }, {},//opciones edit {}, //opciones add {}, //opciones del {multipleSearch:true,closeAfterSearch: true, closeOnEscape: true}//opciones search ).jqGrid("filterToolbar"); for(var i=0;i<=mydata.length;i++) jQuery("#list").jqGrid('addRowData',i+1,mydata[i]); jQuery("#list").trigger("reloadGrid") });

Barra de Filtro(Filter Toolbar)

Aparte tambien podemos agregar una barra de filtro, esta es una barra en la parte superior de la tabla, que nos permite agregar filtros específicos para cada una de las columnas. Un poco parecidos a los grids de Joomla, donde en la parte superior hay filtros, como filtros por estado, por autor, etc. Para activarla solo debemos agregar esto ".jqGrid("filterToolbar")" a el objeto donde instanciamos el grid, para que empiece a funcionar. Con esto nos debe salir una barra parecida a esta:


Configurando Las opciones de Búsqueda

Ahora viene la parte más importante y es la de configurar cada una de las columnas con sus diferentes opciones de búsqueda. jqGrid nos permite personalizar las opciones que le vamos a ofrecer a los usuarios para realizar las búsquedas.Dentro del colModel se configuran como van a ser las opciones de búsqueda para cada una de las columnas, las opciones que tienen que ver con configuración son las siguientes:
  • search: Especifica si este campo va a aceptar búsqueda o no. Default: true
  • stype: Determina el tipo de campo de búsqueda, los únicos dos permitidos son text y select. Default: text
  • searchoptions: es un objeto que contiene toda las opciones y configuraciones para las búsquedas.
  • searchrules: es otro objeto que identifica las reglas de búsqueda que le va a aplicar al input del usuario.
Opciones de Búsqueda(searchOptions)

  • dataUrl: especifica una url, para en el caso de que el tipo sea un select, cargue las opciones por via ajax de esa url. El resultado de el ajax puede ser un select html, con las opciones.
  • buildSelect: si usamos la opción anterior, con esta podemos asignar una función que se encargue de crear el select con el resultado de la función ajax.
  • dataInit: con esta especificamos la función que se va a disparar cuando se cree el objeto.
  • dataEvents: Un array con una lista de eventos para añadir al input.
  • searchhidden: por defecto los elementos ocultos no se pueden buscar, pero con esta opción podemos activar que se vean los elementos ocultos.
  • sopt: especifica las opciones que pueden ser usadas solamente en la busqueda avanzada del navgrid.
  • defaultValue: establece un valor por defecto para el filtro.
  • value: esta opción solo se usa si usamos el tipo select. Aquí especificamos los valores que puede contener el select, puede ser o una cadena de texto o un objeto javascript con valores y claves. si es un string debe ser en formato csv, donde las filas esten separadas con ; y la clave del value separado con :.
Opciones Estras

Aparte de las opciones antes descritas, en este ejemplo también agregue estas dos opciones:
  • autowidth: Con esta opción en true, nuestro sistema automáticamente agarrara el ancho máximo disponible, y tratara de que las filas todas mantengas la misma proporción.
  • viewrecords: Muestra en la barra de navegación, el numero de filas que hay y el rango que esta mostrando.

Aparte de estas opciones también estan las opciones de reglas de búsqueda, si quieres revisarlas se encuentran aquí: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config. Cabe destacar que estas reglas solo se usan en el cuadro de dialogo y tampoco son muy efectivas.

Para terminar les dejo un ejemplo aquí de lo que se puede hacer, con el ejemplo que venimos haciendo desde el principio. Saludos...

http://bomba1990.pythonanywhere.com/sosinformatico/js/JqGrid_Basico3

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


6 comentarios:

  1. Genial aporte, me fue de mucha ayuda, muchas gracias.

    ResponderEliminar
  2. tengo una duda podrias hacer este ejemplo con base de datos???me serviria de mucho..gracias

    ResponderEliminar
  3. Brother y cual es la sintaxis para la consulta a la base de datos... es decir en el momento que se agregan los campos de busquedad

    ResponderEliminar
  4. Hola, tengo una duda, a ver si me puedes ayudar:
    Tengo creada mi tabla y el cuadro de búsqueda, hago la búsqueda y selecciono el registro deseado, voy a su detalle, grabo (por ejemplo) y al grabar quisiera que me volviera a la búsqueda previa, actualmente cuando grabo lo estoy mandando al grid entero pero sin ningún filtro. No se como volver a la búsqueda anterior. Muchas gracias.
    Por cierto, me encantan todos tus post! los estoy leyendo aunque los escribiste hace ya tiempo :-P

    ResponderEliminar