根据行数调整jqGrid的大小？答案

【问题标题】：Resize jqGrid based on number of rows?根据行数调整jqGrid的大小？
【发布时间】：2010-12-30 16:15:18
【问题描述】：

我希望我的 jqGrid 根据它的行数来缩小和扩大。假设它当前有 10 行，jqGrid 的高度将缩小到 10 行（这样就不会暴露空行）。

如果行数过多，网格的高度将扩大到最大“高度”值，并且会出现一个滚动条。

【问题讨论】：

标签： javascript jquery css jqgrid

【解决方案1】：

这是内置在网格中的。您将 height 设置为 100%。 There's a demo on this page 如果您选择“高级 -> 调整大小”。

【讨论】：

这是 3.6 中的新功能吗？如何设置最大高度？我也不希望网格填满整个屏幕。
不，它比 3.6 旧得多。 AFAIK 不支持最大高度（限制行数除外）；您必须为此更加努力，或者将其放入可滚动的内容中。
我无法限制行数，因为它不在我的控制范围内。但是我接受了这个答案，因为它部分满足了我的需要并且没有其他答案。
@Craig- 谢谢 - 我几乎试图重建它。

【解决方案2】：

试试：

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

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

【讨论】：

效果很好。已接受答案的一个潜在问题是 100% 有时会在元素底部添加相当多的空间（我假设是因为其他因素会影响高度）。在无法找出那个高度的来源之后，这个解决方案对我有用。

【解决方案3】：

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

这就是我所做的：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

虽然高度 100% 在演示中运行良好，但它对我不起作用。网格变得更大了，也许它试图占据父 div 的高度。 Amit 的解决方案非常适合我，谢谢！（我是这里的新贡献者，因此需要更高的“声誉”来标记任何投票:)）

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

【讨论】：