jQuery jqGrid 具有自动高度；但有最大高度和滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5895801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid with automatic height; but has a max height & scrollbars
提问by Dieter
Is there any way to get jqGrid to adjust its height automatically to the number of rows; but when a certain height is reached that its height cannot increase anymore and that the vertical scrollbar apprears?
有没有办法让jqGrid根据行数自动调整高度；但是当达到某个高度时，它的高度不能再增加并且垂直滚动条出现？
Thanks D
感谢：D
回答by Oleg
I would recommend you to set "max-height"property on the bdivof jqGrid and use height:'100%'or height:'auto':
我建议您"max-height"在jqGrid的 bdiv上设置属性并使用height:'100%'or height:'auto'：
$("#list").parents('div.ui-jqgrid-bdiv').css("max-height","300px");
The "max-height"property will be not used by IE6, but more recent web browsers will use it.
IE6 不会使用该"max-height"属性，但最近的 Web 浏览器将使用它。
UPDATED:Free jqGrid introduce in version 4.10.0 new property: maxHeightwhich do exactly the same as above. Thus one can just use maxHeight: 300instead of manual setting of max-heightof the parent div.ui-jqgrid-bdiv.
更新：在 4.10.0 版本中引入了免费的 jqGrid 新属性：maxHeight与上面的完全相同。因此，可以使用maxHeight: 300而不是手动设置max-heightparent div.ui-jqgrid-bdiv。
回答by Attila Naghi
try this
尝试这个
jQuery("#yourid").jqGrid({
........
height:'auto'
});
回答by shermi
Try these methods
试试这些方法
1.define a height inside the grid
1.定义网格内的高度
$("#griname").jqGrid(
{
rowNum : 1000,
viewrecords : true,
gridview : true,
autoencode : true,
loadonce : true,
width: "100%",
height: 300,
});
2.this function can be used to keep the height fixed to a pre-defined value.
2.此功能可用于将高度固定为预先定义的值。
$(window).resize(function() {
if (typeof($gridname) !== 'undefined' && $("#gridname").length > 0) {
$discrepanciesResultGrid.setGridHeight(
$(window).height() - $("#gridname").position().top - 210
);
$gridname.setGridWidth($("body").width() - $("#anothercomponenetname").width() - 50);
}
回答by lambdie
.ui-jqgrid-view {
max-height: 642px;
}
.ui-jqgrid-bdiv {
overflow-y: scroll !important;
max-height: 600px !important;
}
this work on my jqGrid
这项工作在我的 jqGrid 上
回答by JayJay
Our UI person solved the problem (expand the list up to 300px, if there are more than 10 attachments, show a vertical scrollbar) with css
我们的UI人用css解决了这个问题（将列表扩展到300px，如果超过10个附件，显示一个垂直滚动条）
#gview_list_Attachments .ui-jqgrid-bdiv{
max-height: 300px;
overflow-y: visible;
}
300px happens to be height of 10 items in our case. Of course using jquery you can determine the height of 1 item and multiply by 10. But this solution was quick, simple and solved our problem.
在我们的例子中，300px 恰好是 10 个项目的高度。当然使用 jquery 你可以确定 1 项的高度并乘以 10。但是这个解决方案快速、简单并且解决了我们的问题。
回答by user3224132
I fixed it by using height attribute of the jqgrid as 30% (height:'30%') and the following css:
我通过使用 jqgrid 的高度属性作为 30% (height:'30%') 和以下 css 来修复它：
.ui-jqgrid-bdiv {
min-height:150px;
}回答by Zolfaghari
Depending on your need, you can use min-height, max-height, or heightin a script on your view or page:
根据您的需求，您可以使用min-height，max-height或height在您的视图或页面的脚本：
$(window).load(
function () {
$('.ui-jqgrid-bdiv').css("min-height", "150px");
}
)
I use $(window).load()because it runs after all scripts have loaded.
我使用$(window).load()它是因为它在所有脚本加载后运行。
回答by yogesh Dhale
Try this
尝试这个
$("#list1").parents(".ui-jqgrid-bdiv").css('height', jQuery("#list1").css('height'));
This code will adjust height of grid according to the Number of rows in a grid
此代码将根据网格中的行数调整网格的高度
回答by yogesh Dhale
Add this:
添加这个：
var height = $(window).height();
$('.ui-jqgrid-bdiv').height(height);
after loading jqgrid on your desired page, this worked for me.
在您想要的页面上加载 jqgrid 后，这对我有用。
