Easyui Treegrid Add node (append) takes too long to set the wait (wait) matte effect

Title, in the Treegrid, when multiple nodes are added at once, the time is very long, but the Easyui does not display waiting information, let people think is trapped in a dead loop, or crashed, the user experience is poor.

Originally, Treegrid (or the DataGrid) had so-called loadmsg, but only displayed when the data was loaded. If you add a node, you do not see this mechanism.

Application Scenarios:

A number of nodes were selected from a tree and copied to another tree at once. The period of time is longer, the wait information is displayed first, and after the addition is completed, wait for the message to disappear.

A dialog box for Easyui:

<div id= "Dlg_add_template" class= "Easyui-dialog" style= "width:600px; ">......</div><script type=" Text/javascript "> $ (' #dlg_Add_template '). Dialog (' Open ');</script>

There are 1 tree,1 treegrid on this dialog box. You need to select a node from the tree and copy it to Treegrid.

Function  _loadwaiting () { //display wait information        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 () { //hidden wait info         var  wrap  = $ (  "#dlg_Add_template"  )       wrap.find (  " Div.datagrid-mask-msg " ). Remove ();    &nbsP;  wrap.find (  "Div.datagrid-mask"  ). Remove ();   } 

• The above code is extracted from the reference article but rewritten. The original is the so-called extension to Easyui, and still only supports data loading to display.

Then call:

function _copyto () {_loadwaiting ();//Display wait information//Copy selected node to target tree (code slightly) _removeloading ();//Hide wait information }

• As expected, when the node is started to replicate, wait for the information is not displayed at all, until the completion of the copy is a flash, and did not achieve the desired effect!

The asynchronous mechanism should be introduced at this point, preferably with a callback function!

But Treegrid did not provide the corresponding event. Inspired by Nanyi's article, you can simulate it with settimeout:

function copy () {_loadwaiting ();//Display wait Information setTimeout (_copyto,500); Start copy work after//500 milliseconds}} function _copyto ( ) {//Copy the selected node to the target tree (code slightly) _removeloading ();//Hide Wait Information}

Easyui Treegrid Add node (append) takes too long to set the wait (wait) matte effect