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

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

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

只能本身動手，豐衣足食了。

像不少次尋找答案同樣，在網上搜索了許久，基本上都是一些互相抄襲，似是而非，不知所謂的垃圾。做者煞有介事地這樣說，但有沒有實際應用過，到底行不行，很讓人懷疑。

或者只貼一點代碼，缺少足夠的解釋，讓人變成丈二金剛。

通過一番努力，終於達到我本身想要的效果：

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

沒有代碼我說個J8：

應用場景：

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();//隱藏等待信息
}

參考文章：

http://www.cnblogs.com/dreamcat/archive/2010/10/30/easyui_datagrid_mask.html

http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html