Question

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

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

Answer 1

这是内置于网格中的。您将height设置为100％。 There's a demo on this page如果你选择“高级 - ＆gt;调整大小。

Answer 2

尝试：

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

在jQGrid回调函数loadComplete中。 #bigset是我用过的表的id。这对我很有用。

Answer 3

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

所以这就是我所做的：

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

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

Answer 4

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

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

Answer 5

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

Answer 6

这是我根据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);
}

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

根据行数调整jqGrid的大小？

7 个答案: