jquery - 让 jqGrid 填充它的容器

Question

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

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

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

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

score 6 · Accepted Answer

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

score 2 · Accepted Answer

我正在使用 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 >的块自动生成网格。所以，如果你调用并设置，你会得到一个 javascript 错误。为避免这种情况，您可以在声明网格后的某处添加此脚本块。< body >< head >layout()triggerEventsOnLoad: true< head >

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

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

score 2 · Accepted Answer

这是我目前的解决方案：

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

jquery - 让 jqGrid 填充它的容器

3 回答 3

Related

Reference