Javascript 根据行数调整jqGrid的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1972806/
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
Resize jqGrid based on number of rows?
提问by Rosdi Kasim
I want my jqGrid to shrink and expand based on the number of rows it has. Let say it currently has 10 rows, the height of the jqGrid will shrink to 10 rows (so that no gaping empty rows is exposed).
我希望我的 jqGrid 根据它拥有的行数缩小和扩展。假设它当前有 10 行，jqGrid 的高度将缩小到 10 行（这样就不会暴露空行）。
If however there are too many rows, the height of the grid will expand to a maximum 'height' value and a scroll bar will appear.
但是，如果行数过多，网格的高度将扩展到最大“高度”值，并会出现滚动条。
采纳答案by Craig Stuntz
That's built into the grid. You set heightto 100%. There's a demo on this pageif you go "Advanced -> Resizing.
那是内置在网格中的。您设置height为 100%。如果您转到“高级 - > 调整大小” ，则此页面上有一个演示。
回答by Amit Aggarwal
Try:
尝试：
jQuery(".ui-jqgrid-bdiv").css('height', jQuery("#bigset").css('height'));
In the jQGrid callback function loadComplete. #bigsetis the idfor the table I used. This worked perfectly for me.
在 jQGrid 回调函数中loadComplete。#bigset是id我使用的桌子。这对我来说非常有效。
回答by Atticus
I have faced the similar problem and none of the solutions worked perfectly for me. Some work but then there is no scrollbar.
我遇到了类似的问题，没有一个解决方案适合我。一些工作，但没有滚动条。
So here is what I have done:
所以这就是我所做的：
jQuery("#grid").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
This code has to be placed in the loadComplete handler and then it works fine. The first parameter of the Math.min is the desired height when there is enough data to fill in the list. NOTE that this same value has to be set as height for the grid. This script choses the minimum of the actual height and the desired height of the grid. So if there are not enough rows the grid height is shrinked, otherwise we always have the same height!
此代码必须放置在 loadComplete 处理程序中，然后才能正常工作。Math.min 的第一个参数是当有足够的数据填充列表时所需的高度。请注意，必须将此相同的值设置为网格的高度。此脚本选择网格的实际高度和所需高度中的最小值。所以如果没有足够的行，网格高度就会缩小，否则我们总是有相同的高度！
回答by Pete Amundson
call the below function from afterInsertRow and when deleting a row:
从 afterInsertRow 和删除行时调用以下函数：
function adjustHeight(grid, maxHeight){
var height = grid.height();
if (height>maxHeight)height = maxHeight;
grid.setGridHeight(height);
}
回答by msanjay
Though the height 100% worked fine in the demo, it didn't work for me. The grid became much bigger, maybe it tried to occupy the parent div's height. Amit's solution worked perfectly for me, thanks! (I'm new as a contributor here, and so need a higher 'reputation' to mark any votes up :) )
虽然高度 100% 在演示中工作正常，但它对我不起作用。网格变得更大了，也许它试图占据父 div 的高度。Amit 的解决方案非常适合我，谢谢！（我是这里的新贡献者，因此需要更高的“声誉”来标记任何投票:)）
回答by Walter Stabosz
Here is a generic method I came up with based on Amit's solution. It will allow you to specify the max number of rows to display. It uses the grid's header height to calculate max height. It may need tweeking if your rows aren't the same height as your header. Hope it helps.
这是我根据 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);
}
回答by nmanandhan
Add below code inside loadComplete function
在 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);
}
