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


martes, 20 de marzo de 2012

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


lunes, 19 de marzo de 2012

Usar jquery, en conjunto con otras librerias

Cuando trabajamos con paginas web muchas veces tenemos el desagrado de trabajar en proyectos donde ya hay alguna librería javascript siendo usada, y tenemos que hacer algo rápido (nunca los jefes o los que te contratan pueden esperar) o es muy grande el proyecto y cambiarlo todo seria una locura, o simplemente no conoces ni pió de la otra librería y que ademas tenga las tres b(bueno, bonito y barato), y nos toca trabajar con  jquery, junto a otra librería más que casualmente también usa el símbolo de $ para programar, y que si pones la librería de jquery, pues te van a dar rollos y o deja de funcionar algo, o no puedes hacer lo que quieres.

Como muchos de ustedes sabrán que al programar con jQuery se puede usar el símbolo de dolar o la palabra "jQuery", entonces para resolver el problema de dos librerías diferentes, lo que hacemos es usar la función .noConflict() de jquery que "deshabilita" el símbolo de $ para jQuery y nos deja solamente "jQuery", para poder programar. un ejemplo de esto seria asi:

<script type="text/javascript" src="xxx.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$.noConflict(); 
jQuery(document).ready(function($) { 
    // Código que usa jQuery dolar puedes usarlo aqui
}); 
// Código que usa dolar de otra librería puedes usarlo aqui.. 
</script>

Por lo general lo que yo hago es que de una ves cuando incluyo el archivo de jquery le coloco el $.noConflict y así el ya queda configurado para todo el sistema. y uso el jQuery normal en el resto de código.

Espero que esto les sirva de ayuda en sus proyectos. Como me a sido de ayuda a mi. Por supuesto esta practica no la recomiendo, es preferible que si un proyecto se va a hacer con una librería, se termine de hacer con esa librería. El uso de librerías diferentes aumenta el peso de nuestra pagina y por ende influye en el rendimiento de la misma. Ademas de que nos ocupa ancho de banda y todo lo demás.

SVN Sistema de subversiones


Subversión es un sistema de control de versiones que permite manejar proyectos de programación con varios programadores de una manera fácil y sencilla, permitiendo que cada uno trabaje al mismo tiempo en un código, pero que no se pisen los talones, sino que todos pueden trabajar armónicamente en un mismo proyecto. Muy útil cuando hay varios programadores que no están cerca, sino que se encuentran alejados geográficamente.

Lo que hace este sistema es indexar todos los archivos de un proyecto y ponerle una versión. Cuando cualquiera haga cambios, y haga un commit (suba los cambios al servidor), el sistema agregara una nueva versión al sistema, le colocara ese numero de versión al archivo y guardara un mensaje de modificación al svn. Después de esto los cambios echos en el archivo estarán disponibles para todo el mundo.

Si nosotros estamos trabajando con un versión local de un archivo y otra persona sube cambios en ese mismo archivo, a la hora de hacer un commit nosotros nos dará error, porque nos va a decir que nuestra version y la que estan en el servidor son diferentes, para acomodarlo tenemos que resolver los conflictos existentes para poder subir nuestro archivo, con lo cual es sistema se asegura que en ningun momento se vayan a eliminar los cambios echos por la otra persona.

Clientes SVN:

Hay muchos clientes svn, pero estos son lo que yo uso, dependiendo si estoy en linux o windows:

  • Windows http://tortoisesvn.net/ 
  • En linux, en la consola de comandos hay un comando llamado svn, que nos permite manejar todo pero desde consola.


Comandos básicos del SVN

SVN:checkout

Este comando obtiene los archivos que están en el servidor y crea una copia local. Listo para empezar a usarlo. 

SVN:update

Este comando actualiza una copia local a la ultima que este en el servidor. Y nos avisa cuando hay diferencias entre nuestra copia local y la versión del servidor.

SVN:add  

Con este comando, agregamos un archivo o una carpeta al sistema de versiones, este no se enviara hasta que hagamos commit.

SVN:delete 

Elimina un archivo del sistema de versiones, hasta que no se haga commit los cambios no afectaran el servidor.


SVN:commit

Este comando sube las modificaciones que hayamos echo en los archivos locales, al servidor. Cuando usemos este comando, nos va a permitir dejar un mensaje de información de que cambios hemos echo en esta version que estamos subiendo.


SVN:log

Con este comando obtenemos un log de los mensajes dejados en cada una de las modificaciones de las versiones. y si especificamos un archivo nos dará los log de los cambios de ese archivo en especifico. Muy útil para tener una idea de que se va haciendo.


Aparte hay muchos otros comando mas como reverse, merge o diff, pero la idea de este articulo es simplemente dar una pequeña introducción, si desean leer un poco màs sobre el tema pueden consultar aquí, que hay una guía completa de como se usa el svn, muy util en español: http://svnbook.spears.at/nightly/es/

Si ustedes quieren empezar a usar esto, por probar y de manera gratuita, pues les recomiendo esta pagina: http://xp-dev.com/, es un servidor de svn, que tiene un aparte gratuita, yo lo uso bastante.