Javascript 使jqGrid在web浏览器上响应的方法

我是jqGrid的新手，我需要在调整web浏览器窗口的大小时调整网格的大小。我已经应用了

autowidth:true，
收缩到它：true在网格中，但不起作用

CSS
width:100%
的设置是唯一的一个实现，但在jqGrid的情况下，它并不好

它在许多内部结构上明确地设置了
px
中的
width

解决这个问题的最佳方法是什么
 jqGrid在许多内部结构（div、表等）上使用固定的
width
值。所以不能只设置CSS
width:100%
。然而，还有另一种方法可以做到这一点。可以在
window
对象上注册
resize
事件处理程序，并显式调用
setGridWidth
。该方法将jqGrid的所有内部结构调整到新宽度。所以这将是一种干净的方法

如果使用
autowidth:true
，则jqGrid仅将jqGrid的宽度设置为其父级的宽度一次。在
$（窗口）内部。调整处理程序的大小我们可以获得父级的新（当前）宽度，并重置网格
宽度的值。相应的代码如下所示

$(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在主
元素上构建了一些潜水
$（“#list”）.closest（“.ui jqgrid”）
作为包含网格所有元素的外部div给出

实时演示代码。
我编写了一个css，可用于使网格响应：

在我看来，它比使用javascript更快

以下是css代码：


.ui-jqgrid.ui-jqgrid-toppager.ui-pager控件、.ui-jqgrid.ui-jqgrid-pager.ui-pager控件{
高度：自动；
}
.ui jqgrid.ui寻呼机控制td[id$=“\u toppager\u center”]，.ui jqgrid.ui寻呼机控制td[id$=“寻呼机\u center”]{
宽度：自动！重要；
空白：正常！重要；
高度：自动；
}
.ui jqgrid.ui寻呼机控制td[id$=“\u-toppager\u-left”]，.ui jqgrid.ui寻呼机控制td[id$=“pager\u-left”]{
宽度：自动！重要；
空白：正常！重要；
高度：自动；
}
.ui jqgrid.ui寻呼机控制td[id$=“\u-toppager\u-right”]，.ui jqgrid.ui寻呼机控制td[id$=“pager\u-right”]{
宽度：自动！重要；
空白：正常！重要；
高度：自动；
}
.ui jqgrid.ui jqgrid bdiv、.ui jqgrid.ui-jqgrid-view.table-responsive、.ui jqgrid、.ui jqgrid寻呼机、，
.ui jqgrid TopPage、.ui jqgrid hdiv{
宽度：自动！重要；
}
.ui jqgrid.ui寻呼机控制td[id$=“\u-toppager\u-left”]，.ui jqgrid.ui寻呼机控制td[id$=“pager\u-left”]，
.ui jqgrid.ui寻呼机控制td[id$=“\u toppager\u center”]，.ui jqgrid.ui寻呼机控制td[id$=“寻呼机\u center”]{
溢出-x：自动；
溢出y：隐藏；
}
在jqgrid事件之前添加到下面的方法

功能
我尝试了以下代码，但发现它没有为响应设备提供任何滚动条。因此决定定制JQGRID样式表：

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

请找到我的黑客使JQ网格正确响应

/****JQ电网响应能力***/

#gview_jqgrid, div#myPager {width:100% !important;height:100% !important;}
.ui-jqgrid-hdiv, .ui-jqgrid-htable {width:100% !important;height:100% !important;}
.ui-jqgrid-bdiv, #jqgrid {width:100% !important;height:100% !important;}
.ui-jqgrid .ui-jqgrid-hbox {padding-right:0 !important;}
.ui-jqgrid tr.jqgrow td { white-space: pre-wrap !important;}
div#gbox_jqgrid { width: 100% !important; overflow-x: scroll; margin-bottom: 80px !important;}

将此添加到自定义样式表中，并设置为查看JQGrid完全响应

任何其他建议都将受到欢迎。试试看，享受吧
 在这个演示中，pager元素没有响应，我想我们需要添加对它的引用。@Harshit：这取决于您如何准确定义“响应”。此外，寻呼机和导航栏的行为在较新版本中会发生更改（请参阅）。有更好的行为举止。见和。上一个演示为最后一列使用了
“hidden xs”
引导类，该列的隐藏/显示取决于网格的宽度。我遇到了完全相同的问题，这个解决方案工作得非常好。谢谢@MichaelSobczak：不客气！显示了我开发的fork的其他可能性：属性
类：“隐藏的xs”，标签类：“隐藏的xs”
从上一列演示使用Bootrsrap类，如果页面分辨率低，则隐藏该列。你看到了附在接受答案上的提琴了吗？这些列在移动设备中不可见，并且没有响应设备的滚动条，请为滚动提供适当的脚本？我认为脚本代码可以代替css工作。这段代码解决了我对旧桌面屏幕显示的问题。谢谢@杰夫克很高兴这有帮助。给我+1？：）这对列没有任何作用。。。它们看起来还是被压扁了。
#gview_jqgrid, div#myPager {width:100% !important;height:100% !important;}
.ui-jqgrid-hdiv, .ui-jqgrid-htable {width:100% !important;height:100% !important;}
.ui-jqgrid-bdiv, #jqgrid {width:100% !important;height:100% !important;}
.ui-jqgrid .ui-jqgrid-hbox {padding-right:0 !important;}
.ui-jqgrid tr.jqgrow td { white-space: pre-wrap !important;}
div#gbox_jqgrid { width: 100% !important; overflow-x: scroll; margin-bottom: 80px !important;}