Come posso modificare il plugin jQuery di FixedTableHeader per avere anche una prima colonna fissa?

Question

Sto usando un plug-in jQuery da qui http://www.tablefixedheader.com/ per creare una tabella accattivante con un'intestazione fissa, l'ordinamento e altre funzioni interessanti. Ora, ho anche guardato jqGrid, che sembra ridicolmente fantastico, ma stiamo facendo cose strane con la nostra fonte di dati e non penso che sia abbastanza pronto per giocare bene con jqGrid.

Ad ogni modo, i miei capi vogliono che la prima colonna della tabella che ho creato sia fissa, in modo che possano scorrere sull'asse x, ma vedere ancora la prima colonna. Come posso modificare questo plugin per fornire questa funzionalità?

Qualsiasi aiuto è molto apprezzato

Grazie

EDIT:

Ho provato ad aggiungere:

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

Così come "fisso", ma sembra essere più complicato di questa semplice soluzione ...

Fare questo ha un effetto , non è così piacevole. Fare questo cambiamento fa sì che rimanga statico sul lato sinistro, ma non riesco davvero a scorrere verso il basso, e il th non sembra funzionare.

EDIT 2:

ho iniziato l'implementazione della soluzione indicato di seguito, anche se non sono del tutto fiducioso nelle mie capacità di sperimentare con questo plugin. In ogni modo, ecco lo stato attuale del bricolage:

io continuerò aggiornamento come vado ...

ottengo un errore che dice this.offset.top è null o non un oggetto ... bla,

Questo codice va nella cosa 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'); 

Attualmente bloccato

Answer 1

Interessante problema. Non penso che scoprirai che l'elemento della cella di tabella (TD) vorrà comportarsi in questo modo per te. La cosa da fare potrebbe essere il loop su tutto il td: first-child e copiare il loro contenuto in div della stessa dimensione che si sovrappongono ai TD. quelle div ti permetteranno di posizionarle correttamente.

Penso che tu stia correndo una limitazione di qualcosa con un comportamento intrinseco delle celle di una tabella.

Pseduocode:

• Per ogni cella nella prima colonna
• ottenere posizione superiore sinistra
• larghezza get e altezza
• creare nuovo div di stesse dimensioni nella stessa posizione
• copia contenuto in nuovo div
• set div a pos fisso

Answer 2

so che hai detto che avete già ottenuto la libreria jQuery per la testa fissa ER. Ci sono tuttavia alcune librerie là fuori per le colonne fisse e le intestazioni. Uno che ho usato è Fixed Table che consente di impostare la colonna sinistra e le intestazioni da correggere. Spero che questo ti possa aiutare