jqgrid 高度怎么铺满并在窗口大小改变时候响应式
时间: 2024-03-24 19:37:08 浏览: 14
要让 jqGrid 的高度铺满整个容器,并且在窗口大小改变时响应式地调整高度,可以按照以下步骤进行:
1. 设置 jqGrid 的高度为 `100%`。
```javascript
$("#gridId").jqGrid({
height: "100%",
// ...
});
```
2. 确保 jqGrid 的父容器也是铺满整个容器。
```css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
margin: 0;
padding: 0;
}
```
3. 在 jqGrid 的父容器上设置 `position: absolute;`。
```css
#gridContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
```
4. 监听窗口大小改变事件,使用 `$(window).resize()` 方法来重新计算 jqGrid 的高度。
```javascript
$(window).resize(function() {
var windowHeight = $(window).height();
var gridOffset = $("#gridContainer").offset().top;
$("#gridContainer").height(windowHeight - gridOffset);
$("#gridId").jqGrid('setGridHeight', windowHeight - gridOffset - 50); // 50 是 jqGrid 的底部边距,你可以根据需要调整。
});
```
这样,你就可以让 jqGrid 铺满整个容器,并且在窗口大小改变时响应式地调整高度了。注意,如果 jqGrid 的父容器有多个,你需要确保所有父容器都设置了 `height: 100%;` 和 `position: relative;`,并且中间没有其他元素干扰。