2011-08-11 39 views
5

Tengo una tabla que muestra una columna de nombres de prueba, con varios (número ilimitado) de columnas de varios datos de prueba asociados con las pruebas. Dado que habrá varios conjuntos de datos, quiero limitar el número que se puede ver y permitir que el usuario pueda desplazarse horizontalmente para mostrar/ocultar los diferentes conjuntos de datos.HTML/jQuery Tables: desplácese horizontalmente, arregle la primera columna (izquierda)

La respuesta aceptada al Jquery table column sliding effect tiene el tipo de efecto deslizante que estoy buscando, pero ¿cómo se arregla la columna más a la izquierda de los nombres? Hay una gran cantidad de datos, por lo que no quiero clonar dos tablas, como se ha sugerido en otras partes de Internet.

Creando una tabla fija para los nombres y una tabla desplazable para los resultados de datos estuvo cerca, pero la altura de fila es variable en la cantidad de datos recibidos (puede haber varias filas de texto dentro de una celda), por lo que la alineación es expulsado

Además, no quiero una barra de desplazamiento de Internet predeterminada. Tengo imágenes de flecha izquierda/derecha que usaré para controlar el desplazamiento, muy parecido al ejemplo que publiqué anteriormente.

He pasado unas 4 horas buscando en StackOverflow y en el resto de Internet las respuestas, pero no he encontrado nada adecuado todavía ... ¡se agradecería cualquier ayuda, gracias!

Editar: Posicionamiento absoluto de la columna izquierda resulta en el resto de la tabla que se desplaza a la izquierda debajo de la columna de la izquierda (que oculta la primera columna de datos). Agregar una columna "espejo" con el mismo contenido que la primera columna funciona bien; El problema es que cuando las columnas de datos tienen celdas que son más altas que las celdas de nombre correspondientes, la celda de nombre de posición absoluta no puede ver ese hecho y cambiar su tamaño. ¿Pensamientos?

Respuesta

1

Encontré algo que funciona con tablas, como le pregunté. Lo que dije antes sobre la creación de una tabla fija y una tabla desplazable funciona con algunas modificaciones:

Mantuve mi tabla original con nombres y datos de prueba, y la puse en una ventana de desplazamiento. Luego creé otra tabla que solo tenía la columna izquierda y la coloqué absolutamente sobre la posición predeterminada de la columna izquierda en la tabla de desplazamiento. Luego uso jQuery para cambiar el tamaño de las celdas de una sola columna para que coincidan con las alturas variables de las celdas de datos (si las celdas de nombre son más altas, las celdas de datos aún reciben estos datos de la columna duplicada).

También mantengo una variedad de anchos de columna. Cuando hago clic en el botón de desplazamiento hacia la izquierda o hacia la derecha, desplazo la tabla sobre el valor de matriz requerido, y aumento/disminuyo el índice de la matriz.

No publico código porque no quiero reescribir y formatear un ejemplo, pero si tiene preguntas sobre cómo hacerlo, no dude en preguntar. =)

+0

¿podría publicar su código? –

6

Me las arreglé para arreglar la primera columna, tengo las otras deslice debajo, y tengo la segunda columna mostrar: http://jsfiddle.net/Skooljester/trFPD/1/ Voy a tratar de trabajar en las otras partes de su pregunta ahora.

+0

Es bastante fácil hacer paneles fijos + deslizantes con divs ... el problema es cuando se trabaja con tablas. Los márgenes y el espaciado funcionan de manera diferente con filas, columnas y celdas que se agrupan en una tabla. – craftsycandymonster

Cuestiones relacionadas