Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 19

Visitas el mes pasado: 13

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

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




MooTools3 (VIII)

Tablas ordenadas

imagen mootools

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:

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:




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



Manual de Mootools (III Avanzado)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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