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

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

基本上，我取文件高度并减去滑板外的任何其他元素的高度，如下所示：

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

“44”是一个狡猾的数字，足以接近滑板内等额外空间的高度。

Answer 3

对于像我这样有错误但情况不同的人：

从wiki - “标记中需要slickgrid容器上的显式宽度和高度，否则网格主体不可见（高度：1px），网格获取网格标题的宽度（宽度：100000px）“

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

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

Answer 4

我接受了Van的回答并按如下方式调整。仍有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);

Answer 5

我希望这个答案仍然有用，我在另一个答案中看到了它：https://stackoverflow.com/a/10878955/4606828

在Slickgrid选项中添加autoHeight：

options = {
       ...
       autoHeight: true
       };

Slickgrid将随着内容的增长而增长，你可以将父母的身高设置为任何高度。

SlickGrid父母身高100％？

5 个答案: