与 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 实现的问题）是，一旦调整标题大小，“拖动”栏将不会与新的列宽度对齐。

我当前的实现如下，适用于 Firefox 3.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

根据您自己的答案，我添加了设置最小宽度，以便如果 Flexigrid 宽度设置得太窄或调整 Flexigrid 大小，则列不会受到不同的挤压，仅在 Chrome 中进行测试：

    $(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 个选项卡的页面，每个选项卡都有一个弹性网格。 只有其中一个选项卡存在标题单元格比其下方的数据单元格短的问题。 这也打乱了该标题后面的所有标题单元格的对齐方式。

..我通过使用 Chrome 的 CTRL+SHIFT+J 功能检查渲染的元素并检查

元素内部得出的结论...最终找到 < ;th abbr="MyColumnName"字段...是 width: px 部分根本不存在！

回去检查我定义 colModel 的位置，注意到只有那一列...而不是 width: , 我无意中输入了 Width: ,< /code> 相反（首字母大写与全部小写）。 这是一个如此微妙的差异，当我最初仔细检查和比较/对比与存在问题的选项卡相关的选项卡时，我的眼睛没有注意到它。

Answer 8

我知道这对某些人来说会很奇怪，但我遇到了同样的问题，一旦我重新安排了布局（整个页面，而不是网格本身），一切都很好。

我有一个 3 列的流体布局。 我将网格移动到页面的最顶部，就在正文标签之后，它完美地对齐了！ 哇...

Answer 9

在别处找到这个：

想通了 - 对于任何有类似问题的人：我已经分配了它
当我将其分配给

时，将其分配给

一切都很好！

http://markmail.org/message/kibcuxu3kme2d2e7

Answer 10

这对我有用：

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

将其添加到 Flexgrid 构造选项中。 flex1 是你的 flexgrid div id。

摩西。

Answer 11

我遇到了同样的事情，发现包含列标题和表格单元格的 div 的宽度为 0。所以我必须稍等一下，直到构建整个 html 表，然后我必须运行“格式化”方法。
接下来，我在开始时将 HTML 表格内置在一个不可见的 div 中。 所以我不得不在代码中省略 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 12

这段代码在我的项目中运行良好。 这与其他答案类似。

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

我希望这已经解决了您的问题。