如何计算jqGrid页眉高度

Question

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>

Answer 1

这是我编写的一个函数，用于调整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';