easyUI的datagrid在display:none下,加载数据或表头不显示问题

1、页面有三个选项卡,datagrid在第三个选项卡中,初始化时,第三个选项卡display:none ,加载数据或表头时,datagrid数据或表头不显示。

2、如果初始化时,第三个选项卡不设置隐藏(display:block或display:‘ ’),则datagrid数据正常显示,解决方法为:

3、在js中,显示当前div的时候,执行这条代码$("#tableid").datagrid("resize");

原因:把tab设成display none,tab里面的其他标签也就变成display none了,不是数据不显示,而是隐藏了。


如下为代码示例片段:动态加载table表头。

</pre><pre code_snippet_id="1555677" snippet_file_name="blog_20160113_2_1670216" name="code" class="html" style="color: rgb(51, 51, 51);"><div class="zjcc_center" id="zjcc_center_history" style="display:none">
<table id = 'transactionLog' class="easyui-datagrid" title="柜员交易记录表" style="position:absolute;width:1200%; height:500%;"
data-options="rownumbers:true,singleSelect:false,method:'get',toolbar:'#tb',autoRowHeight:false">
</table></div>


 
 
	function getColumns(){
		var columns = [[{field:'ck',checkbox:true},
				 {field:'tellerName',title:'柜员姓名',width:150,align:'center'},
				 {field:'time',title:'时间',width:150,align:'center'},
				 {field:'operate',title:'操作',width:150,align:'center'},
				 {field:'ip',title:'登录IP',width:150,align:'center'}
				 //{field:'remark',title:'备注',width:150}
				 ]];
		return columns;
	}
var Columns = getColumns();
$("#"+datagridDiv).datagrid({columns:Columns});
$("#"+datagridDiv).datagrid("resize");






你可能感兴趣的:(easyui,displaynone,datagrid数据不显示)