javascript 如何将 jqgrid 动态调整为当前窗口大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17934104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically resize jqgrid to current window size?
提问by tuuni
How to dynamically resize jqgrid to current window size (based on javascript / jQuery)
如何将 jqgrid 动态调整为当前窗口大小（基于 javascript / jQuery）
Best example is here (TinyMCE): Goto: http://www.tinymce.com/tryit/full.php
最好的例子在这里（TinyMCE）：转到：http://www.tinymce.com/tryit/full.php
Then try CTRL+ALT+F or Menu->View->Full Screen
然后尝试 CTRL+ALT+F 或 Menu->View->Full Screen
Please help, i have beginner knowledge in js/jquery (i know more PHP language).
请帮助，我有 js/jquery 的初学者知识（我知道更多的 PHP 语言）。
Thats how i call jqgrid:
这就是我调用 jqgrid 的方式：
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
..thanking in advance
..提前致谢
This is what i ment if you understand me.
如果你理解我的话，这就是我所说的。
I would like to add custom button to the gridNav to function like switch between enlarged and normal view (like a tinyMCE editor has!!)
我想向 gridNav 添加自定义按钮以在放大视图和普通视图之间切换（就像 tinyMCE 编辑器一样！！）
My grid table has many columns (long horizontal scroll) thats why i came to the idea to enrage the whole table.
我的网格表有很多列（长水平滚动条），这就是为什么我想激怒整个表的原因。
The button code...
按钮代码...
$buttonoptions = array("#pager", array(
"caption"=>"Resize",
"onClickButton"=>"js:function(){ ... resize call here ...}", "title"=> "Resize"
)
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
回答by eclipsis
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): Sets a new width to the grid dynamically.
setGridWidth(new_width,shrink)：动态设置网格的新宽度。
new_width: It will be the new width (pixel).
new_width：它将是新的宽度（像素）。
shrink (default true) :
收缩（默认为真）：
true -> It will allow to resize columns with in the grid according to the currently resized jqGrid width.
true -> 它将允许根据当前调整大小的 jqGrid 宽度调整网格中列的大小。
false -> It will append additional blank column at the end of jqGrid, if currently resized width of jqGrid will exceed its setup jqGrid width.
false -> 如果当前调整大小的 jqGrid 宽度将超过其设置的 jqGrid 宽度，它将在 jqGrid 的末尾附加额外的空白列。
Courtesty of mfs.
由mfs 提供。
回答by Sergey Strashko
Based on display:flex; solution is available here:
Plnkr
Tested on:
基于 display:flex; 解决方案在这里可用：
Plnkr
测试：
- IE 11, Chrome, Opera - ok.
- FF - shows vertical scrollbar in wrong place.
- Safary - ok.
- IE 11、Chrome、Opera - 好的。
- FF - 在错误的位置显示垂直滚动条。
- 萨法里 - 好的。
Hope it helps.
希望能帮助到你。
Edit:
I was trying to solve same problem: have some container which shrinks and stretches depending on browser window size.
CSS only solution pin points:
编辑：
我试图解决同样的问题：有一些容器可以根据浏览器窗口大小缩小和拉伸。
CSS 唯一解决方案针点：
- Create flex layout as described here
- make target jqGridcontainer element to also be flex container and place jqGridthere and css below will do all the magic.
- 按照此处所述创建 flex 布局
- 使目标jqGrid容器元素也成为 flex 容器并将jqGrid 放在那里，下面的 css 将发挥所有作用。
CSS for jqGrid
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 to organize flex layout:
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;
}
and finally sample markup:
最后是示例标记：
<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>
in .js do
在 .js 中做
var grid = $("#list");
grid.jqGrid({ options});
don't need to set width or height. (anyway they will be ignored)
不需要设置宽度或高度。（无论如何它们都会被忽略）
