2010-06-21 76 views
13

是否有人知道如何设置网格的宽度百分比?如何用百分比指定光滑网格的宽度?

例如 但在页面栅格的宽度大于2000个象素。它不会被调整为页面宽度。

任何帮助,将不胜感激。

感谢 帕德马纳班

+0

我也想知道。 SlickGrid速度很快,但几乎没有YUI DataTable那么受欢迎。 – 7wp 2010-06-29 21:06:14

回答

0

FYI,这似乎在最新版本的SlickGrid的工作开箱。 :)

+0

在Firefox中,它仍然不起作用。在ie中,它总是有效的。很奇怪。 – 2010-12-09 16:43:26

22

我看到这个问题真的很旧,但我在试图弄清楚如何让我的列占用整个表的宽度时遇到了这个问题。希望有一天它能帮助别人。

我想不出如何明确设置列宽,但我确实让它工作隐含。

这里是如何做到这一点:

先在列声明添加宽度:300(或任何宽度你想)

{id:"name", name:"Student Name", field:"firstName", width: 300} 

集这对您的所有列,你想要的那些更大的数字,例如通过这样做,我能得到我的表列占用表的剩余空间,并保持我想要的部分真实

{enableCellNavigation: true, enableColumnReorder: false, forceFitColumns: true}; 

:500

然后在选项declation添加forceFitColumns相对于彼此。

+2

这对我来说非常合适。我会建议Padmanabhan接受这个答案。 – DRaehal 2012-11-19 19:47:51

+0

这是否甚至回答他的问题? – 2015-02-26 20:39:31

+0

是的。使用'forceFitColumns:true'选项并以百分比形式设置网格容器的宽度。 – 2015-03-05 09:39:10

0

是的,这是可能的,但我找不到一个简单的解决方案。 所以你必须定制它很多。

我目前正在为此做一个解决方案。 这是一个工作示例,但它确实有一些缺陷。其中一些来自jsfiddle设置。 http://jsfiddle.net/MQBLn/8/

基本上我创建的格式基于所述列标题大小的细胞的功能。 然后,只要有Action,您就必须调用该函数。 (排序,调整大小等) 另外我也必须对slick.grid.js做一些小的修改所以你会发现它加载在JS部分的顶部,接着是自定义js。然后一些覆盖CSS的规则。

这里是我的手机格式化功能

function formatCells(grid) 
{ 
    var columns = grid.getColumns(); 
    var grid_width = grid.getGridPosition().width; 
    var header = $(".slick-header-columns"); 

    for(var i in columns) 
    { 
     $(".slick-cell.r"+i).css("width", (Math.floor(((header.children().eq(parseFloat(i)).width()+9)/(grid_width-_scrollBarWidth))*10000)/100)+"%"); 
    } 
} 

我希望这是有用的也许有一天建成SlickGrid的设置。

2

我有一个功能来做一个网格调整大小。

function resizeGrid(newsize, grid) { 
      $('#dataGrid').css('width', newsize); 
      grid.resizeCanvas(); 
    } 

不要忘记添加forceFitColumns: true到网格选项骗子说上述

0

的SlickGrid,格式化你提供5个参数:

formatter: function (row, cell, value, columnDef, dataContext) 

您可以调整列的宽度使用dataContext参数,在特定的格式化程序中,例如:dataContext.width = 600使特定列600px。

{ 
     /* Categories */ 
     id: "categories", 
     formatter: function (row, cell, value, columnDef, dataContext) { 
      var html = ''; 

      if (value.indexOf('variation-child') != -1) { 
       return value; 
      } else if (value) { 
       for (var i = 0; i < value.length; i++) { 
        if (value[ i ]) { 
         html += '<div class="box category-box" title="' + value[ i ] + '">' + value[ i ] + '</div>'; 
        } 
       } 
      } 

      columnDef.width = 600 * value.length; 

      return html; 
     }, 
     name: "Categories", field: "categories", sortable: true, editor: Slick.Editors.TaxonomyPopupEditor 
    } 

记住使用grid.resizeCanvas();(重新计算宽度),只要您完成将数据添加到网格。