jquery - Flexigrid との一貫したグリッド ヘッダー ?

Question

だから私はflexigridプラグインを使用しようとしています。列幅を手動で設定する必要があるように見えるという事実を除けば、うまく機能するようです。そうしないと、列ヘッダーが本文の列と一致しません。

列のコンテンツの長さによって列の幅を定義できるようにしながら、これらを自動的に一致させる方法はありますか (通常のテーブルの動作と同様)。

Answer 1

私もこの問題を抱えていました。これが私の修正であり、うまく機能します。flexigrid.js の 678 行あたりで、この行を変更します。

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

これに

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

これで準備は完了です。

Answer 2

私の解決策は、他の人が提案したよりもはるかに簡単です。

flexigrid 関数を呼び出す前に、これを追加します。

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

これにより、列ヘッダーの幅がそれらのテキストと同じ幅に設定され (css またはマークアップで各ヘッダー幅を手動で設定するのとは対照的に)、テーブル本体の列が同じ幅になります。

Answer 3

私はこれを（少なくとも部分的に）機能させることができました。以前の反復で発生した問題（これはtvanfossonの実装でも問題でした）は、ヘッダーのサイズを変更すると、「ドラッグ」バーが新しい列幅に揃えられなくなることでした。

私の現在の実装は以下のとおりです。これはFirefox3.5とChromeで機能します。残念ながら、IE（すべてのバージョン）でスローされるいくつかの例外があり、かなり戸惑います。月曜日にさらにデバッグします。

$(".flexigrid").each(function() {
    var grid = $(this);
    var headers = grid.find(".hDiv thead th");
    var row = grid.find(".bDiv tbody tr:first");
    var drags = grid.find("div.cDrag div");
    if (row.length >= 1) {
        var cells = row.find("td");
        var offsetAccumulator = 0;
        headers.each(function(i) {
            var headerWidth = $(this).width();
            var bodyWidth = cells.eq(i).width();
            var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth;

            $(this).width(realWidth);
            cells.eq(i).width(realWidth);

            var drag = drags.eq(i);
            var dragPos = drag.position();
            var offset = (realWidth - headerWidth);
            var newPos = dragPos.left + offset + offsetAccumulator;
            offsetAccumulator += offset;
            drag.css("left", newPos);
        });
    }
});

Answer 4

今日も頑張ってきました。私が思いついたのは、onSuccess ハンドラーを追加し、ヘッダーと本文の間の各列の最大サイズを把握し、両方の幅をその列の最大値に設定することです。

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 5

ありがとう。678行目の投稿に基づいて、私のものは次のように修正されました：

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

何らかの理由で、ヘッダーのフォントが詳細のフォントよりも大きくなっています...これが役に立てば幸いです。

Answer 6

あなた自身の答えから、フレキシグリッドの幅が狭すぎるか、フレキシグリッドのサイズが変更され、クロムでのみテストされた場合に、列が異なる方法で圧迫されないように、最小幅の設定を追加しました。

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

このブレーク列のサイズ変更を行うだけで、th と td 内の div の幅が変更されますが、「dragEnd」関数の flexigrid にいくつかの行を追加することで修正できます。

. . .
// 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 7

私にとって同様の問題。3 つのタブがあり、それぞれにフレキシグリッドがあるページがあります。タブの 1 つだけで、ヘッダー セルがその下のデータ セルよりも短いという問題がありました。これにより、そのセルに続くすべてのヘッダー セルの位置合わせも中断されました。

.. Chrome の CTRL+SHIFT+J 機能を使用してレンダリングされた要素を調べ、要素の内部を調べることでわかった<div class="hDiv"こと...最終的に<th abbr="MyColumnName"フィールドを見つける...そのwidth: <nnn>px部分さえそこにないということでした!

戻って、colModel を定義している場所を調べたところ、その 1 つの列だけに気付きました... 代わりにwidth: <MyWidthValueHere>,誤って入力したのではWidth: <MyWidthValueHere>,なく (最初の文字の大文字とすべての小文字)。問題のあるタブに対して機能するタブを最初に精査して比較/対比したときに、私の目がそれを捉えていなかったのは非常に微妙な違いでした。

Answer 8

これは私のために働いた：

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

これをフレックスグリッド構築オプションに追加します。flex1はflexgriddividです。

モシェ。

Answer 9

同じことに遭遇し、列見出しとテーブルセルを含むdivの幅の幅が0であることがわかりました。そのため、htmlテーブル全体が作成されるまで少し待たなければならず、その後実行する必要がありました。 「フォーマット」メソッド。次のことは、最初に非表示のdivにHTMLテーブルを作成していることです。not(:hidden)そのため、コード内でセレクターを省略しなければなりませんでした。

どうぞ：

    $.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

次のようなメソッドの呼び出し：

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

問題の別の解決策があることを願っています;-)よろしく、クリストフ

Answer 10

このコードは私のプロジェクトで正常に動作します。他の回答と同じです。

$("#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;
    });
}

これで問題が解決したことを願っています。

Answer 11

他の場所でこれを見つけました：

それを理解しました-同様の問題を抱えている人のために：私はそれをに割り当てましたが<div id="mygrid">、に割り当てたとき、<table id="mygrid"> すべてうまくいきました!

http://markmail.org/message/kibcuxu3kme2d2e7

Answer 12

これは奇妙に感じる人もいると思いますが、私は同じ問題を抱えていて、レイアウト (グリッド自体ではなくページ全体) を再配置すると、すべて問題ありませんでした。

私は3列の流動的なレイアウトを持っていました。グリッドをページの一番上、body タグの直後に移動すると、完全に整列しました! わお...