Load message for tree.

[iceh]

Hi,

how can I use a loadmessage for the tree?

I do some processing with AJAX and assign the data
via tree.tree({ data: data });

In the meantime it'd like to show a simple animation like
the datagrid loading message

[iceh]

Any hint on this?

I tried adding a dummy node, but this won't do the job 100%

[stworthy]

Please try to extend a new method to display a mask message on a panel.

Code:

$.extend($.fn.panel.methods, {
	showMask: function(jq, msg){
		return jq.each(function(){
			var pal = $(this).panel('panel');
			if (pal.css('position').toLowerCase() != 'absolute'){
				pal.css('position','relative');
			}
			var borderSize = parseInt(pal.css('padding'))+1;
			var m = pal.children('div.panel-mask');
			if (!m.length){
				m = $('<div class="panel-mask"></div>').appendTo(pal);
			}
			m.css({
				position:'absolute',
				background:'#fff',
				opacity:0.6,
				filter:'alpha(opacity=60)',
				left:borderSize,
				top:(borderSize+pal.children('.panel-header')._outerHeight()),
				right:borderSize,
				bottom:borderSize
			});
			m.children('div.panel-mask-msg').remove();
			var mm = $('<div class="panel-mask-msg"></div>').appendTo(m);
			mm.html(msg).css({position:'absolute'}).css({
				position:'absolute',
				top: '50%',
				left: '50%',
				marginTop: -mm._outerHeight()/2,
				marginLeft: -mm._outerWidth()/2
			})
		});
	},
	hideMask: function(jq){
		return jq.each(function(){
			$(this).panel('panel').children('div.panel-mask').remove();
		})
	}
});

And then put the tree to a panel.

Code:

<div id="pp" class="easyui-panel">
  <ul class="easyui-tree" ...>
</div>

When loading the tree data, call 'showMask' method to display a waiting message.

Code:

$('#pp').panel('showMask', 'Loading, please waiting...');

[iceh]

That's nice!

That will solve other problems, too