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％身高？

回答

相关问题