easyui datagrid 诡异的无法显示问题

举个应用场景的例子来说明：

在采购单的编辑页面，上方为采购单自身的属性信息，下方使用tabs控件，加入两个tab页，分别为采购明细列表（DataGrid）和审核记录列表（DataGrid），即一个主业务实体携带两个子业务实体的情况，子业务实体中datagrid采用js代码请求后台数据加载并显示。

在采购单编辑页面初始化的时候，使用tabs控件的add方法，设置Content属性为嵌入iframe

 

function AddSubTab(name, url) {
    $("#subTabs").tabs('add', {
        title: name,
        content: '<iframe id="iframe" scrolling="auto" frameborder="0"  src=' + url + ' style="width:100%;height:96%;"></iframe>',
        closable: false,
        selected: true,
        cache: false
    });
}

 

实际情况如下： 第二个tab页正常加载显示，第一个tab页中的datagrid无法显示，其他内容正常，右键选择重新加载则能正常显示 去除其中任何一个tab页，另外一个tab正常显示，颠倒顺序，结果相同，前一个tab页中的datagrid无法显示，监控后台数据，返回正常，JS无报错。

 

从网上搜到的 easyui 中Datagrid 控件在列较多且无数据时，列显示不全的解决方案http://www.cnblogs.com/hxling/p/3919288.html

 onLoadSuccess:function(data){
                if(data.total==0){
                    var dc = $(this).data('datagrid').dc;
                    var header2Row = dc.header2.find('tr.datagrid-header-row');
                    dc.body2.find('table').append(header2Row.clone().css({"visibility":"hidden"}));


                }
            }

 

测试有效，不过仅适用无数据情况下，把表头给显示出来，其原理也是强制显示。

此外，测试了下结构类似的系统主菜单，在快速点击功能导航树，在主区域生成多个tab页，存在datagrid同样存在无法显示的问题（点击速度足够快的情况才发生）。

从现象上看，很像是datagrid控件拿到后台json数据后，进行显示处理时被中断了，很可能是控件自身的一个BUG。

 

easyui的源码混淆过了，从源码上找问题难度太大，有没有清楚问题出在哪？如何解决？

最后，自己摸索出一种既能间接实现目的又简便的方法，即动态添加tab页时，设置select属性为false，这样所有的tab页都为未选中状态，最后添加一行选择函数，选中第一个tab页，这样用户看到的效果就是自动加载了第一个tab内容，正常显示出来。