jqgrid自适应调整宽度时如何显示水平滚动条

最近开发项目的过程中，遇到了调整jqgrid表格的问题，项目前端框架用bootstrap进行开发，想适配任何大小的屏幕，但在调整宽度的时候发现无法通过水平滚动条来查看显示不出来的字段信息，强制设置了滚动条的样式发现不起作用，如下图所示。

后通过浏览器自带的审查元素查看器发现设置样式的位置不太正确，这样是给jqgrid所在的div容器设置了水平滚动条，而我想要的效果其实是在字段显示不开的时候，通过水平滚动条来滑动jqgrid中的table来查看显示不出来的字段信息。通过查看器对应页面上的元素发现jqgrid的table是包含在一个ui-jqgrid-bdiv样式的div中的，对该div设置滚动条才是我想要的效果。

jqgrid表格的设置如下：

autoScroll:true,

shrinkToFit:false,

loadComplete: function(data){

            $("#mainTable").closest(".ui-jqgrid-bdiv").css({"overflow-x":"scroll"});

}

找到mainTable对象的第一个class为ui-jqgrid-bdiv的祖先元素，强制设置滚动条的显示，缩小屏幕jqgrid表格出现水平滚动条。

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。它比parent()和parents()两个方法简洁直观，返回0或1个对象，避免了返回很多对象而不知道该怎么处理的问题，非常好用。