Unidad 24. AJAX y Spry Framework (VIII)

24.7. Ordenar registros

Cuando creamos repeticiones es probable que queremos que nuestros registros aparezcan ordenados.

Para ello tendremos dos opciones, ordenarlos desde un principio o añadir un comportamiento para que cuando se produzca determinado evento los registros que se están mostrando en pantalla se ordenen automáticamente. Por ejemplo, al pulsar un encabezado.

 

Crear comportamientos es muy sencillo. Spry es una librería JavaScript, así que podemos emplear sus eventos. El evento más utilizado es el onclick al ser el que más interacción tiene con el usuario (como vimos en el tema de Comportamientos avanzados).

Ordenar un listado utilizando un comportamiento es muy sencillo.

Bastará con utilizar el método sort:

<div spry:region="miDataSet">

  <table>

    <tr>

      <td onclick="miDataSet.sort('@id');">ID</td>

      <td onclick="miDataSet.sort('propiedad');">PROPIEDAD</td>

    </tr>

    <tr spry:repeat="miDataSet">

      <td>{@id}</td>

      <td>{propiedad}</td>

    </tr>

  </table>

</div>

Como puedes ver en el ejemplo, este código creará una tabla con un encabezado con las palabras ID y PROPIEDAD.

El resto de filas serán repeticiones que mostrarán los diferentes registros del dataset.

Si hacemos clic en alguno de los encabezados, los registros se reordenarán para mostrarse ordenados por el campo que se encuentra en el encabezado pulsado. A la celda le hemos añadido un comportamiento onclick que ejecute sobre el dataset miDataSet el método sort ordenando por el campo entre paréntesis.

 

Es posible especificar en qué dirección se realizará la ordenación, para ello deberás indicarlo añadiendo un nuevo parametro:

miDataSet.sort('propiedad', 'ascendig')

miDataSet.sort('propiedad', 'descending')

miDataSet.sort('propiedad', 'toggle')

Al asociar este método a un comportamiento podemos provocar que los registros se ordenen ascendentemente, descendentemente o utilizar la propiedad toggle para que cada vez que se provoque el comportamiento cambie la ordenación de ascendente a descendente y viceversa.

 

Como hemos dicho también es posible provocar la ordenación al cargar el dataset, de esta forma al visualizar los datos por primera vez aparecerán ordenados de la forma en que queramos y no hará falta esperar a que se realice un comportamiento para ordenarlos.

Ordenar un dataset en la carga requiere que se especifique en el momento en que lo definimos.

Veamos un ejemplo:

<script type="text/javascript">

   var miDataSet = new Spry.Data.XMLDataSet("archivo.xml","listado/elemento",{sortOnLoad:"propiedad", sortOrderOnLoad:"descending"});

</script>

Aquí, en el momento de la declaración del dataset indicamos por qué campo se debe de ordenar y en qué sentido.

Podemos ordenar por varios campos, separándolo por /. Por ejemplo sortOnLoad:propiead/@atributo.

 

La ordenación en algunos momentos puede crearnos problemas si estamos visualizando campos que contienen números o fechas. Por ejemplo como número, 9 es menor que 10. En cambio, como texto al ordenar alfabéticamente, '10' va antes que '9'.

Para ello utilizaremos la declaración de los tipos de columnas:

<script type="text/javascript">

   var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento", {sortOnLoad:"propiedad", sortOrderOnLoad:"descending"});

   miDataSet.setColumnType("propiedad", "number");

</script>

De esta forma estamos indicando que la columna propiedad es de tipo numérico, también podríamos haber escrito date si fuese de tipo fecha.

Por defecto las columnas se consideran de tipo texto y por lo tanto se ordenará alfabéticamente.

Pág. 24.8

Atrás  Inicio  Adelante