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

Agregando Paginación jQuery Grid.

Como lo prometido es deuda, tarde pero hay voy, llevo tiempo sin tiempo para escribir pero voy a tratar en estos días de publicar los artículos referentes al uso de jQuery Grid. En este manual les voy a mostrar como agregar paginación al Grid que ya habíamos creado en el tutorial anterior.

Agregar la paginación es sumamente sencillo, y no nos va a tomar mucho tiempo. Lo único que necesitamos es el proyecto anterior en nuestra computadora.

Empezamos, lo primero que debemos hacer es agregar un elemento div después de el elemento table con el id=pager.

Después tenemos que agregar al constructor de jqGrid estos dos elementos: pager, rowNum estos dos elementos son lo básico para que jqGrid empiece a paginar las tablas.

• pager: es la opción de jqGrid, donde especificamos el id del div, que jqGrid va a usar como barra de navegación. Debemos colocar es un selector como el que colocamos entre paréntesis.
• rowNum: con este parámetro le decimos al plugin cuantas filas va a mostrar por pagina. Ya solamente con especificar esto, el jqGrid pagina nuestro resultado de 10 en 10.

A la final quedaria de esta manera el código de javascript:

$("#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,
 pager:'#pager',
 rowNum: 10

});
 for(var i=0;i<=mydata.length;i++)
  jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
 jQuery("#list").trigger("reloadGrid")
});

Al final del javascript después de cargar las filas debemos agregar un desencadenador del evento "reloadgrid", para que jqGrid re ordene y acomode las filas con la paginación que le agregamos.

Parámetros extras para la paginación.

Aparte hay otros parámetros que podemos configurar que tienen que ver con la paginacion:

• rowList: con este parámetro le especificamos al jqGrid, que de la opción de poder cambiar el numero de filas que va a mostrar, es decir que la persona pueda establecer el numero de filas que va a mostrar por en el grid.
• height: con el parámetro height especificamos la altura del grid, pero si lo ponemos en "auto", el grid va a tener automáticamente la altura que tengan las filas que están internas del grid, y si las cambiamso automáticamente cambia la altura del grid.

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

Con esto terminamos por hoy como siempre los enlaces para descargarlo y para verlo en acción:
Descarga
jqGrid Basico2

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.

Jquery Tags input autocomplete. 1.3

Ya e mejorado el script de Jquery Tags input como lo habia dicho, compatible con jquery 1.5 y jquery ui 1.8.10, le e echo varias mejoras:

El parametro autocomplete ahora acepta sctring, array y object, los string y array los pone directamente como source del autocomplete, y si se le pasa un objeto es igual que el jquery ui autocomplete, se podran documentar mas en la la pagina de Jquery ui autocomplete.

Tambien le e echo otras pequeñas correcciones pero que no son muy importantes. espero pronto sacar otra versiona themable compatible completamente con jquery ui.

Aqui esta el archivo: Tags input

Jquery Tags input + Jquery ui autocomplete

Este fin de semana, termine las clases en la universidad, ando de vacaciones y con bastante tiempo libre. Hace un tiempo hice un trabajo para la pagina de artigoo, en la cual entre muchas las cosas que tuve que hacer fue acomodar un script de http://xoxco.com/clickable/jquery-tags-input para que pudiera trabajar con autocomplete, el problema es que el script lleva desde hace un tiempesito que no es actualizado trabajaba con jquery 1.3.2 y además trabajaba con un script de autocomplete descontinuado y ya un poco feo, entonces tuve que acomodarlo un poco y darle unos retoques para que pudiera funcionar con jquery ui autocomplete y la ultima versión de jquery.

Asi que si usas tags para organizar tags en tu website? Este plugin tornara tu aburrida lista de tags en un mágico campo que torna cada tag en una estilizada objeto con su propio link para eliminarlo. El plugin maneja toda la data - y en tu formulario se verán los tags delimitados por una coma.

El script no esta cien por ciento perfeccionado pero es funcional, después lo mejorare, si me pueden hacer llegar sus ideas o sugerencias para la mejora del plugin seria bueno, después que lo mejore lo publicare, pero mientras tanto aqui se los dejo, con un pequeño ejemplo. http://www.box.net/shared/8popiobf1u

Ya saque la nueva versión, aqui esta:  version 1.3