如何动态调整jqgrid到当前窗口大小？

如何动态调整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); 

Answer 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）：

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

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

追求mfs的追求 。

Answer 2

基于显示：flex; 解决方案在这里可用：
Plnkr
测试：

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

希望能帮助到你。

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

• 如此处所述创建flex布局
• 使目标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 } 

用于组织flex布局的CSS：

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

最后样本标记：

    
 
 header just to show that this block takes
 as much as it needs
 to display its
 content 
 
  
 
 
same as header
 
   

在.js

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

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