根据行数调整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); }