javascript - 使 jqGrid 在 Web 浏览器上响应的方法

Question

我是 jqGrid 的新手，我需要在调整 Web 浏览器窗口大小时调整网格大小。我在网格中应用了 autowidth : true; , shr​​inkToFit: true; 但这不起作用。

CSS width : 100% 的设置是唯一的一种实现方式，但在 jqGrid 的情况下并不好
它在许多内部结构上显式地在 px 中设置了 width。

什么是解决它的完美方法？

Answer 1

jqGrid 使用固定的 width许多内部结构(div、表等)的值。所以不能只设置 CSS width : 100% .尽管如此，还有另一种方法可以做到这一点。一个可以注册resize window 上的事件处理程序反对并调用 setGridWidth明确地。该方法将 jqGrid 的所有内部结构调整为新的宽度。所以这将是干净的方法。

如果您使用 autowidth: true然后 jqGrid 将 jqGrid 的宽度设置为其父级的宽度一次。 $(window).resize 内部处理程序，我们可以获得父级的新(当前)宽度并重置网格的值 width .对应的代码如下

$(window).on("resize", function () {
    var $grid = $("#list"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
});

我用了$("#list").closest(".ui-jqgrid")而不是 $("#list")因为 jqGrid 构建了一些 over 主 <table>元素。 $("#list").closest(".ui-jqgrid")给出包含网格所有元素的外部 div。

The modified fiddle demo现场演示代码。