easyui-datagrid父盒子display:none;再现时高度失效

最新推荐文章于 2022-05-11 08:00:00 发布

原创最新推荐文章于 2022-05-11 08:00:00 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #前端 #框架 #display:none;

前端同时被 3 个专栏收录

11 篇文章

订阅专栏

easyui

3 篇文章

订阅专栏

datagrid

3 篇文章

订阅专栏

在使用easyui的datagrid时，如果其父级元素设置为`display:none;`，在重新显示时可能会导致表格高度失效，内容区域高度变为0。解决办法是在切换到datagrid时调用resize方法，以恢复表格的正常显示。此外，为防止类似问题，可以在外层包裹一个div。

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

easyui-datagrid父盒子display:none;再现时高度失效

问题
项目用的easyui。在tab选项卡里包含了表格分页，发现默认显示没问题，但切换后表格只剩下工具栏。
f12查看，内容高度变为了0，
高度失效

解决方法：
切换到数据表格时，resize

$("#table").datagrid('getPanel') // table是数据表格的id
	.panel('options')
	.onResize(window.innerWidth, window.innerHeight);

就出来了：
已解决
ps. 一般因为display:none;导致高度失效可尝试在外层套一个div。

参考链接

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HooRayK

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

easyui datagrid设置fit: true后，高度不自动调整，且分页栏显示不全

wxfei19840610的博客

09-24

2104

easyui datagrid设置fit: true后，高度没有自动调整解决方法：用js调整，并做到页面缩放时，datagrid根据页面大小自动调整大小 function initGridHeight(obj) { if (obj != null) { $(window).on("resize", function () { try { var win_h = $(window).height();

easyui 改变下拉框高度

别在熬夜了！

07-28

6391

属性名属性值类型描述默认值 width number 组件的宽度。 auto height number 组件的高度。（该属性自1.3.2版开始可用） 22 panelWidth number 下拉面板宽度。 null panelHeight number 下拉面板高度。 200 panelMinWidth n

参与评论您还未登录，请先登录后发表或查看评论

easyui datagrid height width =0的问题

weixin_30555125的博客

08-08

1398

对于一个页面中应用了datagrid的table控件来说,如在页面打开时为隐藏,在页面的应用中再动态显示,这样,显示出来的table数据则会隐藏不可见,table的标题,工具栏,分页栏则会压缩在一起,而需要显示的数据却未能正常显示出来. 也就是宽度或高度为0；解决办法是： 1、div加easyui-panel,必须是隐藏的外层div也就是说div只能有一个class属性，如果不...

easyui datagrid BUG:刷新之后高度出不来

RSRLike1j的博客

09-09

935

问题描述：easyUI的datagrid 放在dialog中，第一次可以加载出来列表，但是当dialog close之后再open，datagrid数据加载了，但是没有高度，所以就看不到数据在度娘上查找了很多资料，都是说通过调用datagrid的"resize",$("#myGrid").datagrid("resize",600);然而我这样修改了之后发现并米有什么用经过一番对自己代码的审查...

EasyUI 在aspx页面显示高度不正常解决办法

weixin_34150830的博客

10-27

150

<body class="easyui-layout"> <form id="form1" runat="server"> <table id="dg" class="easyui-datagrid"> </table> &lt

2022最新Web方面相关面试题解析（已拿Offer）

m0_68850571的博客

05-11

580

WEB方面面试题详解

qq_44399112的博客

03-22

779

WEB 应用中如果有.class 和.jar 类型的文件一般分别应该放在什么位置？答: .class 文件放在 WEB-INF/classes 文件下，.jar 文件放在 WEB-INF/lib 文件夹下元素中有一个输入框(<input type=”text” name=” username”id=”username”value=””/>,请用 JavaScript 语言写一...

datagrid表格宽高为0的解决办法小记

weixin_30721077的博客

11-12

878

datagrid的所有元素大小都为0 原因是：datagrid会适应父元素的大小，父元素是不可见时，大小都为0，比如tab时解决办法：$("#freeGrid").datagrid("resize"); 转载于:https://www.cnblogs.com/lqxmayi/p/9944952.html...

easyUI-datagrid属性设置display：none，表头不显示

weixin_30681121的博客

05-16

285

<div class="box1"> <div class="dg1Box" style="margin-top:15px; margin-left:25px;"> <table id="dg1" style="width:575px;"></table> </div> ...

tab+easyui datagrid无法正常显示

zhao277949522的博客

11-08

3494

在tab中放置一个datagrid，无法正常显示，查看结构，datagrid的所有元素大小都为0; 原因，datagrid会适应父元素的大小，在tab页显示前，父元素是不可见的，大小为0,0，所以datagrid下的所有元素大小也为0,0，导致不可见。在显示tab页时$("#gridApplyBusiness").datagrid(“resize”);即可正常显示 ...

Jquery EasyUI Datagrid 的高度问题

weixin_30877181的博客

03-04

262

Datagrid的属性 fit:true 这个属性设置，是全屏平铺，指的是外围parent有panel限制的情况。比如在layout或者panel里放个datagrid，设置后表格占据整个layout 问题：但是当外围没有layout或者panel的时候设置fit属性后，高度会在js中自动产生，导致高度固定94px 解决：只要将fit属性取消，即可。转载于:https:...

关于easyui布局高度百分比失效解决办法，有时列表不展开

lijunjie818的博客

05-21

819

百分比只有在上一层确定高度的情况下才能计算使用，例如我的页面布局上下表格布局中两个高度用百分比，那么layout必须有定高，我们可以通过js获取高度给它 //设置列表布局的外层高度 $("#winHeight").height($(window).height()); ...

EasyUI 可调整尺寸问题已解决

CSDN李文龙的博客

01-07

2647

用EasyUI实现的一个页面，想把页面的下半部分设成高度可调整，但始终实现不了，将div设成resizable对象还是不行，最后将div中的split属性值改为true，问题解决。现将相关EasyUI知识总结如下：一、EasyUI布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边

easyui的datagrid隐藏后，再显示，内容不显示

qunwuhui的博客

06-05

607

场景描述：一个页面显示多个表格，然后点击页面按钮切换不同的表格；实现上：老平台采用easyui的datagrid实现，直接加载全部表格，首次将不展示的表格隐藏（hide()）起来，之后切换按钮再显示（show()）; 问题描述：切换后，之前隐藏的表格不显示。解决方式：F12查看像素，table加载出来，但是宽高不对，所以显示的时候，将datagrid手动触发加载； $("#editTabKc").datagrid("resize"); 参考链接：https://www.cn...

jquery easyui Accordion的使用

09-05

2674

<!-- accordion的属性 width：可伸缩面板所在容器的宽度 height：可伸缩面板所在容器的高度 fit：铺满整个屏幕 border：为false时不显示边框，相反则显示，默认是true

【小5聊】echarts基础之从曲线图切换到饼状图显示时高宽度为0导致无法显示解决方法

小5聊的博客

12-10

708

1、通过display:none和block之间切换显示曲线图和饼状图出现高度为0的情况，如下 2、原因 1）A对象默认是display:block，B对象是display:none 由于A和B都进行了初始化 echarts.init(document.getElementById("A")); echarts.init(document.getElementById("A")); ...

当display=none时，元素和子元素高度为0的解决办法

weixin_30485799的博客

08-28

316

在前端中为了某种需要，我们需要获取display=none的元素或者子元素的实际高度来进行某些处理，然而html对display=none的元素和子元素是不进行渲染的，如果我们没有规定这些元素的高度那么它们的高度都会是0，就算元素中有文字或者其它内容。解决办法：通过jquery的show方法先展示出来，再在回调函数中获取它们的高度并操作即可，代码如下：$(".box").show(0...

Easyui Datagrid 刷新后显示高度不正常的问题

weixin_33973609的博客

03-08

1122

Easyui Datagrid 刷新后显示高度不正常的问题版本：jQuery EasyUI 1.4.4 问题现象：当Datagrid 不是在当前激活(当前打开)的标签页时刷新数据或加载后显示的高度不正常，标题栏分页栏缩在一起，导致数据区域不能显示出来问题原因：当Datagrid存在于display:none 的元素内时进行构建或刷新数据后会出现导致结构内 datagrid-v...

easyUI-datagrid导出功能实现：服务与控制器示例

在Java开发中,实现easyUI-datagrid数据表格的导出功能通常涉及到前端界面展示、后端业务逻辑处理以及数据模型的管理。本文档的核心内容是关于一个名为"/exporterExcel"的HTTP请求处理器，它负责将datagrid中的数据...