¿Cómo puedo alterar el plugin FixedTableHeader jQuery para tener una primera columna fija también?

Question

Estoy usando un plugin jQuery desde aquí http://www.tablefixedheader.com/ para hacer una tabla elegante con un encabezado fijo, clasificación y otras características geniales. Ahora, también he visto jqGrid, que se ve ridículamente increíble, pero estamos haciendo algunas cosas funky con nuestra fuente de datos y no creo que esté listo para jugar bien con jqGrid.

De todos modos, mis jefes quieren que la primera columna de la tabla que creé sea reparada, para que puedan desplazarse por el eje x, pero aún así ver la primera columna. ¿Cómo puedo modificar este complemento para proporcionar esta funcionalidad?

Cualquier ayuda es muy apreciada

Gracias

EDIT:

He intentado añadir:

th:first-child 
{ 
    position  : relative; 
} 
td:first-child 
{ 
    position  : relative; 
} 

, así como "fijo", pero parece ser más complicado de lo esta solución simple ...

Hacer esto tiene un efecto , simplemente no es tan agradable. Hacer este cambio hace que permanezca estático en el lado izquierdo, pero realmente no puedo desplazarme hacia abajo, y el th realmente no parece funcionar.

EDIT 2:

he comenzado a implementar la solución dada a continuación, aunque no estoy del todo seguro de mi capacidad para jugar con este plugin. De todas formas, aquí es el estado actual de retoques:

Voy a seguir actualizando a medida que avanzo ...

consigo un error que dice this.offset.top es nulo o no un objeto ... bla,

Este código va en lo document.ready:

  var currentTop = 0; 
     var currentLeft = 0; 
     var currentWidth = 0; 
     var currentHeight = 0; 
     var currentContent = ""; 
     var currentDiv = ""; 
     var currentID = ""; 
     $('td:first-child').each(function (index) { 
      currentTop = $(this).offset.top; 
      currentLeft = $(this).offset.left; 
      currentWidth = $(this).width; 
      currentHeight = $(this).height; 
      currentContent = $(this).html(); 
      currentID = "fixed_column_cell" + index; 
      currentDiv = "<div class=\"fixed_column_cells\" id=\"" + currentID + "\">" + currentContent + "</div>"; 
      $('body').append(currentDiv); 
      $('#' + currentID).offset({ top: currentTop, left: currentLeft }); 
      $('#' + currentID).width(currentWidth); 
      $('#' + currentID).width(currentHeight); 
     }); 
     $('fixed_column_cells').css('position', 'fixed'); 

Actualmente atrapado

Answer 1

Problema interesante. No creo que encuentre que el elemento de celda de tabla (TD) va a querer comportarse de esta manera por usted. Lo que hay que hacer podría ser recorrer todos los td: first-childs y copiar su contenido en divs del mismo tamaño que se superponen con los TD. esos divs te permitirán posicionarlos correctamente.

Creo que se encuentra con una limitación de algo con un comportamiento inherente de células de tabla.

Pseduocode:

• Para cada celda de la tabla en la primera columna
• obtener la posición superior izquierda
• anchura get y altura
• crear nuevo div de mismo tamaño en la misma posición
• copia contenido en el nuevo div
• conjunto div a la posición fija

Answer 2

sé que dijo que ya ha conseguido la biblioteca jQuery para el cabezal fijo er. Sin embargo, existen algunas bibliotecas para columnas fijas y encabezados. Uno que he usado es Fixed Table que le permite configurar la columna izquierda, así como los encabezados que se fijarán. Espero que esto te ayude