Filtrar GridView con un slider

Posted on


Cada vez se desea que el cliente tenga más herramientas y facilidades para realizar tareas en una aplicación, una de dichas tareas se encuentra cuando se tiene una tabla (en nuestro caso un gridview) el cual lista unos determinados productos, con una cantidad y un precio, bueno es un ejemplo algo sencillo pero será de utilidad para poder realizar el ejemplo.

Bien, lo que se desea tener es un slider que permita realizar un filtro de esa grilla y muestre solo los productos que cumplen con la condición especifica.

Para esta tarea vamos a hacer uso de jQuery y en especial de la librería jQuery UI la cual ofrece varios widgets bastantes buenos.

Ahora, tenemos un problema al utilizar el gridview, ya que su renderizado normal no es el mejor, así que vamos a hacer uso de los css friendly control adapters, los cuales ayudan a mejorar el renderizado del grid.

Y manos a la obra:

1. Referenciamos la librería core de jQuery, la librería de jQuery UI y las hojas de estilos a utilizar:

   1:  <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
   2:  <script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
   3:  <link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
   4:  <link href="styles/Grid.css" rel="stylesheet" type="text/css" />

2. Creamos el GridView (en el ejemplo encontrará como se realiza el cargue de datos), lo importante en este línea es que para asignar un estilo se usa el atributo CSSSelectorClass:

   1:  <asp:GridView ID="grvDatos" runat="server" AutoGenerateColumns="true" 
   2:      CSSSelectorClass="grid">
   3:  </asp:GridView> 

3. Definimos un div el cual será el slider:

   1:  <div id="slider"></div>

4. Definimos un label y una caja de texto para mostrar el valor actual del slider:

   1:  <p>
   2:      <label>Precio mínimo (Incremento 100):</label>
   3:      <input type="text" id="txtValor" style="border:0; color:#f6931f; font-weight:bold;" />
   4:  </p>

5. Y finalmente el código jQuery:

   1:  $(function () {
   2:      $("#slider").slider({
   3:          value:0,
   4:          min:0,
   5:          max:5000,
   6:          step: 200,
   7:          animate: true,
   8:          range: true,
   9:          slide: function (event, ui) {
  10:             $("#txtValor").val("$" + ui.value);
  11:             filterGrid(ui.value);
  12:          }
  13:      })
  14:      $("#txtValor").val("$" + $("#slider").slider("value"));
  15:  })
  16:  function filterGrid(valorMin) {
  17:      var min = valorMin;
  18:      var max = 5000;
  19:      $("#<% = grvDatos.ClientID %>  table tbody tr").each(function () {
  20:          var price = parseInt($(this).find('td:last').text());
  21:          if (price >= min && price <= max) {
  22:              $(this).fadeIn();
  23:          } 
  24:          else {
  25:              $(this).fadeOut();
  26:          }
  27:      });
  28:  }

Bueno vamos a revisar ese código:

En la línea 1 verificamos que el DOM este listo, luego de la línea 2 – 13 viene la declaración del widget de tipo slider, y las propiedades que le definimos son:

  • value: valor inicial
  • min: valor mínimo
  • max: valor máximo
  • step: valor del incremento
  • animated: si el slider será animado
  • range: indica si se mostrará un color de fondo sobre la parte del slider que ya ha sido seleccionada
  • slide: función que se ejecuta cada vez que se cambia el valor del slider, en este caso primero se asigna el valor seleccionado a la caja de texto y segundo se llama a la función que realizará el filtro.

Luego de la línea 16 – 28 es la función que realiza el filtro del grid, esta función recibe como parámetro el valor mínimo el cual para este ejemplo será el valor seleccionado en el slider, la línea 17 y 18 asignan el valor mínimo y máximo en dos variables, luego en la línea 19 le decimos por medio del selector que seleccione del div grvDatos la tabla, luego que de esa tabla seleccione el cuerpo de la tabla y finalmente las filas del cuerpo de la tabla, y por medio de la función each entonces vamos a recorrer todas las coincidencias encontradas.

En la línea 20 guardamos en una variable el valor de la última celda de la tabla de cada fila que para nuestro ejemplo será el precio, en la siguiente línea se válida que si ese valor está entre un determinado rango entonces que muestre la fila, de lo contrario que la oculte.

Finalmente se verá algo así:

Imagen1

Espero les sea de utilidad, como siempre les dejo el código del ejemplo, para este caso solo en VB, ya que en C# lo único que cambia es la forma de cargar el grid y pues la idea de este ejemplo es otra:

Link al ejemplo !

About these ads

Un comentario en “Filtrar GridView con un slider

    ingphillip escribió:
    08/04/2011 en 09:42

    Excelente, lo mejor JQuery!

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s