动态 jqGrid 的水平滚动条问题答案

【问题标题】：Horizontal Scrollbar issue for Dynamic jqGrid动态 jqGrid 的水平滚动条问题
【发布时间】：2016-03-23 14:40:57
【问题描述】：

我正在研究 ASP.net MVC。我的应用程序中有许多动态和静态 jq 网格，并且面临水平滚动条问题。

我为溢出属性做了以下代码：

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-y: auto !important;
    overflow-x: auto !important;
}

.ui-jqgrid .ui-jqgrid-btable {
    overflow-y: auto !important;
    overflow-x: auto !important;
}

我设置了autowidth=true;。我无法设置shrinkToFit=false，因为我在网格调整大小上有另一个代码，它也会调整列宽。

由于我已将溢出属性设置为自动，因此我也需要滚动条的相同行为。

第一次加载网格时，没有出现水平滚动条这是正确的，在窗口调整大小后，网格也会随着列调整大小并且出现水平滚动条是正确的。但是当我试图最大化屏幕时，水平滚动条不应该出现，这没有发生。它仍然显示滚动条。谁能帮帮我？

【问题讨论】：

抱歉，您只是描述了您所做的事情，而没有提供任何代码。仅根据信息很难理解您。首先，您应该始终写出您使用的 jqGrid 版本以及来自哪个分支（free jqGrid、Guriddo jqGrid JS 或版本 $(window).bind("resize", ...) 的代码（例如在 the answer 中）。确实需要更多细节。
您写的是“动态”网格，但不清楚您的意思。有很多方法可以动态构建网格。您是使用jqPivot、OData 插件、通过单独的$.ajax 请求加载colModel 还是以其他方式动态创建jqGrid？请发布更多详细信息。
我正在使用免费的 jqGrid。我没有使用 $(window).bind("resize", ...).on gridComplete 事件，我在 setGridWidth 函数的帮助下设置网格的宽度。
在gridComplete 中使用任何绑定都会很糟糕，因为事件处理程序将被多次调用。我的意思是：你应该在你的问题上附加更多细节和更详细的问题描述。我的第一印象：您应该关注the answer 并包括$(window).bind("resize", ...) 在调整窗口大小时调用setGridWidth。如果您已经使用引导框架，我建议您考虑使用 classes: "hidden-XXX", labelClasses: "hidden-XXX"。它可以提高网站在移动设备上的可读性

标签： javascript jquery css asp.net-mvc-4 jqgrid

【解决方案1】：

由于您已经在网格选项中使用autowidth:true;，您可以在window 的resize 事件中使用setGridWidth 方法。
你需要使用这个：

$(window).on("resize", function () {
    var $grid = $("#gridID"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
}).resize(); // <----triggers the resize on dom ready.

【讨论】：