datagrid放在隐藏层不显示数据的问题

<div id="userDiv" style="display:none;">
     <table id="detailUser" class="easyui-datagrid" style="width: 100%;">
	 <thead data-options="frozen:true,">
	        <tr>
		<th width="15%" data-options="align:'center',field:'userName'">用户名</th>
		<th width="35%"	data-options="align:'center',field:'roleNames',formatter: renderRole">所属角色</th>
		<th width="10%" data-options="align:'center',field:'deptName',">部门</th>
		<th width="15%"	data-options="align:'center',field:'profession'">专业</th>
		<th width="10%" data-options="align:'center',field:'city',">地市</th>
		<th width="10%" data-options="align:'center',field:'district'">区县</th>
	        </tr>
         </thead>
     </table>
</div>

把datagrid放在隐藏层中，动作触发的时候让这个隐藏层show，但是并没有显示出数据，firebugs显示后台传递过来一条数据，只是datagrid没有加载出来

$("#detailUser").datagrid({
		url:"${basePath}grid/userList?role=ROLE_USER&gridId="+id,
		nowrap:false,
		rownumbers:true,
		fit:true,
		idField:'id',
		singleSelect:true,
		pagination:true,
		method:'post',
		loadMsg:'加载中...',
		emptyMsg:'暂无数据',
});
$('#userDiv').show();		
$('#gridDetail').window('open');

上图主要是因为fit:true这个属性与隐藏层的冲突。如果把fit:true去掉。则显示为下图，比上图稍微好些，只是数据还是没有显示出来

然后就百度了一下，有些说是应该把datagrid重新resize一下，

$("#detailUser").datagrid({
			url:"${basePath}grid/userList?role=ROLE_USER&gridId="+id,
			nowrap:false,
			rownumbers:true,
			idField:'id',
			singleSelect:true,
			pagination:true,
			loadMsg:'加载中...',
			emptyMsg:'暂无数据',
});
$("#detailUser").datagrid("resize");
$('#resourceDiv').hide();
$('#userDiv').show();		

可是我按照上边代码试了一下依然没有效果，原理的东西我探究不到，最后是给datagrid加了高度，才正常显示出数据

$("#detailUser").datagrid({
			url:"${basePath}grid/userList?role=ROLE_USER&gridId="+id,
			nowrap:false,
			rownumbers:true,
			height:540,
			idField:'id',
			singleSelect:true,
			pagination:true,
			loadMsg:'加载中...',
			emptyMsg:'暂无数据',
});
$('#resourceDiv').hide();
$('#userDiv').show();		

后来再次遇到在隐藏层中不显示数据的问题，然后我设置了高度，但是却怎么也显示不出来数据，于是又用了resize方法发现不是resize方法不管用，而是之前的放错位置了

图1

在不给datagrid设置高度的情况下，显示出来的如上图1，

$("#dg").datagrid("resize");
$('#task').show();

如上代码，显示效果依然如图1

但是如果将以上代码调换位置，即可正常显示

$('#task').show();
$("#dg").datagrid("resize");

图2
图3

并且利用resize可以根据数据显示的多少来调整高度，这样显示更灵活。如图2和图3所示

图4

图4为利用resize方法并且，给datagrid设置了固定高度之后的效果