jquery – 与Flexigrid一致的网格标题？

所以我试图使用flexigrid插件.看起来它的工作很好,除了你需要手动设置列宽之外.否则,列标题与主体列不匹配.

有没有任何方法自动匹配这些,同时仍然允许列宽度由列中的内容的长度定义(正常的表行为).

解决方法

我今天也在这个工作.我想到的是添加一个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;
    }
}