如何将jqgrid动态调整为当前窗口大小？答案

【问题标题】：How to dynamically resize jqgrid to current window size?如何将jqgrid动态调整为当前窗口大小？
【发布时间】：2013-07-29 20:05:38
【问题描述】：

如何将 jqgrid 动态调整为当前窗口大小（基于 javascript/jQuery）

最好的例子在这里（TinyMCE）：转至：http://www.tinymce.com/tryit/full.php

然后尝试 CTRL+ALT+F 或菜单->查看->全屏

请帮忙，我有 js/jquery 的初学者知识（我知道更多的 PHP 语言）。

我就是这样称呼 jqgrid：

$grid->renderGrid('#grid','#pager',true, null, null, true,true);

..提前致谢

如果你理解我的话，这就是我所说的。

我想向 gridNav 添加自定义按钮，以便在放大视图和普通视图之间切换（就像 tinyMCE 编辑器一样！！）

我的网格表有很多列（长水平滚动），这就是为什么我想到要激怒整个表格的原因。

按钮代码...

$buttonoptions = array("#pager", array(
        "caption"=>"Resize", 
        "onClickButton"=>"js:function(){ ... resize call here ...}", "title"=> "Resize"
   )
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);

【问题讨论】：

标签： javascript jquery jqgrid resize window

【解决方案1】：

function resizeJqGridWidth(grid_id, div_id, width)
{
    $(window).bind('resize', function() {
        $('#' + grid_id).setGridWidth(width, true); //Back to original width
        $('#' + grid_id).setGridWidth($('#' + div_id).width(), true); //Resized to new width as per window
     }).trigger('resize');
}

setGridWidth(new_width,shrink)：动态设置网格的新宽度。

new_width：它将是新的宽度（像素）。

收缩（默认为真）：

true -> 它将允许根据当前调整大小的 jqGrid 宽度调整网格中列的大小。

false -> 如果当前调整 jqGrid 的宽度将超过其设置的 jqGrid 宽度，它将在 jqGrid 末尾附加额外的空白列。

感谢mfs。

【讨论】：

我想在窗口的宽度和高度（不仅仅是宽度）处看到网格
然后使用 setGridHeight 和 setGridWidth。
我认为更像是一种通过按钮切换来来回调整网格大小的方法。 trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons
每次调整大小都会触发多次。必须有更有效的方法。

【解决方案2】：

基于 display:flex;解决方案在这里：
Plnkr
测试于：

IE 11、Chrome、Opera - 好的。
FF - 在错误位置显示垂直滚动条。
安全 - 好的。

希望对您有所帮助。

编辑：
我试图解决同样的问题：有一些容器会根据浏览器窗口大小收缩和伸展。
仅 CSS 解决方案要点：

按照here 的描述创建弹性布局
使目标 jqGrid 容器元素也成为 flex 容器并将 jqGrid 放在那里，下面的 css 将发挥所有作用。

jqGrid 的 CSS

    .ui-jqgrid {
      display: flex;
      flex-direction: column;
      flex:1;
      width:auto !important;
    }
    .ui-jqgrid > .ui-jqgrid-view
    {
      display:flex;
      flex:1;
      flex-direction:column;
      overflow:auto;
      width:auto !important;
    }

     .ui-jqgrid > .ui-jqgrid-view,
     .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-bdiv {
          flex:1;
          width: auto !important;
    }

    .ui-jqgrid > .ui-jqgrid-pager,
    .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-hdiv {
        flex: 0 0 auto;
      width: auto !important;
    }
    /* enable scrollbar */
    .ui-jqgrid-bdiv {
        overflow: auto
    }

CSS 来组织 flex 布局：

    .box {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
     .boxHeader {
        -ms-flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        background-color: green;
    }
     .boxContent {
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        -webkit-box-flex: 1.0;
        overflow: auto;
    }
     .boxFooter {
        -ms-flex: 0 1 auto;
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        background-color: cornflowerblue;
    }
    .fullSize {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }

最后是示例标记：

    <body>
        <!--Flex stuff -->
        <div class="box fullSize">
          <div class="boxHeader" style="background-color:#5fbff3">
            header just to show that this block takes<br> as much as it         needs<br> to display its<br> content
          </div>
          <div class="boxContent box" style="background-color:#D0D0D0;         padding:15px">
             <table id="list"></table>
              <div id="pager"></div>
          </div>
          <div class="boxFooter" style="text-align:right"><span>same as header</span></div>
        </div>

<!-- Flex stuff end -->
    </body>

在.js中做

    var grid = $("#list");
    grid.jqGrid({ options});

不需要设置宽度或高度。（无论如何它们都会被忽略）

【讨论】：