2010-06-21 73 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();(重新計算寬度),只要您完成將數據添加到網格。