Columnas de tabla redimensionables con jQuery

Este es el único complemento de jQuery que pude encontrar para cambiar el ancho de las columnas de la tabla, pero no se integra bien con mi tabla, y tiene un exceso innecesario (se guarda en las cookies). ¿Hay algún otro complemento para cambiar el tamaño de las columnas? (NO los plugins de la cuadrícula de datos, por favor no los sugiera).

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?

🙂 Una vez que me encontré en la misma situación, no había un complemento de jQuery que coincida con mis requisitos, por lo que dedico un tiempo a desarrollar el mío propio: colResizable

Acerca de colResizable

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

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

enter image description here

Caracteristicas

colResizable fue desarrollado ya que no se encontró ningún otro complemento similar con las siguientes características enumeradas:

  • Compatible con mouse y dispositivos táctiles (PC, tabletas y teléfonos móviles)
  • Compatibilidad con diseños de tablas porcentuales y basados ​​en píxeles
  • Cambio de tamaño de la columna sin alterar el ancho total de la mesa (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 complementos

colResizable es el complemento más pulido para redimensionar 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 colResizable sea la mejor opción es que es compatible con diseños de tablas de porcentajes tanto líquidos como basados ​​en píxeles. ¿Pero, qué significa?

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

colResizable también es compatible con el atributo de ancho máximo de la tabla: si la sum de todas las columnas supera el ancho máximo de la tabla, se corrigen 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 e incluso las devoluciones parciales si la tabla se encuentra dentro de un panel de actualización. Es compatible con todos los principales navegadores (IE7 +, Firefox, Chrome y Opera), mientras que otros complementos fallan con versiones anteriores de IE.

Ver muestras y JSFiddle .

Muestra de código

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

Así que comencé a escribir mi propia funcionalidad, por ahora, la próxima semana, la próxima semana … http://jsfiddle.net/ydTCZ/

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

 < !DOCTYPE html>resizable columns       
head 1head 2
a1b1

prueba flexigrid , aquí hay una referencia más

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

Muchos de los comentarios aquí y en otras publicaciones se preocupan por establecer el tamaño inicial.

Usé jqueryUi.Resizable . Los anchos iniciales se definirán dentro de cada etiqueta “

” en la primera línea (

). Esto es diferente a lo que recomienda colResizable; colResizable prohíbe definir anchos en la primera línea, allí tuve que definir los anchos en la etiqueta “

” que no era compatible con jqueryresizable.

el siguiente fragmento 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. Los identificadores (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á.

Traté de agregar al trabajo de @ user686605:

1) cambió el cursor a col-resize en el th fronterizo

2) corrigió el problema del texto destacado al cambiar el tamaño

Triunfé parcialmente en ambos. Tal vez alguien que es mejor en CSS puede ayudar a avanzar?

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

HTML

  
th 1
th 2
td 1 td 2

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; } 

He hecho mi propio widget jquery ui, solo estoy pensando si es lo suficientemente bueno.

https://github.com/OnekO/colresizable