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: 216

Visitas el mes pasado: 23

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 (VI)

Construir tablas

imagen mootools

La clase HtmlTable()

Crear una tabla con HTML puede ser un trabajo bastante laborioso, se utiliza mucho código, y si además queremos que la tabla sea dinámica, es decir que podamos poner o quitar elementos, debemos usar también javascript.

La clase HtmlTalbe() de mootools, pretende ser una ayuda para la creación de tablas, y puede ser una opción para la creación de tablas dinámicas, o provenientes de una base de datos.

Veremos aquí como crear una tabla con la clase HtmlTable() de mootools, y también cómo añadir o quitar elementos de la tabla según nos convenga.


Instanciar un objeto

El primer paso para crear una tabla con mootools es instanciar un objeto de la clase HtmlTalbe. Como argumentos pasaremos un identificador, y una serie de opciones:

miTabla=new HtmlTable("tabla1",{[opciones]}

Estos dos argumentos son opcionales, es decir, pueden ponerse o no, sin embargo es más que conveniente ponerlos si queremos que la tabla tenga contenido y estilo.

El primer argumento, "identificador", sierve para identificar la tabla, no confundir con el atributo "id", ya que no es lo mismo.


Opciones

En el segundo argumento podemos poner una serie de opciones, las cuales son las siguientes:


Sin embargo en las tablas en html, cualquier etiqueta de celda de una tabla (td, th) puede llevar atributos. Por ejemplo, mediante un atributo de estilo cambiamos el color del texto de la primera celda:

[{content:"Emilio", properties:{style:"color:red"}}, "655871988", "emilguti@hotmail.com"],

Para ello desdoblamos el elemento con las opciones content (contenido), donde pondremos el contenido del elemento, y properties (propiedades o atributos), donde pondremos los atributos.

Por tanto cada elemento de la tabla podemos ponerlo de forma simple (sólo el contenido), o de forma detallada (conenido y atributos).Todo ello lo ponemos encerrado entre llaves, para indicar que esto es sólo un elemento del array. Recuerda que también podemos poner los atributos (propiedades) colspan y rowspan si queremos que una celda ocupe el lugar de varias.

Una vez que hemos construido la tabla tenemos que insertarla en la página, esto lo haremos mediante el método .inject(). Para ello antes hemos creado en la página un div id="mitabla" en el lugar que queremos poner la tabla. insertamos la tabla.

miTabla.inject($("mitabla"))

Con esto ya tenemos la tabla dentro de la página.

Al ejemplo que estamos haciendo le hemos añadido un par de lineas en el código CSS para que quede mejor:

#tabla1 th { text-align: center; padding: 5px; font-weight: bold; }
#tabla1 td { text-align: left; padding: 5px 10px; }

Y El resultado es la siguiente tabla:


El código javascript-mootools, visto hasta ahora, para realizar esta tabla es el siguiente:

miTabla=new HtmlTable("tabla1",{
   properties: {cellpadding:3, border:1, id:"tabla1",width: 400},
   headers: ["Nombre","Teléfono","E-mail"],
   rows:[
      [{content:"Emilio",properties:{style:"color:red"}},"655871988","emilguti@hotmail.com"],
      ["Jessica","695554279","jesssicagonzalez@gmail.com"]
      ]
});
miTabla.inject($("mitabla"));

Podemos reordenarlo de una forma más clara si ponemos los arrays aparte:

cabecera=["Nombre","Teléfono","E-mail"];
fila1=[{content:"Emilio",properties:{style:"color:red"}},"655871988","emilguti@hotmail.com"];
fila2=["Jessica","695554279","jesssicagonzalez@gmail.com"];
miTabla=new HtmlTable("tabla1",{
   properties: {cellpadding:3, border:1, id:"tabla1",width: 400},
   headers: cabecera,
   rows:[fila1,fila2]
});
miTabla.inject($("mitabla"))


Métodos.

La clase HtmlTable() tiene varios métodos aplicables a los objetos creados en esta clase. Con ellos podemos hacer varias modificaciones en la tabla.


push

El método push() permite insertar una nueva fila en la tabla. Lleva varios argumentos:

miTabla.push(fila,propiedades,referencia,etiqueta,insertar_en)

Explicamos a continuación los argumentos:

Veamos ahora el código completo del método, tal como lo hemos ido haciendo en las explicaciones anteriores:

miTabla.push(
   ["Federico","664412874","federramirez@yahoo.es"],
   {id:"fila1",style:"background-color:'silver'",title:"Federico"},
   $("tabla1"),
   "td",
   "bottom"
);


pushMany

El método pushMany(), es similar al anterior, con la única diferencia de que aquí insertamos varias filas a la vez. Tiene la siguiente sintaxis:

miTabla.pushMany(filas,propiedades,referencia,etiqueta,insertar_en)

Vemos que sólo cambia el primer argumento, en el que en lugar de insertar una sóla fila, insertamos varias, todas ellas metidas dentro de un array. El segundo argumento, propiedades, inserta las propiedades o atributos igual en todas las filas. Veamos el código de un ejemplo:

miTabla.pushMany(
   [["Adolfo Gonzalez","689221586","adolfoGonzales@yahoo.es"],
      ["Valerio Gonzalez","655988214","valerioGonzales@yahoo.es"]],
   {class:"gonzalez",style:"background-color:'aqua'"},
   $("fila1"),
   "td",
   "after"
);

Vemos aquí el ejemplo anterior al que le hemos añadido los elementos que hemos visto en los métodos anteriores. Así queda la tabla:



update

El método update() sirve para actualizar o cambiar los datos de una fila. Su sintaxis es la siguiente:

miTabla.update(ref_fila,nueva_fila);

El primer argumento es la referencia al elemento que contiene la fila. El segundo es el array que contiene los nuevos elementos de la fila:

miTabla.update($("fila1"),["Luis Federico","658711499","federramirez@yahoo.es"]);


empty

El método empty() vacía la tabla de contenido, borrando todas las filas de la misma, excepto la fila de la cabecera (fila creada con headers). Este método no tiene argumentos.

miTabla.empty();


set

Este método permite crear o cambiar (en caso de que ya exista) la primera o la última fila de la tabla (cabecera o pie). Su sintaxis es la siguiente:

miTabla.set("headers"||"footers",array_fila);

El primer argumento sólo admite como valor las cadenas "headers" (cabecera), o footers (pie), indicando la fila que será cambiada. El segundo argumento es el array con los elementos de la fila.


Otros métodos

Para variar o cambiar, o eliminar filas o celdas también podemos usar los métodos del DOM de mootools, aplicados a la fila o celda. Podemos ver estos métodos en la primera parte de este manual, en la página : 1.4 Métodos del DOM





Seguimos viendo la construcción de tablas mediante mootools. Esta vez veremos ciertos tipos de tablas que podemos hacer, y que pueden sernos útiles para presentaciones, o para mostrar bases de datos.

Estilos de tablas



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