Wie kann ich das jQuery-Plugin von FixedTableHeader ändern, um auch eine feste erste Spalte zu haben?

Question

Ich benutze ein jQuery-Plugin von hier http://www.tablefixedheader.com/, um eine Snazzy-Tabelle mit einer festen Überschrift, Sortierung und anderen coolen Features zu machen. Jetzt habe ich auch jqGrid angeschaut, was lächerlich fantastisch aussieht, aber wir machen einige funkige Dinge mit unserer Datenquelle und ich denke nicht, dass es gut genug ist, um mit jqGrid zu spielen.

Wie auch immer, meine Chefs wollen die erste Spalte der Tabelle, die ich erstellt habe, fixiert werden, so dass sie auf der X-Achse scrollen können, aber immer noch die erste Spalte sehen. Wie kann ich dieses Plugin ändern, um diese Funktionalität bereitzustellen?

Jede Hilfe ist sehr

Dank

EDIT geschätzt:

Ich habe versucht, und fügte hinzu:

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

Neben "fixiert", aber es scheint komplizierter zu sein als Diese einfache Lösung ...

Dies hat eine Wirkung Es ist einfach nicht so erfreulich. Durch diese Änderung bleibt es auf der linken Seite statisch, aber ich kann nicht wirklich runterscrollen, und das scheint nicht wirklich zu funktionieren.

EDIT 2:

Ich habe damit begonnen, weiter unten die Implementierung die Lösung, obwohl ich in meiner Fähigkeit nicht ganz sicher bin mit dieser Plugin zu basteln. Wie auch immer, hier ist der aktuelle Stand der Bastelei:

Ich werde die Aktualisierung fortsetzen, wie ich gehe ...

ich eine Fehlermeldung erhalten, die besagt, this.offset.top null ist oder kein Objekt ... blah,

Dieser Code geht in der document.ready Sache:

  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'); 

Derzeit

Answer 1

Interessantes Problem. Ich glaube nicht, dass Sie feststellen werden, dass sich das Table Cell (TD) -Element für Sie so verhalten wird. Die Sache könnte darin bestehen, alle td: first-childs zu durchlaufen und ihren Inhalt in Divs derselben Größe zu kopieren, die die TDs überlappen. Diese Divs lassen dich richtig positionieren.

Ich denke, dass Sie in eine Begrenzung von etwas mit inhärentem Tabellenzellverhalten geraten.

Pseduocode:

• Für jede Tabellenzelle in der ersten Spalte
• Position oben links
• get Breite und Höhe
• schaffen neue div gleicher Größe an derselben Position
• Kopie erhalten Inhalt in neue div
• setzen div zu festen Pos

Answer 2

steckte ich weiß, Sie sagten, dass Sie bereits die jQuery-Bibliothek für den festen Kopf bekommen haben er. Es gibt jedoch einige Bibliotheken für feste Spalten und Header. Eine, die ich verwendet habe, ist Fixed Table, die es Ihnen ermöglicht, die linke Spalte sowie die zu fixierenden Header festzulegen. Hoffe, das wird dir helfen