Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (III Avanzado)

MooTools: la librería más completa para trabajar fácilmente con javascript.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

MooTools3 (VIII)

Tablas ordenadas

Introducción

Tal vez es este uno de los efectos más demandados: que cuando presentemos una tabla en una página, las filas aparezcan con un cierto tipo de orden, y que además, al pulsar sobre cualquiera de los elementos de la cabecera, la tabla quede ordenada según el elemento pulsado.

La opción sortable

Al instanciar una tabla de la clase HtmlTable(), podemos poner en la lista de opciones (segundo argumento) la opción sortable: true, la cual hace que los elementos de la tabla aparezcan ordenados.

sortable: true,

Esta opción tiene un valor booleano, que por defecto es false. Al cambiarlo a true se activan otras opciones con las que podemos controlar la ordenación de la lista. Estas son:

• sortIndex : Como valor se pasa un número entero (por defecto el 0), que indica la columna por la que se ordenará la tabla al inicio.
• sortReverse : valor booleano (por defecto false). Con true la fila inicial quedará ordenada en sentido inverso.
• defaultParser : Se marca aquí el criterio de ordenación que se seguira en defecto para todas las columnas de la tabla. Podemos pasar los siguientes valores para los tipos de ordenación:
  • "string" : por orden alfabético. es el valor por defecto
  • "number" : por el valor de los números enteros.
  • "float" : por el valor de los números reales.
  • "numberLax" : por números enteros mezclados con otros datos.
  • "floatLax" : por números reales mezclados con otros datos.
  • "date" : por fechas.
  • "title" : por el valor del atributo title de los elementos.
  • "input-value" : para elementos de formulario input, según el valor del atributo value.
  • "input-checked" : para elementos de formulario tipo check, según estén o no seleccionados.
  También podemos crear nosotros nuestros propios criterios de ordenación con la clase: HtmlTable.Parsers() indicando una expresión regular que indique el criterio de ordenación. La creación de un objeto de este tipo suele ser complicada, por lo que en principio utilizaremos los criterios (parsers) que vienen ya predefinidos.
• parsers : Aquí podemos mediante un array definir un criterio de ordenación diferente para cada columna. Cada elemento del array se corresponde con una columna, y ponemos en él su criterio de ordenacion, por ejemplo en una tabla de tres columnas podemos poner:

  parsers: ["string","number","title"]

• classSortable : Esta opción y las siguientes añaden el atributo class a distintas partes de la tabla, con lo cual podemos después aplicarles distintos estilos CSS. Como valor ponemos en una cadena el nombre que le queremos dar a la clase. Esta opción en concreto selecciona todos los elementos de la tabla cuando la opción de ordenación está activada. El valor por defecto es "table-sortable"
• classHeadSort : añade una clase a la celda de cabecera de la columna de ordenamiento, cuando el ordenamiento es hacia adelante (no en sentido inverso). El valor por defecto es "table-th-sort"
• classHeadSortRev :añade una clase a la celda de cabecera de la columna de ordenamiento, cuando el ordenamiento es en sentido inverso. El valor por defecto es "table-th-sort-rev".
• classGroupHead : esta clase se aplica a todos los elementos de tipo th. Su valor por defecto es "table-tr-group-head".
• classCellSort : esta clase se aplica a las celdas tipo td (todas excepto la cabecera) de la columna de ordenamiento. Su valor por defecto es "table-td-sort".

Vemos aquí a la derecha un ejemplo de tabla ordenable en el que hemos puesto alguna de las opciones vistas anteriormente. Al pulsar sobre las celdas de la cabecera, los elementos de la tabla se ordenan según la columna pulsada.

Los distintos estilos indicados por las opciones tipo "class" distinguen cuales son las celdas ordenadas, y si su ordenación es en sentido normal o en sentido inverso.

Vemos a continuación los códigos para crear esta tabla. En javascript-mootools tenemos el siguiente código:

cabecera=["Nombre","Apellido","Teléfono"];
fila1=["Juan","Rodriguez","665447001"];
fila2=["Alberto","Barbacil","625500419"];
fila3=["Laura","Aparicio","621478695"];
fila4=["Carmen","Garrido","684211019"];
mitabla=new HtmlTable("mi_tabla",{
   properties: {cellpadding:5, border:1, id:"mi_tabla",width: "100%"},
   headers: cabecera,
   rows:[fila1,fila2,fila3,fila4],
   sortable: true,
   sortIndex: 1,
   parsers: ["string","string","number"],
   classSortable: "ordenables",
   classHeadSort: "orden_directo",
   classHeadSortRev: "orden_inverso",
   classGroupHead: "grupo",
   classCellSort: "celdas_ordenadas",
   });

En la hoja de estilos CSS añadimos también algunas líneas que se corresponden con las clases que se han indicado en las opciones. Por lo tanto en la hoja de estilo CSS añadimos el siguiente código:

#caja1 { width: 45%; float: right; margin: 1em 3em 1em 1em; border: 1px solid navy;  }
.ordenables { color: maroon; }
.orden_directo { background-color: aqua; }
.orden_inverso { background-color: #ffb6b7; }
.grupo { background-color: silver; }
.celdas_ordenadas { background-color: lime; }

Con esto completamos el código para el ejemplo que hemos dado.

Puedes ver más sobre este tema (tablas ordenadas) en la página de mootools.docs Class: HtmlTable.Sort (web oficial de mootools).

Métodos

Relacionados con las tablas ordenadas podemos usar los siguientes métodos:

• disableSort() : Desactiva los mecanismos de ordenamiento de la tabla. el método no tiene argumentos.

  mitabla.disableSort();

• enableSort() : Activa los mecanismos de ordnamiento de la tabla. el método no tiene argumentos.

  mitabla.enableSort();

• reSort() : Vuelve a activar los mecanismos para poder ordenar la tabla. Suele usarse después de añadir nuevas filas o columnas a la tabla.

  mitabla.reSort();

En la próxima página vamos a ver otro tema también interesante, cómo realizar eventos del teclado al pulsar las teclas.

Eventos del teclado

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com