关于easyui dataGrid横向垂直滚动条消失的解决办法

最新推荐文章于 2024-09-19 15:57:45 发布
最新推荐文章于 2024-09-19 15:57:45 发布
阅读量4.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端开发问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27036043/article/details/86685694

一开始整个datagrid没有充满屏幕的时候，滚动条是正常的。一旦充满屏幕就会消失。
原因找了好久终于找到了。
里面的单元格的宽度和整体table的宽度，还有包含这个table 的div的宽高度有关。
也就是说你必须重新调整一下整个table的宽度，和table里单元格的宽度，还有包含table的div的宽度。还有就是可以先加上fitColumns:true再调下宽度试一下。
如下图所示。改动下面箭头标的地方
在这里插入图片描述

去除jQuery中DataGrid的滚动条
HackWhisper的博客
10-03 286
在编程中，使用jQuery的DataGrid插件可以方便地展示和管理数据。然而，默认情况下，DataGrid会显示一个滚动条，以便在数据超出可见区域时进行滚动查看。为了去除DataGrid的滚动条，我们需要通过CSS样式来修改它的外观。接下来，我们需要初始化DataGrid并应用上述的CSS样式。通过以上步骤，你已经成功去除了jQuery中DataGrid的滚动条。现在，你可以根据自己的需求进行进一步的定制和样式修改。如果需要进一步配置DataGrid，你可以在初始化代码中添加适当的选项。
Jquery easyui 实现datagrid的单元格点击跳出弹出框
Sano_pan的博客
08-21 6291
最开始，页面布局如图，我们需要选中一行后再点击查看详情才可以，若点中两行，则跳出的弹出框。 然后呢，客户为了方便，要求直接在每一行操作后即可查看详情。所以，我就开始了吭哧吭哧改页面之路。 刚开始，我是想做成点击后直接下拉框内有详情的样子，如 这个样子的。可是呢，好像和我们想展示的周报详情有点不太符合，毕竟周报内容比较多，同时为了方便删除，我保留了选择框。 最后决定做成每一行添加按钮，可以直
easyui datagrid无横向滚动条
qq_24687915的博客
11-09 1149
两个设置一模一样的datagrid，一个可以出现横向滚动条，一个不可以。 $(function(){ $('#dg_id').datagrid({ title:'test_1', // iconCls:'icon-edit', width:800, method:'get', height:250, ...
Easyui 去除jquery-easui tab页div自带滚动条的方法
11-29
测试环境 jquery-easyui-1.5.3 需求场景 打开tab页面时，自动载入一个iframe页面，除了iframe页面本身会出现一个滚动条，tab标签页也出现一个滚动条，如下图所示，需求就是去掉tab页面的滚动条 解决方法 通过观察html页面结构，发现这个滚动条归属class为pannel-body的div 所以，解决方案，只需要添加样式即可。如下，带背景色内容： <head> …… <style type="text/css"> /*去掉easyui tabs右侧滚动条*/ #tabs .tabs-panels>.panel>.panel-body { ov
easyui datagrid 下方不出现 滚动条
忆水思寒的博客
11-04 757
esyui datagrid 水平方向下方出来滚动条的原因是因为使用了同一列名
easyui frozen column的垂直滚动条不出现的问题及原因
weu135的专栏
04-20 3967
最近在做eaysui的时候，datagrid滚动条忽然不出现了，然后使用firebug调试了半天了，发现是frozen column导致了，easyui的垂直滚动条是设置在column中，所以当只设置了frozen column时不会出现垂直滚动条。easyui datagrid 垂直滚动条不出现
easyui中combobox添加滚动条的方法
热门推荐
搬砖工
05-31 1万+
在项目中前端框架使用的是easyui，最近碰到的问题就当做为积累了。
easyui datagrid中添加上下左右按键跳到下一个单元格进行编辑，回车键跳到下一行最开始的单元格编辑的偷懒写法（仅供参考）
weixin_45901262的博客
09-19 409
【代码】easyui datagrid中添加上下左右按键跳到下一个单元格进行编辑，回车键跳到下一行最开始的单元格编辑的偷懒写法（仅供参考）
EasyUI折叠表格层次显示detailview详解及实例
08-31
4. **横向滚动处理**：对于数据过多的情况，本实例提供了横向滚动的解决方案，确保内容完整展示。 **实现步骤** 要实现折叠表格层次显示，首先需要在HTML中引入EasyUI所需的CSS和JS文件。以下是一些基本的引用： ...
横向滚动条并且隐藏竖向滚动条
weixin_33762321的博客
10-23 1431
怎么用CSS给html加横向滚动条并且隐藏竖向滚动条 解决方法：隐藏竖向滚动条在子页面的&lt;html&gt;标签里加入以下格式:&lt;html style="overflow: auto; overflow-y:hidden"&gt;,style="overflow:auto"，当内容超出范围之后，就会自动有滚动条了。设置div横向滚动条div &lt;style="overflow:sc...
【解决方法】EasyUI DataGrid不显示滚动条时，没有数据的问题
weixin_34015860的博客
10-02 284
解决方法 于dataGrid例如，下面的代码被添加到的定义：  JavaScript Code  1 2 3 4 5 6 7 8 9 10 onLoadSuccess : function (data) {     if (data.total == 0) {         $('#dg').datagri...
easyui中的datagrid下垂直滚动条不显示
Sky
07-04 9834
datagrid添加数据行时不用frozenColumns，而是用columns!
easyUI 数据表格 没有数据 只有列超过datagrid的宽度时候不显示横向滚动条
weixin_34010566的博客
03-15 434
为什么80%的码农都做不了架构师？>>> ...
easyui datagrid 显示横行滚动条
cnqwer1234的专栏
08-07 8083
var datagrid = $('#datagridw').datagrid({ pageSize : 15, pageNumber : 1, fit:true, pagination : true, singleSelect:true, collapsible: true, rownumbers : true, loadMsg : '正在加载...', url : '....
jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条
蕃薯耀的博客
02-06 1739
tagrid中数据量大时，body页面又设置高度超出隐藏时（如：overflow-y:hidden）时，这时datagrid加载满整个页面时也无滚动条。   二、解决方案：   给datagrid绑定onLoadSuccess事件，当加载成功后调用datagrid的resize方法，具体使用如下： $("#datagridId").datagrid({ …… ……, onLoadSuccess: function(data){ $
easyui datagrid 横向滚动条
weixin_30443731的博客
06-10 2016
要出现横向滚动条则不能有fitColumns:true/false 转载于:https://www.cnblogs.com/miraclesakura/p/3779899.html
Datagrd没有横向滚动条的原因
hlxstc_xly的专栏
11-27 668
Datagrid 的 fitColumns 属性： 默认为false； 设置为true后， 数据会填满横向屏幕，但是当行向数据太多时，会使得横向滚动条不出现，以至于无法拉动数据
EasyUI Datagrid IE浏览器中滚动条不起作用
Xcrow　の　blog
07-06 3306
使用EasyUI的Datagrid，发现在Chrome中垂直滚动条可以正常滚动，但是在IE11中，滚动条无法滚动。 解决办法： 改为    一切正常了
easyui datagrid 添加滚动条
最新发布
03-14
### 如何在 EasyUI DataGrid 中正确添加垂直和水平滚动条 为了实现在 EasyUI DataGrid 中正确添加垂直和水平滚动条的功能，可以通过调整 `datagrid` 的属性以及绑定事件来完成。以下是具体实现方式： #### 垂直滚动条的设置 当数据量较大时，EasyUI DataGrid 默认会自动显示垂直滚动条。然而，如果需要手动控制其行为或者确保表头固定，可以使用以下配置项[^1]： - 设置 `rownumbers: true` 和 `fitColumns: false` 来启用行号并禁用列宽自适应。 - 使用 `pagination: true` 启用分页功能，从而减少单次加载的数据量。 代码示例如下： ```javascript $("#datagridId").datagrid({ rownumbers: true, fitColumns: false, pagination: true, pageSize: 1000, // 每页显示1000行 pageList: [1000], // 只允许选择每页1000行 }); ``` #### 水平滚动条的设置 对于水平滚动条的支持，则需注意以下几个方面[^2]: - 如果表格中的某些列宽度超出容器范围，水平滚动条将会自然显现。 - 需要确保 `singleSelect: true` 或其他选项不会干扰布局计算。 - 动态调整窗口大小时，可通过监听窗口变化事件重新设定 DataGrid 宽高。 动态调整逻辑可参考如下代码片段： ```javascript $(window).resize(function() { $("#datagridId").datagrid("resize", { height: $(window).height(), width: $(window).width() }); }); ``` #### 组合应用与优化体验 有时用户希望即使翻页后仍保持当前视图状态不变，比如保留滚动条的位置。此时可以在 `onLoadSuccess` 方法里加入额外处理逻辑[^3]^: ```javascript onLoadSuccess: function(data) { var grid = this; setTimeout(function(){ $(grid).datagrid('scrollTo', 0); }, 0); // 进一步操作以防止页面跳动 $(this).datagrid("selectRow", 0); $(this).datagrid("unselectRow", 0); } ``` 上述方法能够有效解决因刷新引起的滚动丢失问题，并提升用户体验的一致性和流畅度。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值