与Flexigrid一致的网格标题？

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

我今天也一直在做这件事。我想出的方法包括添加一个 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;
    }
}