jQuery Grid 初始化函数 高度自适应
时间: 2023-07-30 21:09:20 浏览: 256
让 jQuery Grid 的高度自适应的方法和前面的宽度自适应类似,也是通过监听窗口大小变化来实现的。具体代码如下:
```javascript
function initGrid(gridSelector) {
var width = $('.jqGrid_wrapper').width();
$(gridSelector).jqGrid({
// Grid配置项
...
});
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
$(gridSelector).setGridWidth(width);
var gridHeight = $(window).height() - $('.jqGrid_wrapper').offset().top - 130;
$(gridSelector).jqGrid('setGridHeight', gridHeight);
}).trigger('resize');
}
```
在上述代码中,我们仍然是通过 `$(window).bind('resize', function(){...})` 来监听窗口大小变化,并在回调函数中获取窗口的高度,计算 Grid 的高度并设置。其中 `$(window).height()` 获取窗口的高度,`$('.jqGrid_wrapper').offset().top` 获取 Grid 距离文档顶部的距离。对于 `130` 这个数值,你可以根据自己的实际情况进行调整,以达到最佳的效果。
阅读全文
相关推荐
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://img-home.csdnimg.cn/images/20250102104920.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![7z](https://img-home.csdnimg.cn/images/20241231044736.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)