如何使jqGrid流体高度

Question

很长一段时间以来，我一直在寻找如何在jqGrid中制作流体高度的答案，但我仍然没有找到它。

所以，我需要流体高度

我知道如何设置流体宽度:

jQuery(window).resize(function(){
gridId = "grid";
gridParentWidth = $('#gbox_' + gridId).parent().width();
$('#' + gridId).jqGrid('setGridWidth',gridParentWidth);
})

I tried with

gridParentHeight = $('#gbox_' + gridId).parent().height();
$('#' + gridId).jqGrid('setGridHeight',gridParentHeight);

但这行不通。

有解决方案吗?

Answer 1

我找到了解决问题的方法。下面是代码(适用于Firefox):

winHeight = window.innerHeight;
wHeight = winHeight - 90;
$("#grid").jqGrid('setGridHeight',wHeight);
jQuery(window).resize(function(){
    gridId = "grid";
    gridWidth = $('#gbox_' + gridId).parent().width();
    $('#' + gridId).jqGrid('setGridWidth',gridWidth);
    if(wHeight < 110){  //Height of five rows in grid is 110 pixels.
        wHeight = 110;
        $('#'+ gridId).jqGrid('setGridHeight',wHeight);
    }
    else {
        $('#'+ gridId).jqGrid('setGridHeight',wHeight);
}

Answer 2

我很欣赏这是一个旧的线程-但这里有一个CSS(因此更流畅)的解决方案。

beforeRequest: function () {
  setTimeout(function () {
    var gridName = this.id;
    $('#gbox_' + gridName).css({
      position: 'absolute',
      top: 0,
      bottom: $('#gbox_' + gridName + ' .ui-pager-control').outerHeight() + 'px',
      width: '100%',
      height: '100%'
    });
    $('#gbox_' + gridName + ' .ui-jqgrid-view').css({ 'height': '100%' });
    $('#gbox_' + gridName + ' .ui-jqgrid-bdiv').css({
      position: 'absolute',
      top: $('#gbox_' + gridName + ' .ui-jqgrid-titlebar').outerHeight() + $('#gbox_' + gridName + ' .ui-jqgrid-hbox').outerHeight() + 'px',
      bottom: 0,
      left: 0,
      right: 0,
      height: '',
      width: ''
    });
  }, 100);
}

一个实际的例子:http://jsfiddle.net/Ba5yK/16/