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內容，正常顯示出來。