sábado, 29 de mayo de 2010

jQuery - Plug-in: Tablesorter, Resaltar fila en el evento mouseover

Como es bien sabido el plug-in Tablesorter de jQuery permite ordenar una tabla html por cada una de sus columna o conjunto de columnas, parametrizable y muy configurable. En el ejemplo que presento, adicioné un widget a este plug-in, el cual permite resaltar la fila por la que pasa el ratón.

/*
Nota: Para este ejemplo, estoy utilizando la estructura de estilos que vienen en el archivo style.css de los temas blue y green que se descargan de la página oficial de http://tablesorter.com/docs/#Download.

Pasos a seguir:
1) Editar el archivo jquery.tablesorter.js 
- ir al final del archivo 
- encontrarás })(jQuery); como la línea final 
- abrir dos líneas justo arriba de esta línea 
- insertar este código (vamos a crear un widget) 

// widget added by Ultiminio Ramos Galan 2010-05-28
   ts.addWidget({
      id: "zebraHover",
      format: function(table){
         $(table.tBodies[0].rows).css({
            'cursor' : 'pointer'
         });
         $(table.tBodies[0].rows).hover(function(){
            ($(this).get(0).className == 'hover') ? xvoid = '': xclassName = $(this).get(0).className;
            $(this).removeClass('odd').removeClass('even').addClass('hover');
            },
         function(){
               $(this).removeClass('hover').addClass(xclassName);
            }); // end .hover()
      } // end function
   }); // end widget zebraHover

/* 2) Abrir el archivo style.ccs que corresponda a los temas blue o green. Hacer estos cambios: 
- localizar la línea: 
table.tablesorter tbody td {
- comentar background-color, deberá verse de esta manera */
/* background-color: #FFF; */ 
- agregar dos nuevos estilos: 
table.tablesorter tbody tr.even td { 
   background-color:#FFF; 
} 
table.tablesorter tbody tr.hover { 
   background-color: #C5E1FB; 
} 

/* 3) Ir al código de tu programa e invocar tablesorter de esta manera: */
$("#table-data").tablesorter({ 
   sortMultiSortKey: 'ctrlKey' 
   , widthFixed: true 
   , widgets: ['zebra', 'zebraHover'] 
}); // end tablesorter 

// Eso es todo! 
/*
ALTERNATIVA: Si no deseas modificar el core de jquery.tablesorter.js, la alternativa es la siguiente: 
1) En tu archivo de programa, antes de invocar a table sorter, simplemento lo inicializamos de esta manera: */
$.tablesorter.addWidget({
      id: "zebraHover",
      format: function(table){
         $(table.tBodies[0].rows).css({
            'cursor' : 'pointer'
         });
         $(table.tBodies[0].rows).hover(function(){
            ($(this).get(0).className == 'hover') ? xvoid = '': xclassName = $(this).get(0).className;
            $(this).removeClass('odd').removeClass('even').addClass('hover');
            },
         function(){
               $(this).removeClass('hover').addClass(xclassName);
            }); // end .hover()
      } // end function
   }); // end widget zebraHover

2 comentarios:

Datos personales

Mi foto
Podrás encontrar códigos recursos y artículos sobre PHP, JavaScript, jQuery, MooTools, Ajax, CSS, HTML, UML, RUP, AUP, XP (eXtreme Programming), Six-Sigma, CMMI, FrameWorks, Zend Framework, Magento, CodeIgniter, CakePHP, Joomla 1.5, Doctrine, Active Record, ORM, POO, MVC, MySql, PostgreSql. Este espacio está destinado a ayudar y compartir un poco de lo mucho que he recibido de la comunidad en la Red.