jqGrid设置高度为百分比不起作用
时间: 2023-11-27 12:54:33 浏览: 104
jqGrid 的高度是以像素为单位计算的,因此设置百分比高度不会起作用。如果您想要根据页面大小自适应调整 jqGrid 的高度,可以使用如下方法:
1. 在 jqGrid 初始化时,获取页面高度并设置 jqGrid 的高度:
```javascript
// 获取页面高度
var height = $(window).height() - 200; // 200为jqGrid之外的其它元素高度
// 初始化 jqGrid
$("#grid").jqGrid({
...
height: height,
...
});
```
2. 监听窗口大小变化事件,在窗口大小变化时重新设置 jqGrid 的高度:
```javascript
$(window).resize(function() {
var height = $(window).height() - 200;
$("#grid").jqGrid('setGridHeight', height);
});
```
这样,当窗口大小发生变化时,jqGrid 的高度也会自适应调整。
相关问题
jqGrid设置高度为百分比
jqGrid 的高度支持百分比设置,你可以在初始化时将 height 参数设置为一个百分比值,如下所示:
```javascript
$("#grid").jqGrid({
url: "data.json",
datatype: "json",
colModel: [...],
height: "70%", // 将高度设置为 70%
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager",
viewrecords: true,
caption: "jqGrid Example"
});
```
在上面的例子中,我们将 jqGrid 的高度设置为 70%,这将使 jqGrid 的高度自适应其容器的高度。请确保 jqGrid 的容器具有确定的高度,否则百分比设置将无效。
jqgrid height 设置响应式高度
如果需要在不同的屏幕尺寸下,jqGrid 的高度能够自适应调整,可以使用 jQuery 的 resize 方法,监听浏览器窗口大小的变化,然后根据窗口大小动态计算 jqGrid 的高度。
以下是一个简单的示例代码:
```
$(window).on('resize', function(){
var gridHeight = $(window).height() - 200; // 200 是 jqGrid 外部容器的高度
$("#grid").jqGrid('setGridHeight', gridHeight);
});
```
这段代码会在浏览器窗口大小变化时触发,重新计算 jqGrid 的高度,使其适应当前的窗口大小。其中,200 是 jqGrid 外部容器的高度,可以根据实际情况进行调整。
阅读全文