Columnas de tabla redimensionables

Question

Estoy desarrollando una aplicación web y estoy buscando una forma de crear mis propias cuadrículas de datos.

Sé que hay muchas secuencias de comandos fantásticas con todas las características, pero necesito mi propia funcionalidad específica, estilo css y la capacidad de usar mis propios controles de interfaz de usuario en ella.

Realmente, lo único que necesito es la capacidad de cambiar el tamaño de las columnas. Realmente no me importa si el marcado no mantiene la estructura de filas o no es semántica, porque todos los datos serán poblados por solicitudes ajax.

Estaba pensando que una solución posible sería hacer de cada columna un div.

¿Hay algún tutorial que pueda ayudarme?

Answer 1

realmente un tutorial no, sino un ejemplo de los huesos al descubierto realmente que podría funcionar a partir de: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

Answer 2

recomiendo usar jQuery UI Resizable con algunas mejoras. El complemento realmente se centra solo en el cambio de tamaño y permite una personalización completa, ya que puede agregar sus propias funciones de devolución de llamada en cualquier caso. Sin embargo, de forma predeterminada, el complemento no puede redimensionar los encabezados de tabla, pero podría hacerlo funcionar con HTML válido, actualizando el área COLGROUP de la tabla al cambiar el tamaño.

La idea concreta sería:

1. La tabla HTML especifica la anchura inicial en su área COLGROUP y tiene la propiedad CSS table-layout: fijo.
2. Decora los elementos TH con jQuery UI .resizable().
3. Al cambiar el tamaño de inicio: Encuentre el elemento COL correspondiente de TH activo y recuerde el ancho original.
4. Al cambiar el tamaño: Calcule el tamaño delta y actualice (aumente/disminuya) el elemento COL seleccionado. Esto redimensionará la columna completa con cada navegador.

Plugin init:

$(".resizable th").resizable({ 
handles: "e", 

// set correct COL element and original size 
start: function(event, ui) { 
    var colIndex = ui.helper.index() + 1; 
    colElement = table.find("colgroup > col:nth-child(" + 
    colIndex + ")"); 

    // get col width (faster than .width() on IE) 
    colWidth = parseInt(colElement.get(0).style.width, 10); 
    originalSize = ui.size.width; 
}, 

// set COL width 
resize: function(event, ui) { 
    var resizeDelta = ui.size.width - originalSize; 

    var newColWidth = colWidth + resizeDelta; 
    colElement.width(newColWidth); 

    // height must be set in order to prevent IE9 to set wrong height 
    $(this).css("height", "auto"); 
} 
}); 

que describe la solución completa, incluyendo JavaScript, el formato HTML, CSS multi-navegador y Live-Demo en http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/