sábado, 25 de septiembre de 2010

Pensando el plugging para jQuery

La operación de agregar filas nuevas a la tabla y la operación de ordenarla son diferentes. Entonces serán métodos diferentes?
Este es un ejemplo de uso de la librería jQuery.airtable.js:
<script language="javascript" src="./jquery.js"></script>
<script language="javascript" src="./jquery.airtable.js"></script>
<script>
$(document).ready(function(){
  $("#myTable").airtable({addRows: [['Gomez','Manuel','gm@gmail.com','50.85','http://gm.com/index.html']]});
});
</script>
<table id="myTable">
<thead>
<tr>
 <th>Apellido</th>
 <th>Nombres</th>
 <th>Emilio</th>
 <th>Cuenta</th>
 <th>Web</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
La opción addRows es un array de arrays porque debe manejar varias filas, y cada fila tiene varias celdas.
El método airtable() agrega las filas ordenadas a la tabla y la inicializa para ordenar y la reordena si es necesario. Por lo tanto vamos a dejar un solo método.
Nota: La columna 0 es la primer columna, la columna 1 es la segunda columna, y así siguiendo.
La librería utilizará la opción sortList que indique la columna a ordenar, si es orden ascendente o descendente y el tipo del dato que contiene: integer o string. Por ejemplo [[0,0,'string']] significa que la columna 0 se ordena en forma ascendente(0) y se comparan strings; [[2,1,'integer'],[1,1,'string']] significa que se ordena la columna 2 en forma descendente(1) y se comparan números, si son iguales se fija en el orden de la columna 1 en orden descendente(1) comparando strings. Otro ejemplo: [[0,0,'string'],[1,0,false]]; acá indica que la segunda columna no es comparable(false), porque no tiene un tipo.
Complicado? Intentaré arreglarlo.
Esta es la primer versión de mi librería jQuiery.airtable.js:
(function($) {
  $.fn.airtable = function(opciones_user){

  // OPCIONES
  // Ponemos la variable de opciones antes de la iteración (each) para ahorrar recursos
  opc = $.extend( $.fn.airtable.defaults, opciones_user );
  d= opc.debug;
  // FUNCIONES PRIVADAS
  // agregar filas al final de la tabla
  function addTableRows(table,rows){
    trs=''
    for (r in rows){
      td='';
      td+= Array.join(rows[r],'');
      td= ''+td+'';
      trs+= '\n'+td+'';
    }
    if (d) { alert(trs); }
    if($('tbody', table).length > 0){
      $('tbody', table).append(trs);
    }else {
        $(table).append(trs);
    }
    return;
  }
  // ordenar filas
  function sortRows(rows,orden){
    function sortme(a,b,f){
      ff= {
        'integer': function (a,b){ return a-b; }
        ,
        'string': function (a,b){
              if (a==b) { return 0; }
              v= new Array(a,b);
              v.sort();
              return ((a==v[1])?1:-1);
            }
      };
      fff= ff[f];
      return fff(a,b);
    }
    if (orden.length){
      rows.sort(  function (a,b){
        j=0;
        for (o in orden){
          if (!orden[o][2]) { continue; }   // si el tipo es false, la columna no es ordenable
          if (orden[o][1]){
            j= sortme(b[orden[o][0]],a[orden[o][0]],orden[o][2]);
          } else {
            j= sortme(a[orden[o][0]],b[orden[o][0]],orden[o][2]);
          }  
          if (j) { break; }
        }
        return j;
      });
    }
    return rows;
  }

  // DESARROLLO DEL PLUGGING
// Devuelvo la lista de objetos jQuery
  return this.each( function(){
    var t = $(this);  // convierto this (elemento DOM) a jQuery
    var ar= opc.addRows;  // filas a agregar a la tabla
    n= ar.length;
    if (n>0) {
      // ordeno el array de filas
      ar= sortRows(ar,opc.sortList);
      // inserto en la tabla
      addTableRows(t,ar);
    }
  });

};

  // OPCIONES DEFAULTS
$.fn.airtable.defaults = {
        addRows:      [],
        sortList:     [],   //sin orden
        debug:        false
      };

})(jQuery);

jueves, 23 de septiembre de 2010

Tablas Ordenadas con JQuery

Estoy intentando programar un pluggin de jQuery que ordene una tabla por una columna o varias y que permita cambiar el tamaño de las columnas.
Por ahora voy a crear el archivo jquery.airtable.js para colocar el código del pluggin y agregarlo a mi html. El código esta encapsulado en (function($) {})(jQuery); para poder usar la función $ sin repetir la palabra jQuery todo el tiempo.
El método tendrá como opción la columna o columnas a ordenar, el tipo de orden ascendente o descendente y un array con las filas que se quieran agregar a la tabla antes de ordenarla. Este array serviría para llenar una tabla vacía por medio de un AJAX por ejemplo.
Cómo funciona?
El método es aplicado a un objeto jQuery tabla que se encarga de agregar a la tabla las filas mandadas como parametro en la opcion addRows previamente ordenadas. Luego bindea en las celdas header los metodos click para ordenar la tabla.
El usuario ejecuta un click en una celda header y la función ejecutada re-ordena la tabla con el nuevo orden. Un click entonces cambia la ordenación en esa columna y produce un re-ordenamiento de las filas.