miércoles, 7 de marzo de 2012

Componente Tabla, primera parte mostrando los datos

El objetivo principal es crear un componente que me permita mostrar, actualizar y borrar  el contenido de una tabla de la base de datos en forma tabular con solo cargar sus librerías y la del componente a desarrollar y que se detecte automáticamente dentro del código html, para esto consideré 2 alternativas, crear mi propio componente desde cero :( , o usar alguno de los plugins prediseñados que muestran datos en forma tabular. Entre ellos analicé a Jqgrid, y Jtable, el primero porque ya había diseñado un componente similar para un proyecto, pero me pareció mejor experimentar con Jtable ya que lo vi muy completo por las siguientes características que voy a traducir del inglés.

JTable es un plugin de jquery que es usado para crear tablas CRUD  basadas en AJAX


- Automáticamente crea una tabla HTML y carga los registros del server usando AJAX
- Crea los dialogos automáticamente de: Crear Nuevo registro, Editar Registro, Borrar Registro. (esta es la característica que más me atrajo ya que me ahorra hacer los formularios y dialogos:) )
- No es dependiente de ninguna tecnología del servidor lo que me permite usarlo con php (codeigniter)
- etc etc el resto se puede leer aqui en inglés.



domingo, 4 de marzo de 2012

Terminando con el datepicker


Finalizando con los retoques al componente datepicker, ahora lo que queremos es que con solo agregar la etiqueta datepicker dentro de mi código html, se genere un datepicker automáticamente, para eso he especificado ciertos elementos que hay que incluir en esta etiqueta:


id: es el id del datepicker
tabla: es la tabla de la bd
campo: el campo de la tabla que contiene la fecha a mostrar


<datepicker id="el id" tabla="mi tabla" campo="mi campo"></datepicker>
Incluyo el javascript que contiene la nueva función  html_datepickers, lo que hace básicamente es buscar en el dom del documento html todas las instancias de la etiqueta  <datepicker></datepicker> , los convierte a inputs y finalmente crea los datepicker usando la función datepicker, los comentarios explican paso a paso lo que se hizo.