Manipulación fácil del DOM de una tabla con MooTools
Como mencioné anteriormente, he utilizado MooTools en algunos de los proyectos que he realizado con la Fundación donde trabajo. Una de las funcionalidades que frecuentemente se requiere implementar es la de permitir agregar y remover dinámicamente filas o registros a una tabla, para esto utilizamos JavaScript. El diseño que mas utilizamos es la mas simple de todas: manipular el DOM de la tabla localmente en el cliente y dejarle el trabajo a la aplicación del lado del servidor de manejar el almacenamiento de los registros.
Históricamente realicé una primera versión de esta funcionalidad utilizando las funciones de manipulación del árbol DOM de JavaScript pero no tenía experiencia con ellas y apenas estaba aprendiéndolas por lo que su diseño poco eficiente con una implementación terrible. Después conocí las librerías de JavaScript e hice una segunda versión utilizando MooTools; el resultado fue algo mejor, sin embargo no muy eficiente: debía crearse funciones JavaScript (implementación incluída) por cada tabla que se fuera a manipular
. Aún no conocía el buen uso de las funciones $ y $$.
Ahora he creado una nueva versión que como lo que me gusta … es muy simple. Permite agregar y remover filas de cualquier tabla e inclusive permite manejar varias tablas en la misma página que se identifican con su atributo id a través de un único conjunto de funciones que se incluyen a través de una etiqueta <script>.
En el script se definen dos funciones: TDAgregarRegistro(tablaId) y TDRemoverRegistros(tablaId) que permite agregar y remover filas (seleccionadas) de una tabla respectivamente.
El usuario deberá por su parte definir las siguientes funciones para determinar comportamiento de las funciones base.
- obtEstructuraRegistro(tablaId): determina la estructura de las filas o registros de la tabla.
- obtPropiedadesCampo(tablaId): determina las propiedades o atributos de un campo de la tabla.
- obtPropiedadesFila(tablaId): determina las propiedades o atributos de una fila de la tabla.
Cada una de estas funciones recibe el id de la tabla a la cual se hace referencia, con este valor la función deberá determinar su respuesta, la cual es un arreglo asociativo. Por la simplicidad requerida por la solución, por ahora se soportan dos tipos de campos: de texto y de selección.
Enlaces:
- Ejemplo de demostración versión 0.2.
- Ejemplo de demostración versión 0.1.1.
- Funciones base de manipulación del DOM.
- Referencia al API de MooTools.
Artículo relacionado: Manipulación fácil del DOM de una tabla con Prototype.































