SlickGrid是不是100%的高度？

Question

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

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

我尝试将SlickGrid DOM元素设置为height: 100%;，但没有任何效果。如何强制SlickGrid画布占据它所在窗格的100%高度，即使它的数据行较少？

Answer 1

我最终结合使用了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不能独立完成所有这些工作。

Answer 2

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

From the wiki -“在标记中需要slickgrid容器上的显式宽度和高度，否则网格主体不可见(高度:1px)，网格将获得网格标题的宽度(宽度:100000px)。”

所以别忘了给主格子div一个宽度和一个高度！

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

Answer 3

我将给出一个连我都不喜欢的答案，但我的javascript技能有限，这是我一直在使用的解决方案，直到我找到更好的解决方案。

基本上，我将文档高度减去slickgrid之外的任何其他元素的高度，如下所示：

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

"44“是一个伪造的数字，它足够接近slickgrid中使用的额外空间的高度，等等。