我试图使用
SlickGrid与
jQuery Layout UI,我想要SlickGrid占据其父窗格的100％的高度.
问题是,当SlickGrid被实例化时,它没有行(我的ajax接口的一部分稍后在数据中加载,而不是在页面加载中),所以高度默认设置为像1px(加上标题的高度).当我稍后加载数据时,我看不到任何行.
我已经尝试将SlickGrid DOM元素设置为height：100％;但是没有做任何事情.如何强制SlickGrid画布占用其所在窗格的100％高度,即使它的行数更少？
解决方法
我结束了使用
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可以做到这一切都是自己的.
