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

easyUI的treegrid添加节点（append）时间过长，设置等待（wait）遮罩效果

标签：

原文地址：http://my.oschina.net/u/2331760/blog/486993