jqgrid水平滚动条显示问题。

最新推荐文章于 2022-03-24 10:23:00 发布
最新推荐文章于 2022-03-24 10:23:00 发布
阅读量2k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： jquery 文章标签： jqgrid 滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39597371/article/details/85310208
本文分享了在使用jqGrid时遇到的滚动条不显示问题的解决方法，通过设置autoScroll和shrinkToFit属性，以及调整CSS样式，成功实现了水平滚动条的显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

       最近做的项目前端列表页展示使用的jqgrid，由于不太了解，所以走了不少弯路，网上查了好多，调试了好久，也没有显示出来，最后发现了只需要稍微改改就好了。如下：

 首先设置   autoScroll : true,  //设置水平滚动条
                  shrinkToFit : false,

这两个属性一定要设置，设置好之后看看效果，要是还不行的话就设置下面的样式

  $("#gridname").closest(".ui-jqgrid-bdiv").css({"overflow-x":"scroll"});   //gridname页面数据绑定表格的id值，设置强制显示滚动条

是不很开心，滚动条终于显示出来了。。。

设置jqGrid水平滚动条
qq_33470696的博客
10-29 1115
1.html设置css样式 <style> .ui-jqgrid .ui-jqgrid-bdiv { border-top: 1px solid #E1E1E1; overflow-x: auto; } .frozen-div, .frozen-bdiv { ...
ajax jqgrid,JavaScript系列：ajax异步加载jqgrid
weixin_42310271的博客
08-05 774
ajax简介Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 1通过在后台与服务器进行少...
jquery水平滚动条
12-25
jquery水平滚动条，基于jquery框架开发的滚动条，兼容各个浏览器
JqGrid 表格水平滚动条不显示导致表格字段没显示全无法查看问题处理（解决）
Scott
06-17 2359
最近使用了JqGrid表格，但是在设置水平滚动条时，一直没有效果，列也没有显示全。效果如下所示： 解决这个问题的方法： 如代码块中所示，必须要像下面一样设置下面的三个属性，shrinkToFit一定是false，默认是 true 的，也需要 autowidth 为 true // 自定义列宽 必须属性 shrinkToFit: false, // 设置水平滚动条 autoScroll : true, // 自适应宽度 autowidth...
JqGrid实现水平滚动条
Huangwen的博客
05-31 1万+
这几天由于业务需求，用到了jqgrid，用起来感觉很强大，提供了丰富的功能。也碰了不少壁。 问题：对于表字段少的，就直接用无影响，但是有的表字段很多，就导致显示起来很别捏，如图： 默认情况下是没有开启水平滚动条的，也就是说无论有多少字段，都会显示在这一屏，这岂不是太操蛋？ 解决：还好，官方提供了属性开启横向滚动条，通过翻阅官方文档，发现通过设置这两个属性： shrinkToFit:fa...
jqGrid设置水平滚动条
lsh15846393847的博客
10-15 6581
默认情况下是没有开启水平滚动条的，也就是说无论有多少字段，都会显示在这一屏。 问题：jqGrid显示的内容的列宽并没有按照设置的列宽显示。列被压缩。则按比例初始化列宽度 原因：shrinkToFit为默认值。 解决办法： shrinkToFit boolean 此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用c...
jqgrid滑动时，固定表头，并在右侧显示滚动条
05-25
1. 将 jqGrid 的宽度设置为固定值，并将 `shrinkToFit` 属性设置为 `false`，以便允许水平滚动条出现。 2. 在 jqGrid 中启用 `scrollOffset` 属性，并将其设置为表头的高度，这样在滚动时表头将保持固定位置。 3. ...
jqGrid中文文档之选项设置
09-03
- `forceFit`：设为`true`，自动调整列宽以适应整个表格，避免水平滚动条出现。 8. **树形表格（TreeGrid）**： - `treeGrid`：设为`true`启用树形表格功能。 - `ExpandColumn`：指定用于展开/折叠树形行的列名...
Jqgrid属性详解[定义].pdf
10-11
16. **forceFit**：如果设为`true`，将强制所有列适应表格宽度，避免出现水平滚动条。 17. **gridview**：当设为`true`时，可以显著提高表格加载速度，但会牺牲一些高级功能，如treeGrid、subGrid和`afterInsertRow...
jqgrid教程（项目实战）
chenjunjun79的博客
07-23 1万+
后台管理助手jqgridjqGrid是使用ajax技术代表和处理web表格数据的一种解决方案，由于在客户端使用ajax异步加载数据，使得它能够与许多的后端语言如：PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl中的任何一种结合起来进行开发。下面我从jqGrid的背景到项目实战进行介绍，对于有的功能可能存在疑问的可以参考：jqGrid官方网站 jqG
jqgrid 添加水平滚动条
热门推荐
赶路人儿
12-15 2万+
grid.jqGrid({ treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "name",//指定用于张开treeGrid的列,当treeGrid为true时有效. ExpandColClick: true, treedatatype: "json", loadui:"di
JqGrid实现超长水平（左右）滚动条功能
程序新视界
05-12 3174
使用JqGrid来实现列表功能非常方便快捷，但在使用的过程中还会遇到一些定制化的问题。这篇文章来跟大家说一下当列表中数据比较多时，如何实现水平（左右）滚动来确保能够查看完整的信息。 字段较少情况 在字段较少的情况，直接使用即可，无效做其他调整。下面贴一下简单的示例代码： $(function () { $("#jqGrid").jqGrid({ url: baseURL + 'biz/message/list', datatype: "json", c
jqgrid在chrome下水平滚动条的处理方法
sgq0085的专栏
07-29 645
chrome里默认的table计算值会比ie或者firefox中的多出一个像素。即便添加如下配置 autowidth: true 表格仍然会出现水平滚动条   解决方法如下：   /** * 宽度+1像素 * 解决在chrome浏览器下出现水平滚动条 */ function removeHorizontalScrollBar() { $("div.ui-sta...
jqGrid保持垂直滚动条一直显示
jsy625的专栏
06-24 6749
在用jqGrid显示表格时遇到这样的问题：当记录条数较少时，垂直滚动条不显示，但是表格的位置仍然会为滚动条留下位置，如下图所示： 解决方案：可以让垂直滚动条保持显示。做法： loadComplete: function (xhr) { $("#jqGridId").closest(".ui-jqgrid-bdiv").css({ 'overflow-y'
jqgrid 列太多显示不全，添加滚动条
爱跳舞的程序员
03-24 263
添加两行代码即可 //显示水平滚动条 shrinkToFit:false, autoScroll: true, 如需，隐藏滚动条，添加这行代码(其中id根据自己的修改) //隐藏grid底部滚动条 $("#fhycgzGrid"...
jqGrid 开启底部滚动条
syy363250763的博客
11-01 2200
将jqGrid的三个参数设置成这样的: autowidth: false, shrinkToFit:false, autoScroll: true,//设置水平滚动条 如果水平滚动条设置失败,没有显示出来,除了其他博主的解决办法,你还需要查看一处原因: //手动改变浏览器大小，表格自适应大小，991，1355大中小屏 $(window).resize(function () { if...
jqgrid 设置冻结列
weixin_34326179的博客
08-08 631
有时，jqgrid表格的列非常多，而表格的宽度值是固定的，我们需要在表格底部出现滚动条，并且固定前面几个列作为数据参照项，如何实现？ 需要用的jqgrid冻结列，步骤如下： 1）设置需要冻结的列属性，frozen: ture //ture：启用冻结 2）将设置了冻结的列放置在字段集合的前面部分（一定注意） 3）设置两个属性：autoScroll: false,shrinkToFit: ...
jqgrid自适应调整宽度时如何显示水平滚动条
michaelhuaqing的专栏
03-15 2406
最近开发项目的过程中，遇到了调整jqgrid表格的问题，项目前端框架用bootstrap进行开发，想适配任何大小的屏幕，但在调整宽度的时候发现无法通过水平滚动条来查看显示不出来的字段信息，强制设置了滚动条的样式发现不起作用，如下图所示。 后通过浏览器自带的审查元素查看器发现设置样式的位置不太正确，这样是给jqgrid所在的div容器设置了水平滚动条，而我想要的效果其实是在字段显示不开的时...
jqGrid横向滚动条
最新发布
01-01
### 实现或调整 jqGrid 横向滚动条 为了确保 jqGrid 的横向滚动条能够正常工作并根据页面宽度自动调整，可以采取以下几种方式： #### 方法一：动态设置表格宽度 当表格加载完成后，可以通过 `gridComplete` 函数来动态调整表格的宽度，使其适应父容器的大小。这有助于消除不必要的滚动条。 ```javascript $("#yourGridId").jqGrid({ // ...其他配置项... gridComplete: function() { $("#yourGridId").setGridWidth($(this).parent().width()); } }); ``` 这种方法适用于希望表格自适应其所在容器的情况[^2]。 #### 方法二：固定表头宽度与列宽 如果遇到横向滚动条无法显示的问题，可能是因为某些列的宽度超出了整个表格设定的最大宽度。此时应检查每列的 `width` 属性以及整体表格的 `width` 设置，并适当增加表格总宽度或者减少单个列的宽度。 ```javascript $("#dataInfo").jqGrid({ datatype: "local", colNames: ['轨迹', '车牌号码'], colModel: [ {name: 'CheckBox', index: 'CheckBox', align: 'center', width: 100, sortable: false}, {name: 'LicenceNumber', index: 'LicenceNumber', align: 'left', width: 250} ], width: 1400, autowidth: false // 关闭此选项以允许手动指定宽度 }); ``` 这里需要注意的是关闭了 `autowidth` 参数，以便能精确控制表格的整体尺寸[^3]。 #### 方法三：启用自动缩放功能 对于那些想要让表格既保持灵活性又能拥有良好用户体验的应用场景来说，开启 `shrinkToFit`, `autoScroll` 和 `autowidth` 这些参数是一个不错的选择。这些参数可以让表格更好地响应不同的屏幕分辨率和窗口大小变化。 ```javascript $("#yourGridId").jqGrid({ // ...其他配置项... autowidth: true, shrinkToFit: false, autoScroll: true }); ``` 上述配置使得表格不仅可以在较小屏幕上正确展示全部内容，而且还能提供平滑流畅的滚动体验[^4]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值