jqGrid 具有自动高度；但具有最大高度和滚动条

Question

有没有办法让jqGrid自动根据行数调整高度，但当达到一定高度后，其高度不能再增加，竖直滚动条才会出现？

谢谢 D

- Dieter

Answer 1

我建议您在 jqGrid 的 bdiv 上设置 "max-height" 属性，并使用 height:'100%' 或 height:'auto'：

$("#list").parents('div.ui-jqgrid-bdiv').css("max-height","300px");

"max-height"属性不会被IE6所使用, 但是更近期的Web浏览器将会使用它。

更新: Free jqGrid在版本4.10.0中引入了新属性：maxHeight，其功能与上述相同。因此，可以直接使用maxHeight: 300代替手动设置父级div.ui-jqgrid-bdiv的max-height。

- Oleg

---

尝试了上述建议，但仍然无效...另外...我需要一个在IE6中也能运行的解决方案。 - Dieter

你在哪个网络浏览器上测试过并且它没有工作？如果可能的话，我建议你不要支持IE6。我的意思是，在IE6中网格将会被良好地（但不完美地）显示，因为它只是忽略了CSS属性。如果您需要设置IE6的高度，则必须在loadComplete内部设置网格的高度。您可以使用getGridHeight和setGridHeight方法。 - Oleg

@Dieter: 要获取像素的网格高度，可以使用jQuery.height：$("#list").parents('div.ui-jqgrid-bdiv').height()。要获取包括所有标题在内的完整网格高度，可以使用$("#gbox_list").height()。我在我的先前回答中向您介绍了这个方法，其中甚至包括相应的演示。要设置网格高度，您可以使用setGridHeight方法。 - Oleg

@Oleg，我想告诉你，在JqGrid.Mobile上，将“height”设置为“100％”会使网格在IE（Windows Phone 8）和Firefox（桌面版）上消失。你遇到过这种情况吗？ - Shinigamae

@Shinigamae：很抱歉，我从未尝试过JqGrid.Mobile。我看到trirand发布了jqGrid.Mobile的beta版本。那是8个多月之前的事了。我没有听说它的正式发布。 - Oleg

Answer 2

试一试

jQuery("#yourid").jqGrid({  
    ........
    height:'auto'
}); 

- Attila Naghi

---

这不会限制高度到最大值，因为问题所问的并非如此。 - AaA

Answer 3

尝试以下方法：

1. 在网格内定义高度

                        $("#griname").jqGrid(
                                {
                                    rowNum : 1000,
                                    viewrecords : true,
                                    gridview : true,
                                    autoencode : true,
                                    loadonce : true,
                                    width: "100%",
                                    height: 300,
                            });

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);
    }

- shermi

Answer 4

.ui-jqgrid-view {
    max-height: 642px;
}
.ui-jqgrid-bdiv {
    overflow-y: scroll !important;
    max-height: 600px !important;
}

这适用于我的jqGrid。

- lambdie

Answer 5

我们的UI人员使用CSS解决了这个问题（如果有超过10个附件，则将列表扩展到300px，并显示垂直滚动条）。

#gview_list_Attachments .ui-jqgrid-bdiv{
    max-height: 300px;
    overflow-y: visible;
}

在我们的情况下，300像素恰好是10个项目的高度。当然，使用jquery可以确定1个项目的高度并乘以10。但这种解决方案快速、简单且解决了我们的问题。

- JayJay

Answer 6

我通过使用jqgrid的height属性为30%（height：'30％'）以及以下CSS来修复了它：

.ui-jqgrid-bdiv {
                min-height:150px;
        }

- user3224132

Answer 7

试试这个

 $("#list1").parents(".ui-jqgrid-bdiv").css('height', jQuery("#list1").css('height'));

这段代码将根据网格中的行数调整网格的高度。

- yogesh Dhale

Answer 8

根据您的需求，您可以在视图或页面的脚本中使用min-height、max-height或height。

$(window).load(
    function () {
        $('.ui-jqgrid-bdiv').css("min-height", "150px");
    }
)

我使用 $(window).load()，因为它会在所有脚本加载完成后运行。

- Zolfaghari

---

ui-jqgrid-bdiv 只是网格内容的高度，不包括网格头、列头和分页器（页脚）。 - AaA

Answer 9

添加这个：

var height = $(window).height();
$('.ui-jqgrid-bdiv').height(height);

在您所需的页面加载jqgrid后，这对我有效。

- user1364237