如何计算的jqGrid头高度

可能包含额外的工具栏定义使用

toolbar: [true, "top"],

包含使用

$grid.jqGrid('navButtonAdd', '#grid_toppager', {...

定义导航工具栏，包含搜索工具栏。

要调整网格到屏幕结束的大小我正在寻找一种方法来计算窗口大小的这个标头高度。我尝试了下面的代码，但这设置网格高度太大。如何计算网格标题高度？

$(window).resize(function() { 
    var extraToolbarHeight = $('#t_' + $.jgrid.jqID($grid[0].id)).outerHeight(true), 
     caption_height=$("div#gview_"+$grid[0].id+" > div.ui-jqgrid-hdiv").outerHeight(true); 
    $('#grid1container').height($(window).height() - 18); 
    $grid.jqGrid('setGridHeight', $('#grid1container').height()-caption_height 
     -extraToolbarHeight); 
    }); 


    <div id="grid1container" style="width: 100%; height: 100%"> 
     <table id="grid"> 
     </table> 
    </div>

来源

2012-03-15 Andrus

没有运行你的代码，但你有没有尝试用innerHeight替换outerHeight？ – 2012-03-15 16:22:13

我用innerHeight（）替换了高度，但问题仍然存在。网格顶部移出屏幕。网格底部正确地在浏览器窗口中结束。用硬编码值替换caption_height会创建与浏览器高度完全相同的高度。但是，此值取决于搜索工具栏高度，因此无法进行硬编码，应该动态确定。如何查找搜索工具栏高度？ – Andrus 2012-03-15 19:04:38

这里是我写的函数来调整我的jqGrids的大小以适应它们的容器元素。看看它是否符合你的需求。

// resize a grid to fill the space of its container 
// this will throw an error if you pass in a non-existant 
// Parameters: 
// grid - a reference to your grid 
// container - a reference to your container, or the selector 
// Usage: 
// resizeGrid($('#gridXYZ'), '#largeGridDiv') 
function resizeGrid(grid, container) { 
    if (typeof container == 'string') { 
     container = $(container); 
    } 
    if (container.length > 0) { 
     var headerHeight = $($('.ui-jqgrid-hdiv')[0]).height(); 
     var newHeight = container.height() - headerHeight; 
     grid.jqGrid().setGridHeight(newHeight); 
     grid.jqGrid().setGridWidth(container.width()); 
    } else { 
     throw ('Non-existant container passed to resizeGrid()'); 
    } 
} 


// some other selectors that may help, again grid 
var gviewSelector = '#gview_' + $('#gridXYZ').attr('id'); 
var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv'; 
var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv';

来源

2012-03-16 14:12:32

这个设置太高：搜索工具栏包含jqGrid数据点按钮。在这种情况下，搜索工具栏将包装成两行，并且此方法返回的高度太小。此外，它不计算可能添加到jqgrid的附加工具栏高度。 – Andrus 2012-03-16 17:32:25

我使用了Chrome的DOM Inspector（按F12）来找出选择器以获取标题的高度。您应该能够做同样的事情来让选择器找到工具栏的高度，然后相应地调整newHeight的计算。 – 2012-03-16 19:07:07

我读了关于jqGrid标题元素的Oleg docs和选择器似乎是正确的。没有想法会导致这种情况。也许它是与searh工具栏包装成多行和setGridHeight（）设置无效高度有关 – Andrus 2012-03-17 20:17:58

如何计算的jqGrid头高度

回答

相关问题