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