jQuery Grid 让高度 自适应
时间: 2023-07-22 20:33:56 浏览: 57
让 jQuery Grid 的高度自适应需要进行如下配置:
1. 将 `height` 属性设置为 `'auto'`;
2. 将 `shrinkToFit` 属性设置为 `true`。
具体代码如下:
```javascript
$(gridSelector).jqGrid({
url: '...',
datatype: 'json',
mtype: 'GET',
colModel: [...],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
height: 'auto',
shrinkToFit: true,
...
});
```
这样就可以让 jQuery Grid 的高度自适应了。需要注意的是,使用 `shrinkToFit` 属性时,Grid 的列宽会根据列的内容自适应调整,因此如果你希望列宽固定,可以将 `shrinkToFit` 属性设置为 `false`。
相关问题
jQuery Grid 高度自适应
让 jQuery Grid 的高度自适应需要进行如下配置:
1. 将 `height` 属性设置为 `'100%'`;
2. 将 `autoheight` 属性设置为 `true`。
具体代码如下:
```javascript
$(gridSelector).jqGrid({
url: '...',
datatype: 'json',
mtype: 'GET',
colModel: [...],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
height: '100%',
autoheight: true,
...
});
```
这样就可以让 jQuery Grid 的高度自适应了。需要注意的是,如果你在使用 `autoheight` 属性的同时也设置了 `height` 属性,那么 `autoheight` 属性就会失效,因为此时 Grid 的高度是由 `height` 属性所指定的。因此,我们在进行高度自适应的时候,只需要将 `height` 属性设置为 `'100%'` 即可。
jQuery Grid 初始化函数 高度自适应
让 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` 这个数值,你可以根据自己的实际情况进行调整,以达到最佳的效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)