与Flexigrid一致的网格标题？ [英] Consistent grid headers with Flexigrid ?

问题描述

所以我试图使用flexigrid插件。看起来它会很好的工作，除了它看起来像你必须手动设置列宽。否则，列标题与主体列不匹配。

有没有什么方法可以自动匹配它们，同时仍然允许列宽由（正常表的行为）。

解决方案

我今天一直在研究这个问题，太。我想到的内容包括添加一个onSuccess处理函数，并确定每个列的最大尺寸在标题和正文之间，然后将两者的宽度设置为该列的最大值。

  grid.flexigrid（{
 
 ...其他设置... 
 
 onSuccess：function（ ）{
格式（）; 
}）; 
} 
}）; 
 
函数格式（）{
 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; 
} 
} 
  

So I'm trying to use the flexigrid plugin. It looks like it's going to work great aside from the fact that it looks like you have to manually set the column widths. Otherwise, the column headers do not match up with the body columns.

Is there any way of automatically matching these up, while still allowing the column widths to be defined by the length of the content in the columns (as is the normal table behavior).

解决方案

I've been working on this today, too. What I've come up with involves adding an onSuccess handler and figuring out what the maximum size of each column is between the header and the body, then setting the width of both to the maximum for that column.

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

这篇关于与Flexigrid一致的网格标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！