EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: kayjay on December 14, 2015, 03:45:09 AM

Title: Tree Render
Post by: kayjay on December 14, 2015, 03:45:09 AM

I use an EasyUI tree. It can take a while to get the data from the backed so I put up a progress box until I get the success event. After that event it can then take quite a long time to actually render the tree. During this time users think the page is broken. I'd like to keep the progress box up until the render is complete. Is there any way to do this?

Thanks

Title: Re: Tree Render
Post by: jarry on December 14, 2015, 04:45:10 AM

How do you use the progressbox? Please show some code snippets to describe your question.

Title: Re: Tree Render
Post by: kayjay on December 14, 2015, 04:55:18 AM

This snipping shows what I do. The progress box stay up until onLoadSuccess fires but it can be another 30~40 sec later before the render is complete.

$.messager.progress({title:'Please Wait',msg:'Getting Data...'});
$('#tt').tree({url:'tree_data1.php',lines:true,onLoadSuccess:function(node, data){
$.messager.progress('close')}});
}

Title: Re: Tree Render
Post by: jarry on December 14, 2015, 08:22:48 AM

Please try this:

Code:

$.messager.progress({title:'Please Wait',msg:'Getting Data...'});
$('#tt').tree({
	url:'tree_data1.php',
	lines:true,
	onLoadSuccess:function(node, data){
	  setTimeout(function(){
		  $.messager.progress('close');
	  },0);
	}
});

Title: Re: Tree Render
Post by: kayjay on December 14, 2015, 09:14:13 AM

I see your thinking.

I can set the time-out to remove the progress box for any given data set size but this size is not constant, so when the data size is small the progress box spins for some time after render is complete. I guess what is needed is some form of 'OnRenderComplete' event.

Title: Re: Tree Render
Post by: kayjay on December 14, 2015, 09:36:45 AM

Very strange - this only happens with FireFox. In Chrome and IE when onLoadSuccess fires the render is complete.