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

我也有这个问题。这是我的解决方案，效果很好。在第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"});

你们都准备好了。

我的解决方案比其他人建议的要简单得多。

在调用flexigrid函数之前，添加以下内容：

 $("#yourtable th").each(function() { $(this).attr("width", $(this).width()); });

这会将列标题的宽度设置为与其中的文本一样宽（与使用css或标记手动设置每个标题宽度相反），并使表格主体列的宽度相同。

我已经让这个工作（至少部分）。我在上一次迭代时遇到的问题（这也是tvanfosson实现的一个问题）是，一旦你调整了标题大小，那么“拖动”栏就不会与新的列宽对齐。

我目前的实现如下，适用于Firefox 3.5和Chrome。不幸的是，在IE（所有版本）中抛出了一些exception令人不安的例外。我将在周一进一步调试：

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

谢谢。根据第678行的post，我得到了以下修复：

 $(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width()-10 + "px"});

由于某种原因，标题字体大于详细字体…希望这会有所帮助。

从你自己的答案中，我添加了min-width设置，这样如果flexigrid的宽度设置得太窄或者flexigridresize，只有在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);

只是执行此中断列resize，因为它修改了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);

类似的问题对我来说。有一个包含3个选项卡的页面，每个选项卡都有一个flexigrid。只有一个选项卡出现问题，其中标题单元格比它下面的数据单元格更短。这也使得那个之后的所有标题单元的排列都没有。

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


元素内部... ...最终找到
字段... ... width: px部分甚至不存在！

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

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

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

在其他地方发现：

想出来 – 对于有类似问题的人：我把它分配给
，当我把它分配给
一切都很好！

http://markmail.org/message/kibcuxu3kme2d2e7

这个对我有用：

  onSuccess : function(){ $('#flex1 > tbody').wrap('
'); },

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

卡察夫。

我遇到了同样的事情，发现我的包含列标题和表格单元格的div的宽度有宽度= 0.所以我不得不等待一段时间，直到整个html表构建，然后我不得不运行“格式”方法。接下来就是我在开头用一个不可见的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 );

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

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

 $("#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一致的网格标题？

更改Jquery FlexGrid的数据

不想在Flexigrid中调整列的大小

有没有人用过ASP.NET MVC3的jquery flexigrid？