根据行数调整jqGrid的大小?

我希望我的jqGrid根据它的行数缩小和扩展。 假设它当前有10行,jqGrid的高度将缩小到10行(这样就不会暴露出空白的空行)。

但是,如果行数太多,则网格的高度将扩展为最大“高度”值,并且会出现滚动条。

那是内置于网格中的。 您将height设置为100%。 如果您选择“高级 – >resize” ,此页面上会有一个演示 。

尝试:

 jQuery(".ui-jqgrid-bdiv").css('height', jQuery("#bigset").css('height')); 

在jQGrid回调函数loadComplete#bigset是我使用的表的id 。 这对我来说非常合适。

我遇到了类似的问题,没有一个解决方案对我有效。 有些工作,但没有滚动条。

所以这就是我所做的:

 jQuery("#grid").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height')))); 

此代码必须放在loadComplete处理程序中,然后才能正常工作。 当有足够的数据填充列表时,Math.min的第一个参数是所需的高度。 请注意,必须将此相同值设置为网格的高度。 此脚本选择实际高度和网格所需高度的最小值。 因此,如果没有足够的行,网格高度会缩小,否则我们总是具有相同的高度!

从afterInsertRow和删除行调用以下函数:

 function adjustHeight(grid, maxHeight){ var height = grid.height(); if (height>maxHeight)height = maxHeight; grid.setGridHeight(height); } 

尽管高度100%在演示中运行良好,但它对我来说并不适用。 网格变得更大,也许它试图占据父div的高度。 Amit的解决方案非常适合我,谢谢! (我在这里是新的贡献者,所以需要更高的’声誉’来标记任何投票:))

这是我根据Amit的解决方案提出的通用方法。 它允许您指定要显示的最大行数。 它使用网格的标题高度来计算最大高度。 如果您的行与标题的高度不同,则可能需要进行tweeking。 希望能帮助到你。

 function resizeGridHeight(grid, maxRows) { // this method will resize a grid's height based on the number of elements in the grid // example method call: resizeGridHeight($("#XYZ"), 5) // where XYZ is the id of the grid's table element // DISCLAIMER: this method is not heavily tested, YMMV // gview_XYZ is a div that contains the header and body divs var gviewSelector = '#gview_' + grid.attr('id'); var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv'; var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv'; // use the header's height as a base for calculating the max height of the body var headerHeight = parseInt($(headerSelector).css('height')); var maxHeight = maxRows * headerHeight; // grid.css('height') is updated by jqGrid whenever rows are added to the grid var gridHeight = parseInt(grid.css('height')); var height = Math.min(gridHeight, maxHeight); $(bodySelector).css('height', height); } 

在loadComplete函数中添加以下代码

 var ids = grid.jqGrid('getDataIDs'); //setting height for grid to display 15 rows at a time if (ids.length > 15) { var rowHeight = $("#"+gridId +" tr").eq(1).height(); $("#"+gridId).jqGrid('setGridHeight', rowHeight * 15 , true); } else { //if rows are less than 15 then setting height to 100% $("#"+gridId).jqGrid('setGridHeight', "100%", true); }