Konsequente Grid-Header mit Flexigrid?

Question

Also versuche ich das Flexigrid-Plugin zu verwenden. Es sieht so aus, als würde es gut funktionieren, abgesehen davon, dass es so aussieht, als müssten Sie die Spaltenbreiten manuell einstellen. Andernfalls stimmen die Spaltenüberschriften nicht mit den Rumpfspalten überein.

Gibt es eine Möglichkeit, diese automatisch abzugleichen, während die Spaltenbreiten durch die Länge des Inhalts in den Spalten definiert werden können (wie beim normalen Tabellenverhalten).

Answer 1

Ich habe auch heute daran gearbeitet. Ich habe einen OnSuccess-Handler hinzugefügt und herausgefunden, was die maximale Größe jeder Spalte zwischen dem Header und dem Body ist, und dann die Breite beider auf das Maximum für diese Spalte einstellen.

grid.flexigrid({ 

    ...other setup... 

    onSuccess: function() { 
     format(); 
    }); 
    } 
}); 

function format() { 
    var gridContainer = this.Grid.closest('.flexigrid'); 
    var headers = gridContainer.find('div.hDiv table tr:first th:not(:hidden)'); 
    var drags = gridContainer.find('div.cDrag div'); 
    var offset = 0; 
    var firstDataRow = this.Grid.find('tr:first td:not(:hidden)'); 
    var columnWidths = new Array(firstDataRow.length); 
    this.Grid.find('tr').each(function() { 
     $(this).find('td:not(:hidden)').each(function(i) { 
      var colWidth = $(this).outerWidth(); 
      if (!columnWidths[i] || columnWidths[i] < colWidth) { 
       columnWidths[i] = colWidth; 
      } 
     }); 
    }); 
    for (var i = 0; i < columnWidths.length; ++i) { 
     var bodyWidth = columnWidths[i]; 

     var header = headers.eq(i); 
     var headerWidth = header.outerWidth(); 

     var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth; 

     firstDataRow.eq(i).css('width',realWidth); 
     header.css('width',realWidth);    
     drags.eq(i).css('left', offset + realWidth); 
     offset += realWidth; 
    } 
} 

Answer 2

Ich habe dies (zumindest teilweise) zu arbeiten. Das Problem, das ich mit meiner vorherigen Iteration hatte (was auch ein Problem mit der Implementierung von tvafosson war), war, dass sobald die Größe der Header geändert wurde, die "Ziehen" -Balken nicht mit den neuen Spaltenbreiten übereinstimmen würden.

Meine aktuelle Implementierung ist unten, die in Firefox 3.5 und Chrome funktioniert. Leider gibt es eine Ausnahme im IE (alle Versionen), die ziemlich irritierend ist. Ich debugge weiter am Montag:

Answer 3

Ich hatte dieses Problem auch. Hier ist meine Lösung, und es funktioniert großartig. Ändern Sie in flexigrid.js um Zeile 678 diese Zeile.

$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth)[0].style.width}); 

dieser

$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width() + "px"}); 

Und Sie sind alle gesetzt.

Answer 4

Danke. Basierend auf dem Posten der Linie 678, hätte ich mit dem folgenden festgelegt:

$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width()-10 + "px"}); 

Aus irgendeinem Grunde ist der Header Schrift größer ist als das Detail Schrift ... hoffe, das hilft.

Answer 5

Ich stieß auf die gleiche Sache, herauszufinden, dass die Breite meiner Divs mit den Spaltenüberschriften und den Tabellenzellen hatte die Breite = 0. Also musste ich ein bisschen warten, bis die gesamte HTML-Tabelle gebaut wurde Ich musste die "Format" -Methode ausführen. Als nächstes habe ich die HTML-Tabelle in einem unsichtbaren div am Anfang gebaut. Also musste ich den not(:hidden) Selektor in meinem Code weglassen.

Here we go:

$.fn.flexAddData = function(data) { // function to add data to grid 
     ... 
    }; 
    // my own method to justify the column headers with the body 
    $.fn.flexFormat = function() { 
     return this.each(function() { 
      var gridContainer = $('.flexigrid'); 
      var headers = gridContainer.find('.hDiv table tr:first th'); 
      var firstDataRow = gridContainer.find('.bDiv table tr:first td'); 
      var offSet = 10; 
      // for each element in headers 
      // compare width with firstDataRow elemts 
      // the greater one sets the width of the lower one 
      $.each(headers, function(i) { 
       var thWidth = $(this).find('div').outerWidth(); 
       var tdWidth = $(firstDataRow[i]).find('div').outerWidth(); 

       thWidth > tdWidth ? $(firstDataRow[i]).find('div').width(thWidth - offSet) : $(this).find('div').width(tdWidth - offSet); 

      }); 
     }); 
    }; // end format 

Der Aufruf für die Methode wie folgt:

setTimeout(function() { 
      $('.flexigrid').flexFormat(); 
     } 
     , 10 
    ); 

Hoffnung eine andere Lösung für das Problem haben ;-) Grüße, Christoph

Answer 6

Fand dies woanders:

Ich habe es herausgefunden - für alle mit einem ähnlichen Problem: Ich hatte es zu einem <div id="mygrid"> zugewiesen, als ich es einem <table id="mygrid"> zugewiesen hat alles super funktioniert!

http://markmail.org/message/kibcuxu3kme2d2e7

Answer 7

Ich weiß, das einige als ungerade kommen, aber ich war das gleiche Problem und sobald ich mein Layout (die ganze Seite, nicht das Gitter selbst) neu geordnet war alles in Ordnung.

Ich hatte eine 3-Säulen-Fluid-Layout. Ich habe das Gitter direkt nach dem Body-Tag an den Anfang der Seite verschoben und es hat sich perfekt aufgereiht! Wow ...

Answer 8

Von Ihrer eigenen Antwort, habe ich Einstellung min-Breite, so dass die Spalten nicht anders gequetscht erhalten, wenn die Breite Flexigrid eingestellt war zu schmal oder die Flexigrid Größe verändert, getestet nur in Chrom:

$(this).width(realWidth); 
    cells.eq(i).width(realWidth); 
    // these two lines added 
    $(this).css('min-width', realWidth); 
    cells.eq(i).css('min-width',realWidth); 

gerade tun, diese Pause Spalte Redimensionierung, so dass die Breite des div innerhalb der th und td ändert, aber das kann mit einigen zusätzlichen Linien in Flexigrid in der „dragend“ -Funktion festgelegt werden:

. . . 
// LINE 211 
$('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw); 
// ADD THIS AFTER LINE 211 
$('th:visible div:eq(' + n + ')', this.hDiv).parent().css('min-width', nw); 
$('th:visible div:eq(' + n + ')', this.hDiv).parent().css('width', nw); 
. . . 
// LINE 214 
$('td:visible div:eq(' + n + ')', this).css('width', nw); 
// ADD THIS AFTER LINE 214 
$('td:visible div:eq(' + n + ')', this).parent().css('width', nw); 
$('td:visible div:eq(' + n + ')', this).parent().css('min-width', nw); 

Answer 9

Meine Lösung ist viel einfacher als die anderen vorgeschlagen.

Bevor Sie die Flexigrid-Funktion aufrufen, fügen Sie diese:

$("#yourtable th").each(function() { 
    $(this).attr("width", $(this).width()); 
}); 

Dadurch wird die Breite der Spaltenüberschriften, um so breit eingestellt werden, wie der Text in ihnen ist (im Gegensatz zu manuell jede Kopfbreite Einstellung entweder mit css oder im Markup) und die Tabellenkörperspalten gleich breit machen.

Answer 10

Ähnliche Ausgabe für mich. Habe eine Seite mit 3 Tabs, jeweils mit einem Flexigrid. Nur eine der Registerkarten hatte ein Problem, bei dem die Header-Zelle irgendwie kürzer war als die Datenzellen darunter. Das warf auch die Ausrichtung aller folgenden Header-Zellen weg.

.. was ich herausgefunden, indem die gerenderten Elemente Inspektion mit Chrome CTRL + SHIFT + J-Funktionalität und Inspektion nach unten innerhalb des <div class="hDiv" Elements ... schließlich das <th abbr="MyColumnName" Feld zu finden ... war, dass der width: <nnn>px Teil nicht einmal war Dort!

Ging zurück und inspiziert, wo ich ColModel definiert und nur für diese eine Spalte bemerkt ... anstelle von width: <MyWidthValueHere>, hatte ich versehentlich Width: <MyWidthValueHere>, eingegeben (First Letter Caps vs alle Kleinbuchstaben). Es war so ein subtiler Unterschied, dass meine Augen es nicht verstanden haben, als ich anfing, die Tabs zu untersuchen und zu vergleichen, die gegen dieses Problem arbeiteten.

Answer 11

Dieses ist für mich gearbeitet:

onSuccess : function(){ 
     $('#flex1 > tbody').wrap('<table cellpadding="0" cellspacing="0" />'); 
    }, 

hinzufügen Zu den Flextabelle Baumöglichkeiten. flex1 ist deine Flexgrid div ID.

Moshe.

Answer 12

Dieser Code funktioniert gut in meinem Projekt. Es ist ähnlich wie bei anderen Antworten.

$("#my_table").flexigrid({ 
    ... 
    onSuccess: function(){ 
     columnWidth(); 
     $(window).resize(function(){ 
      columnWidth(); 
     }); 
    } 
}); 

function columnWidth(){ 
    var num_col = 0; 
    //Work with the columns width of the first row of body 
    $("#row1 td").each(function(td){ 
     //row's column's width greater than header's column's width 
     if($(this).width() > $("th[axis='col"+num_col+"']").width()){ 
      $("th[axis='col"+num_col+"']").width($(this).width()); 
      $("th[axis='col"+num_col+"']").css({"min-width":$(this).width()}); 
     } 
     //header's column's width greater than row's column's width 
     else if($("th[axis='col"+num_col+"']").width() > $(this).width()){ 
      $("td[abbr='"+$(this).prop('abbr')+"']").width($("th[axis='col"+num_col+"']").width()); 
      $("td[abbr='"+$(this).prop('abbr')+"']").css({"min-width":$("th[axis='col"+num_col+"']").width()}); 
     } 
     ++num_col; 
    }); 
} 

Ich hoffe, das hat Ihre Probleme gelöst.