javascript - 想要拉伸 Flexigrid 中的最后一列

Question

我没有找到任何方法以百分比形式在 flexigrid 中应用列宽。
我给出的绝对长度如下：

colModel : [
    {display:'ISO', width:50},
    {display:'Name', width:300},
    {display:'Printable Name', width:200},
    {display:'ISO3', width:200},
    {display:'Number Code', width:100},
],

所以发生的事情是，当我调整最后一列的大小时，它的右侧有一个空白。请参考截图。

有没有办法让最后一列占据剩余空间，其余列是绝对的。此功能已在我们的应用程序中的 Flex 中实现，我无法知道它是如何完成的。

Answer 1

Hiya demo http://jsfiddle.net/GNqZn/1/show and http://jsfiddle.net/GNqZn/1/

YOu probably need to write a custom function like this I wrote for this specific case in demo above:

In the demo above my table view had 700 width and 4 columns before number code hence 700/4

Read here: http://groups.google.com/group/flexigrid/browse_thread/thread/3da4473a5f467cea

Hope this will help you in right direction and demo will help you to play around. cheers!

D'uh this is no silver bullet but you can make it by tweaking for your specific need. :)

UPDATE 5th June To give OP a simple demo: http://jsfiddle.net/2TkyR/22/ or http://jsfiddle.net/gaNZR/11 or http://jsfiddle.net/gaNZR/11/show/

If I may recommend it is vital if you read bit more about the plugin, play around a bit you will feel more confident.

Please see an image attached below All you need to do is add this customize function according to your needs.

Please Read this: http://flexigrid.info/ and some good tutorials & this: http://www.kenthouse.com/blog/2009/07/fun-with-flexigrids/

Jquery code

function GetColumnSize(percent){ 
    screen_res = (700/4)*0.95; // 700 is the width of table;
    col = parseInt((percent*(screen_res/100))); 
    if (percent != 100){ 
       // alert('foo= ' + col-18);
        return col-18; 
    }else{ 
       // alert(col);
        return col; 
    } 
} 

call it like this width : GetColumnSize(100),

   $("#flex1").flexigrid({
        url: 'post2.php',
        dataType: 'json',
        colModel : [
            {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
            {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
            {display: 'Number Code', name : 'numcode', width : GetColumnSize(100), sortable : true, align: 'right'}
            ],

2 Images below

Image 1

Image 2