javascript - 隐藏div中的jqGrid宽度不正确

Question

我使用的是 jqGrid 版本 4.4.1。我需要在页面上创建 x 个网格。第一个格子在可见 block 中输出，但其他格子以如下格式输出

<div style='display:none'>
//My jqGrid output
</div>

在可见 div 中输出的第一个表格具有正确的宽度:

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_table0" dir="ltr" style="width: 920px;">

但所有其他表格的宽度都不正确:例如。 100像素；

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_table1" dir="ltr" style="width: 100px;">

当我尝试在可见 div 中呈现所有表格时，所有宽度都计算正确。

Answer 1

是的，你是对的.. 当 disply:none 时，网格宽度将无法正确计算。要解决此问题，您必须确定负责显示网格的事件，并且在该事件中，在显示网格之后，您应该使用 setGridWidth 函数来正确设置网格的宽度。

由于您没有使用单独的列宽，我建议您将网格包裹在一个 div 中(假设它的 id 是 container_grid)，并且在显示网格时，将其宽度设置为包裹 div 的宽度。

如果您对 div 元素的宽度使用百分比(或者说流体布局)，您可以使用 javascript 的 offsetWidth 方法获取包装 div 的宽度。

if($('#container_grid').attr("id")!==undefined)        
            grid.setGridWidth($("#container_grid")[0].offsetWidth);