easyUI-datagrid属性设置display：none，加载数据或表头不显示

来源：互联网发布：国产耳机品牌排行知乎编辑：程序博客网时间：2024/05/05 12:04

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

2、如果初始化时，第三个选项卡不设置隐藏（display：block或display：‘ ’），则datagrid数据正常显示，解决方法为：在js中，显示当前div的时候，执行这条代码$("#tableid").datagrid("resize");

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

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

<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");

3 0