jquery html html-table resize

Columnas de tablas redimensionables con jQuery



html html-table (8)

:-) Una vez que me encontré en la misma situación, no había ningún complemento jQuery que coincidiera con mis requisitos, así que dediqué un tiempo a desarrollar el mío: colResizable

Sobre colResizable

colResizable es un complemento gratuito de jQuery para cambiar el tamaño de las columnas de la tabla arrastrándolas manualmente. Es compatible tanto con el mouse como con los dispositivos táctiles y tiene algunas características interesantes, como la persistencia del diseño después de la actualización de la página o la devolución de datos. Funciona con diseños de tabla basados ​​tanto en porcentajes como en píxeles.

Es pequeño en tamaño (colResizable 1.0 es solo 2kb) y es totalmente compatible con todos los principales navegadores (IE7 +, Firefox, Chrome y Opera).

Caracteristicas

colResizable se desarrolló porque no se encontró ningún otro complemento similar con las siguientes características:

  • Compatible con mouse y dispositivos táctiles (PC, tabletas y teléfonos móviles)
  • Compatibilidad con diseños de tabla basados ​​tanto en porcentajes como en píxeles
  • Cambiar el tamaño de la columna sin alterar el ancho total de la tabla (opcional)
  • No se necesitan recursos externos (como imágenes o hojas de estilo)
  • Persistencia de diseño opcional después de la actualización de página o devolución de datos
  • Personalización de anclajes de columna.
  • Pequeña huella de pie
  • Compatibilidad entre navegadores (IE7 +, Chrome, Safari, Firefox)
  • Eventos

Comparación con otros plugins

colResizable es el complemento más pulido para cambiar el tamaño de las columnas de la tabla. Tiene muchas posibilidades de personalización y también es compatible con dispositivos táctiles. Pero, probablemente, la característica más interesante que hace que la opción de colResizable sea la mejor es que es compatible con los diseños de tabla de porcentaje fluido y basados ​​en píxeles. ¿Pero, qué significa?

Si el ancho de una tabla se establece en, digamos 90%, y los anchos de columna se modifican usando colResizable, cuando el navegador cambia de tamaño, el ancho de las columnas se redimensiona proporcionalmente. Mientras que otros complementos se comportan de manera extraña, colResizable hace su trabajo como se esperaba.

colResizable también es compatible con el atributo de ancho máximo de la tabla: si la suma de todas las columnas excede el ancho máximo de la tabla, se fijan y actualizan automáticamente.

Otra gran ventaja en comparación con otros complementos es que es compatible con la actualización de la página, las devoluciones de datos e incluso las devoluciones parciales si la tabla se encuentra dentro de un updatePanel. Es compatible con todos los principales navegadores (IE7 +, Firefox, Chrome y Opera), mientras que otros complementos fallan con las versiones anteriores de IE.

Ver samples y JSFiddle .

Muestra de código

$("#sample").colResizable({ liveDrag:true });

This es el único complemento de jQuery que pude encontrar para cambiar el tamaño de los anchos de columna de la tabla, pero no se integra bien con mi tabla y tiene una acumulación innecesaria (se guarda en las cookies) ¿Hay otros complementos para simplemente cambiar el tamaño de las columnas? (NO los plugins de datagrid, por favor no sugiera esos).

Si no, escribiré el mío, no debería ser demasiado difícil, simplemente no sé cómo detectar cuando un usuario hace clic en el borde td (para cambiar el tamaño). ¿Algunas ideas?

Aquí hay un breve ejemplo completo de html. Ver demostración en http://jsfiddle.net/CU585/

<!DOCTYPE html><html><head><title>resizable columns</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <style> th {border: 1px solid black;} table{border-collapse: collapse;} .ui-icon, .ui-widget-content .ui-icon {background-image: none;} </style> <body> <table> <tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script> $( "th" ).resizable(); </script></body></html>

Así que empecé a escribir mi propia funcionalidad, solo básica, por ahora, estaré trabajando en ello la próxima semana ... http://jsfiddle.net/ydTCZ/

Aunque es muy tarde, espero que todavía ayude a alguien:

Muchos de los comentarios aquí y en otras publicaciones están preocupados por establecer el tamaño inicial.

Utilicé jqueryUi.Resizable . Los anchos iniciales se definirán dentro de cada etiqueta "<td>" en la primera línea (<TR>). Esto es diferente a lo que recomienda colResizable; colResizable prohíbe definir los anchos en la primera línea, ahí tuve que definir los anchos en la etiqueta "<col>" que no coincidía con jqueryresizable.

El siguiente fragmento de código es muy limpio y fácil de leer que las muestras habituales:

$("#Content td").resizable({ handles: "e, s", resize: function (event, ui) { var sizerID = "#" + $(event.target).attr("id"); $(sizerID).width(ui.size.width); } });

El contenido es id de mi mesa. Las manijas (e, s) definen en qué direcciones el complemento puede cambiar el tamaño. Debe tener un enlace a css de jquery-ui, de lo contrario no funcionará.

Intenté agregar al trabajo de @ user686605:

1) cambió el cursor para cambiar el tamaño en el borde th

2) solucionado el problema de texto resaltado al cambiar el tamaño

En parte tuve éxito en ambos. ¿Quizás alguien que es mejor en CSS puede ayudar a avanzar?

http://jsfiddle.net/telefonica/L2f7F/4/

HTML

<!--Click on th and drag...--> <table> <thead> <tr> <th><div class="noCrsr">th 1</div></th> <th><div class="noCrsr">th 2</div></th> </tr> </thead> <tbody> <tr> <td>td 1</td> <td>td 2</td> </tr> </tbody> </table>

JS

$(function() { var pressed = false; var start = undefined; var startX, startWidth; $("table th").mousedown(function(e) { start = $(this); pressed = true; startX = e.pageX; startWidth = $(this).width(); $(start).addClass("resizing"); $(start).addClass("noSelect"); }); $(document).mousemove(function(e) { if(pressed) { $(start).width(startWidth+(e.pageX-startX)); } }); $(document).mouseup(function() { if(pressed) { $(start).removeClass("resizing"); $(start).removeClass("noSelect"); pressed = false; } }); });

CSS

table { border-width: 1px; border-style: solid; border-color: black; border-collapse: collapse; } table td { border-width: 1px; border-style: solid; border-color: black; } table th { border: 1px; border-style: solid; border-color: black; background-color: green; cursor: col-resize; } table th.resizing { cursor: col-resize; } .noCrsr { cursor: default; margin-right: +5px; } .noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }