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

Posted 2021-02-02 麦兜家园

最近有的用到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的显示与隐藏。如果小伙伴也遇到了同样的情况可以试试这个方法！