SlickGrid父母的100％身高？

我正在嘗試使用SlickGrid和jQuery Layout UI，我希望SlickGrid佔據其父窗格的100％高度。SlickGrid父母的100％身高？

問題是，當SlickGrid被實例化時，它沒有行（我的ajax接口的一部分稍後加載數據，而不是頁面加載），所以高度默認設置爲1px（加上高度標題）。當我稍後加載數據時，我看不到任何行。

我已經嘗試將SlickGrid DOM元素設置爲height: 100%;，但它什麼都不做。如何強制SlickGrid畫布佔據其所在窗格的100％高度，即使它的行數較少？

來源

2011-05-06 neezer

如何使用autoHeight設置？它可能比這個問題更新... – w00t 2011-11-17 15:33:29

我結束瞭解決這個問題，使用jQuery PubSub，UI佈局的訪問器方法和SlickGrid的resizeCanvas()方法的組合。它似乎工作得很好。

注意：我的項目已經在使用pubsub了，我使用RequireJS加載我的模塊。

所以，在我的網格模塊文件，我訂閱接收它生活在窗格中，它保存到一個局部變量的新innerHeight的方法，然後調用我的resize();功能：

$.subscribe("units/set_grid_height", function (new_height) { 
    grid_opts.height = new_height; 
    resize(); 
}); 

// ... 

// grid = the jQuery element that represents the SlickGrid 
// slick = the instantiated slickgrid 
function resize() { 
    grid.css('height', grid_opts.height); 
    slick.resizeCanvas(); 
}

然後在我的init JS文件（在佈局定義），我設置了正確的出版爲初始狀態，每次中心窗格中的變化：

layout = $('body').layout({ 
    center: { 
    onresize: function (name, el, state, opts, layout_name) { 
     $.publish("units/set_grid_height", [state.innerHeight]); 
    } 
    } 
}); 

$.publish("units/set_grid_height", [layout.state.center.innerHeight]);

這似乎做的正是我想要的。我知道這不是一個通用的解決方案，但它看起來並不像SlickGrid可以獨立完成所有這些。

來源

2011-05-07 14:21:19 neezer

我打算給出一個答案，即使我不喜歡，但我的JavaScript技能是有限的，這是我使用的解決方案，直到我找到更好的東西。

基本上，我取原稿的高度並減去任何其他元件的高度的slickgrid之外，這樣的：

$("#id-of-slickgrid-container").height(
     $(document).height() - 
     $("#header").outerHeight() - 
     $("#nav").outerHeight() - 
     $("#footer").outerHeight() - 44 
);

的「44」是一個捏造數附帶足夠接近的高度額外的空間內使用slickgrid等

來源

2011-05-06 22:12:24

「44」魔法編號的作品。但沒有「幻數」有沒有明確的解決方案？ – Kalinin 2011-06-23 06:39:03

對於那些像我這樣誰得到了類似的錯誤，但不同的情況：

從wiki - 「顯式寬度和高度slickgrid容器中所需的標記，否則柵格體是不可見的（高度：1px），網格獲取網格標題的寬度（寬度：100000px）。「

所以不要忘了給主柵格的寬度&一個高度！

PS：不要以爲它適用於這個問題，在這裏，但，這是它突然出現在搜索「滑頭電網1px的錯誤」唯一的問題： -/

來源

2012-01-17 12:31:00 Rohit

我把範的答案，如下調整它。仍然有magic numbers，但至少你不必知道特定的容器。

HTML：

<div id="myGridSizer"></div> 
<div id="myGrid"></div>

CSS：

#myGrid { 
    width: 100%; 
} 

#myGridSizer { 
    top: 73px; 
    bottom: 73px; 
    width: 0; 
    position: absolute; 
}

的JavaScript：

$("#myGrid").height($('#myGridSizer').outerHeight()); 
grid = new Slick.Grid("#myGrid", dto.data, dto.columns, options);

來源

2015-06-11 17:08:53 kat

我希望這個答案仍然是有用的，我在另一個答案碰到它：https://stackoverflow.com/a/10878955/4606828

在Slickgrid選項添加autoHeight：

options = { 
     ... 
     autoHeight: true 
     };

的Slickgrid總會長與它的內容，你可以在家長的高度設置爲任何。

來源

2015-06-13 15:36:14 Niel

SlickGrid父母的100％身高？

回答

相關問題