让 jqGrid 填充它的容器答案

【问题标题】：Make jqGrid fill its container让 jqGrid 填充它的容器
【发布时间】：2011-02-24 13:43:15
【问题描述】：

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

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

jqGrid 和 jQuery Layout 都提供回调，但是当我使用它们时，页面布局会严重中断。

有没有人有混合 jqGrid 和 jQuery 布局的经验？

【问题讨论】：

标签： jquery jqgrid jquery-layout

【解决方案1】：

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

【讨论】：

谢谢，这让我得到了我需要的答案。
@JustinEthier 我们如何使它成为一个像 twitter 引导表一样的流体网格。例如这里192.69.216.111/themes/preview/ace/tables.html
Murali 提供的链接现在好像坏了。你能更新链接吗？我很想看看他的解决方案是如何工作的。

【解决方案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 放在布局的任何窗格中，并且当调整中心窗格的大小时，它们将被调整大小以适应它所在的窗格。

【讨论】：

【解决方案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 插件，则网格是使用 < body > 内的 < script > 块自动生成的（不在 < head > 内的脚本块中）。因此，如果您调用layout() 并在< head > 中设置triggerEventsOnLoad: true，您会收到一个javascript 错误。为避免这种情况，您可以在声明网格后的某处添加此脚本块。

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

如果您有多个网格，您可以使用您在表格元素上定义的类来访问它们（参见上面的 html sn-p），然后在每个网格上运行 resizeGrid 方法。

【讨论】：