Fatal编程技术网
  • javascript/
  • Javascript 如何将jqgrid动态调整为当前窗口大小？

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

javascript jquery jqgrid

Javascript 如何将jqgrid动态调整为当前窗口大小？,javascript,jquery,jqgrid,resize,window,Javascript,Jquery,Jqgrid,Resize,Window,如何将jqgrid动态调整为当前窗口大小（基于javascript/jQuery） 最好的例子如下（TinyMCE）： 后藤： 然后尝试CTRL+ALT+F或菜单->查看->全屏 请帮助，我有js/jquery的初学者知识（我知道更多的PHP语言） 这就是我对jqgrid的称呼： $grid->renderGrid（“#grid”、“#pager”、true、null、null、true、true） …提前感谢 如果你能理解我，这就是我想要的 我想在gridNav中添加自定义按钮，以便在放大

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

最好的例子如下（TinyMCE）： 后藤：

然后尝试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);
setGridWidth（新宽度，收缩）：动态设置网格的新宽度

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

收缩（默认为真）：

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

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

礼节性。

基于显示：flex；此处提供解决方案：

测试日期：

  • IE 11，Chrome，Opera-好的
  • FF-在错误的位置显示垂直滚动条
  • Safary-好的

希望有帮助


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

  • 如前所述创建flex布局
  • 使targetjqGrid容器元素也成为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>
不需要设置宽度或高度。（无论如何，它们将被忽略）

我希望在窗口的宽度和高度（不仅仅是宽度）处查看网格，然后在使用setGridWidth的同时使用setGridHeight。我认为这更像是一种通过按钮切换来来回调整网格大小的方法。这将在每次调整大小时触发多次。必须有一种更有效的方法。 
    <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>

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