如何使jqGrid流体高度?

发布于 2024-12-09 07:42:47 字数 487 浏览 5 评论 0原文

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

所以,我需要流体高度

我知道如何制作流体宽度:

jQuery(window).resize(function(){
gridId = "grid";

gridParentWidth = $('#gbox_' + gridId).parent().width();
$('#' + gridId).jqGrid('setGridWidth',gridParentWidth);
})

我尝试过

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

,但不起作用。

有解决办法吗?

For a long time I am looking for an answer to how to make the fluid height in jqGrid, but I still have not found it.

So, I need fluid height.

I know how to make fluid width:

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);

but that is not working.

Is there a solution?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

最后的乘客 2024-12-16 07:42:47

我找到了解决我的问题的方法。这是代码(在 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);
}

I found a solution for my problem. Here is the code (works in 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);
}
蓝天白云 2024-12-16 07:42:47

我很欣赏这是一个旧线程 - 但这里有一个 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/

I appreciate this is an old thread - but here's a CSS (and therefore smoother) solution.

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);
}

An example of this in action : http://jsfiddle.net/Ba5yK/16/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文