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.
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. "
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:
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.
