使jqGrid填充其容器
我在我的一个项目中使用jQuery布局插件和jqGrid插件，除了一些小问题外，它们工作得很好……
我希望jqGrid完全填满包含它的窗格（jQuery布局窗格）。 调整窗格大小应该调整jqGrid的大小，关闭窗格应该隐藏jqGrid等等。
jqGrid和jQuery Layout都提供回调，但是当我使用它们时，页面布局可怕地破坏。
有没有人有任何经验混合jqGrid与jQuery布局？
- http://www.secondpersonplural.ca/jqgriddocs/index.htm
- http://layout.jquery-dev.net/
我建议你阅读resize-jqgrid-when-browser-is-resized ，它讨论了调整网格大小的几种技巧。
这是我目前的解决方案：
首先创建一个由onresize事件调用的resize函数：
function resizeGrid(pane, $Pane, paneState) { if(grid = $('.ui-jqgrid-btable:visible')) { grid.each(function(index) { var gridId = $(this).attr('id'); $('#' + gridId).setGridWidth(paneState.innerWidth - 2); }); } } 然后在你的布局中我们设置resize事件来调用这个方法：
$('#mylayout_id').layout({ center: { closable: false, resizable: false, slidable: false, onresize: resizeGrid, triggerEventsOnLoad: true // resize the grin on load also }, west: { fxName: "slide", size: 250, maxSize: 300 }, east: { fxName: "slide", size: 250, maxSize: 300 } });
通过这种方式，您可以将jqGrid放在布局的任何窗格中，并且可以调整它们的大小以适应调整中心窗格时所处的窗格。
我正在使用jqgrid 4.0（通过jquery struts 2插件）和jQuery布局插件。 之前的答案对我不起作用。 但是只有函数resizeGrid才是问题。 只需用上面的resizeGrid函数替换它。 这只会调整一个网格的大小 – 一个id为gridtable网格。
function resizeGrid(pane, $Pane, paneState) { jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true'); };
#gridtable是您为jqgrid创建的表元素的id
此外，如果您使用的是jquery struts2插件，则使用< body > < script >块自动生成网格（不在< head >中的脚本块中）。 因此，如果您在< head >调用layout()并设置triggerEventsOnLoad: true ，则会出现javascript错误。 为避免这种情况，您可以在声明网格后的某处添加此脚本块。
如果你有多个网格，你可以使用你在table元素上定义的类来访问它们（参见上面的html代码段），然后在每个resizeGrid上运行resizeGrid方法。