Question

我在我的一个项目中使用jQuery布局插件和jqGrid插件，除了一点问题外，它们工作得很好......

我希望jqGrid完全填满包含它的窗格（jQuery布局窗格）。调整窗格大小应该调整jqGrid的大小，关闭窗格应该隐藏jqGrid等等。

jqGrid和jQuery Layout都提供了回调，但是当我使用它们时，页面布局会出现严重破坏。

有没有人有经验将jqGrid与jQuery Layout混合使用？

Answer 1

我建议您仔细阅读resize-jqgrid-when-browser-is-resized，其中讨论了调整网格大小的几种技巧。

Answer 2

这是我目前的解决方案：

首先创建一个由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放在布局的任何窗格中，并调整它们的大小以适应中心窗格调整大小时的窗格。

Answer 3

我正在使用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

<div id="grid_container">
  <table id="gridtable" class="mygrid"></table>
  <div id="grid_pgr"></div>
</div>

此外，如果您使用的是jquery struts2插件，则会使用< script >中的< body >块自动生成网格（不在< head >内的脚本块中）。因此，如果您在layout()中调用triggerEventsOnLoad: true并设置< head >，则会出现javascript错误。为避免这种情况，您可以在声明网格后的某处添加此脚本块。

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#gridtable").jqGrid('setGridWidth',$myLayout.state.center.innerWidth - 2, 'true');
});
</script>

如果您有多个网格，可以使用在table元素上定义的类来访问它们（请参阅上面的html代码段），然后对每个网格运行resizeGrid方法。

使jqGrid填充其容器

3 个答案: