Question

所以我正在尝试使用flexigrid插件。除了看起来你必须手动设置列宽之外，看起来它的效果会很好。否则，列标题与正文列不匹配。

是否有任何方法可以自动匹配这些内容，同时仍然允许列宽度由列中内容的长度定义（正常的表行为）。

Answer 1

我也有这个问题。这是我的解决方案，效果很好。在第678行附近的flexigrid.js中，更改此行。

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

根据你自己的回答，我添加了min-width设置，以便在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个选项卡的页面，每个选项卡都有一个flexigrid。只有一个选项卡出现问题，其中标题单元格比它下面的数据单元格更短。这也使得那个之后的所有标题单元的排列都没有。

..我通过使用Chrome的CTRL + SHIFT + J功能检查渲染元素并检查<div class="hDiv"元素内部... ...最终找到<th abbr="MyColumnName"字段... ... width: <nnn>px部分甚至不存在！

回去检查我在哪里定义colModel并注意到只有那一列......而不是width: <MyWidthValueHere>,我无意中输入了Width: <MyWidthValueHere>,（首字母大写与全部小写）。这是一个微妙的差异，当我最初仔细检查并比较/对比那些有问题的标签时，我的眼睛没有抓住它。

Answer 8

我遇到了同样的事情，发现我的包含列标题和表格单元格的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
    );

希望有另一个问题的解决方案;-) 此致，Christoph

Answer 9

在其他地方找到了这个：

想出来 - 对于有类似问题的人：我已经分配了它到<div id="mygrid">时，我将其分配到<table id="mygrid"> 一切都很棒！

http://markmail.org/message/kibcuxu3kme2d2e7

Answer 10

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

我有一个3柱流体布局。我将网格移动到页面的最顶部，紧跟身体标签后，它排成一行！哇......

Answer 11

这个对我有用：

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

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

摩西。

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

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

与Flexigrid一致的网格标题？

12 个答案: