js 控制 easyui datagrid 隐藏之后显示不来的问题

最近有的用到easyui的datagrid,有一个这样的需求,就是当触发一个事件之后控制datagrid的显示与隐藏,初始状态是将其datagrid隐藏起来。

说起隐藏datagrid的时候,也遇到了一些问题,关于easyui的datagrid是不可以直接用display这个属性的,那若是想要隐藏这个table,那么就要在它的外面写一个父级div,然后通过控制这个div的隐藏与显示去满足这个需求。

<div class="divEditTabKc" style="display: none">
      <table id="editTabKc" class="easyui-datagrid" border="1" style="height: 180px;width:100%"></table>
</div>

这个隐藏是满足了,但是当直接用js控制外面divEditTabKc的show和hide时,就出现了当想要其显示时,table却没有显示,我查看了一下代码,这个时候table的宽只有3像素,那么自然解决的方法就有了,注意在显示时调用再调用一次resize就可以显示出来,如下:

 $("#editTabKc").datagrid("resize");

这样便实现了table的显示与隐藏。如果小伙伴也遇到了同样的情况可以试试这个方法!

原文地址:https://www.cnblogs.com/web001/p/10243894.html

时间: 2024-08-28 22:31:08

js 控制 easyui datagrid 隐藏之后显示不来的问题的相关文章

用js控制选项卡的隐藏与显示

通过使用ul和div来,借助于jquery来实现选项卡的显示与隐藏 <form action="" method="post"> <div> <ul> <li><a id="atab1" class="atab">基基基基</a></li> <li><a id="atab2" class="ata

js 控制 head 元素 隐藏与显示

就把那段script加到head之间.<script type="text/javascript">if(screen.width<=1240){document.write("<link rel='stylesheet' type='text/css' href='css/index_1240.css' />");}</script> DOM中document对象的write方法,将一段HTML代码或是一段文本内容输出到文

jquery和js对div的隐藏和显示

jQuery对div的显示和隐藏: 显示: $("#id").show() 隐藏: $("#id").hide() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";//隐藏

jquery控制元素的隐藏和显示的几种方法。

组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#id").hide()表示为display:none; 2.$("#id").toggle()切换元素的可见状态.如果元素是可见的,切换为隐藏的:如果元素是隐藏的,则切换为可见的. 3.$("#id").css('display','none');//隐藏 $(

Js - 判断元素是否隐藏、显示

判断元素是否隐藏.显示的方法,需要的朋友可以参考下 : 1.通过判断元素display属性状态值来实现 console.log($('div').css("display"));       // inlineif($('div').css("display") != 'none') { console.log('aaaaa');       // aaaaa $('div').hide();         console.log($('div').css(&qu

js/jquery设置元素隐藏和显示

//js 元素隐藏 document.getElementById('li11').style.display = 'none'; //js 元素显示 document.getElementById('li11').style.display = 'block'; //jquery元素隐藏 $('#li11').hide(); //jquery元素显示 $('#li11').show(); //还有一种方法,在css中设置 .hide{ display: none; } 然后通过js $('#l

EasyUI Datagrid 鼠标悬停显示单元格内容

第一种方式: 1.js 定义函数 <script type="text/javascript"> //格式化单元格提示信息 function formatCellTooltip(value){ return "<span title='" + value + "'>" + value + "</span>"; } </script> 2.调用函数 <th data-opti

jquery easyui datagrid/table 右边线显示不全

<table id="dg" style="height:400px"></table> 右边线显示不全 解决:在外面套一个panel,边框隐藏:border:hidden <div class="easyui-panel" style="margin-top: 5px; height: 100%;border:hidden"> <table id="dg" sty

JS 控制wap页面viewport正常显示

首先你要设置meta viewport属性. <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, user-scalable=yes"> 然后再JS代码中设置如下代码: var viewport = document.querySelector("meta[name=viewport]"); var winWidths=$(w