SlickGrid. DataView (III) - Filtros de datos

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender
SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos
SlickGrid. Proveedor de datos (I) - Creando un proveedor de datos
SlickGrid. Proveedor de datos (y II) - El método getItemMetadata
SlickGrid. DataView (I) - Introducción y uso
SlickGrid. DataView (II). Ordenación simple y múltiple

Para realizar el filtrado de datos el DataView proporciona dos métodos:

• setFilter(filterFunction): método que permite establecer la función de filtrado. La función pasada como parámetro es llamada para cada uno de los elementos del origen de datos y recibe a su vez dos parámetros:
  • item: con el elemento de datos a filtrar
  • args: con un objeto con los valores del filtro
  La función devuelve true si el elemento cumple las condiciones del filtro, en otro caso devuelve false.
• setFilterArgs(args): método que nos permite establecer un objeto con los valores a aplicar al filtro y que recibirá como parámetro la función definida mediante el método setFilter.

Para el ejemplo voy a crear un filtro por precio del producto, de forma que únicamente se muestren los productos con un precio superior a un valor dado.

Para ello definiré la función de filtrado costFilter que recibe como parámetros un elemento de datos y un objeto args que tendrá una propiedad minCost con el precio mínimo que deben tener los productos a mostrar. La función devuelve true si el elemento tiene un precio igual a superior al especificado, si es menor devuelve false.

A continuación le asignaré la función de filtrado al proveedor de datos a través del método setFilter.

• DataView.html

function costFilter(item, args) {
 if (args == null) return true;

 return (item["StandardCost"] >= args.minCost);
}

dataProvider.setFilter(costFilter);

Para establecer el valor de filtrado voy a crear un control de tipo slider (input de tipo range) debajo del grid. Crearé también una etiqueta span que se actualizará cuando cambie el valor del control slider para presentar su valor actual.

Al modificar el valor del control slider actualizaré el objeto de valores del filtro a través de la propiedad setFilterArgs del proveedor de datos. El objeto tendrá una única propiedad minCost con el valor seleccionado en el slider. A continuación llamo al evento refresh del DataView para que genere los eventos de modificación de datos y se actualice el grid, ya que estos eventos no se generan de manera automática al modificar la función de filtrado o el objeto de valores de filtro.

• DataView.html

<div id="DataViewGrid" style="width:1024px; height:500px;"></div>
<div style="padding:10px">
 Filtro: Precio mínimo <span id="minCost">0</span><br />
 <input id="costFilter" type="range" min="0" max="2500" step="10" value="0" />
</div>
 
 
 ......
 
 
$("#costFilter").change(function (e) {
 var value = $(this).val();
 $("#minCost").text(value);
 dataProvider.setFilterArgs({ minCost: value });
 dataProvider.refresh();
});

Si cargamos la página en el navegador comprobaremos que no sólo aparece el nuevo control debajo del grid, si no que, si modificamos su valor, el grid se actualiza para mostrar únicamente los productos que cumplen el criterio del filtro.

El código

Puedes descargar el código de todos los ejemplos de SlickGrid de:

SlickGrid. Tutorial basado en ejemplos

Artículo siguiente:
SlickGrid. DataView (y IV) - Paginación (previsto 21/06/2015)