easyUI的treegrid添加節點（append）時間過長，設置等待（wait）遮罩效果

如題所述，在treegrid中，一次添加多個節點時，時間很長，但easyUI並沒有顯示等待信息，讓人覺得是陷入了死循環，或者死機了，用戶體驗不好。

原本，treegrid（或者datagrid）有所謂的loadMsg，但只在加載數據時顯示。添加節點，則不見有這種機制。

應用場景：

從一棵樹中選中了許多節點，一次性複製到另外一棵樹。期間耗時比較長，會先顯示等待信息；添加完成之後，等待消息消失。

easyUI的一個對話框：

<div id="dlg_Add_template" class="easyui-dialog"   style=" width:600px; ">……</div>
<script type="text/javascript">
    $('#dlg_Add_template').dialog('open');
</script>

這個對話框上有1個tree，1個treegrid。須要從tree上選擇節點，複製到treegrid。

function  _loadwaiting(){ //顯示等待信息   
    var  wrap = $( "#dlg_Add_template" );  
    $( "<div class=\"datagrid-mask\"></div>" ).css({display: "block",width:wrap.width(),height:wrap.height()}).appendTo(wrap);  
    $( "<div class=\"datagrid-mask-msg\"></div>" ).html( "please wait...").appendTo(wrap).css({display: "block" ,left:(wrap.width()-$( "div.datagrid-mask-msg" ,wrap).outerWidth())/2,top:(wrap.height()-$( "div.datagrid-mask-msg",wrap).outerHeight())/2});  
}  
function  _removeloading(){ //隱藏等待信息   
     var  wrap = $( "#dlg_Add_template" );  
    wrap.find( "div.datagrid-mask-msg" ).remove();  
    wrap.find( "div.datagrid-mask" ).remove();  
}

• 以上代碼從參考文章摘取，但通過改寫。原文是對easyUI的所謂擴展，仍然只支持數據加載才顯示。

而後調用：

function  _copyTo() {  
    _loadwaiting(); //顯示等待信息   
  
     //將選中節點複製到目標樹   
    (代碼略)  
  
    _removeloading(); //隱藏等待信息   
}

• 結果意料之中，開始複製節點時，等待信息根本沒來得及顯示，直到複製完成才一閃而過，根本沒有達到應有的效果！

這時應引入異步機制，最好有回調函數！

但treegrid並沒有提供相應的事件。受阮一峯的文章啓發，能夠模擬一下，用setTimeout：

function  copy(){  
    _loadwaiting(); //顯示等待信息   
  
    setTimeout(_copyTo,500); //500毫秒後開始複製工做   
}  
}  
function  _copyTo() {  
     //將選中節點複製到目標樹   
    (代碼略)  
  
    _removeloading(); //隱藏等待信息   
}