SlickGrid父母身高100%？

Question

我正在尝试将SlickGrid与jQuery Layout UI一起使用,我希望SlickGrid占据其父窗格的100%高度.

问题是,当实例化SlickGrid时,它没有行(我的ajax接口的一部分稍后加载数据,而不是页面加载),因此默认情况下高度设置为1px(加上标题的高度).当我稍后加载数据时,我看不到任何行.

我已经尝试将SlickGrid DOM元素设置为height: 100%;,但这没有任何作用.如何强制SlickGrid画布占据其所在窗格的100%高度,即使它具有较少的数据行？

Answer 1

我最后使用jQuery PubSub,UI Layout的访问器方法和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可以自己完成所有这些.

Answer 2

对于像我这样遇到类似错误但情况不同的人：

来自维基- “标记中需要 slickgrid 容器上的显式宽度和高度，否则网格主体不可见（高度：1px）并且网格获取网格标题的宽度（宽度：100000px）。”

所以不要忘记给主网格 div 一个宽度和一个高度！

ps：不要认为它适用于这里的这个问题，但这是搜索“slick grid 1px bug”时出现的唯一问题：-/