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 的实现的一个问题）是，一旦你调整了标题的大小，那么“拖动”条就不会与新的列宽对齐。

我当前的实现如下，它适用于 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-table 构建完成，然后我不得不运行“格式”方法。接下来的事情是我在一开始就在一个不可见的 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 9

在别处找到这个：

想通了 - 对于任何有类似问题的人：我把它分配给 a <div id="mygrid">，当我把它分配给 a<table id="mygrid"> 一切都很好！

http://markmail.org/message/kibcuxu3kme2d2e7

Answer 10

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

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

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

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