Print Page - Extension method returning just appended menu item?

Title: Extension method returning just appended menu item?
Post by: fsiedi on February 22, 2018, 11:04:12 AM

To avoid using findItem?

To do something like this:

var just_added = ('#mm').menu('appendItem', {
text: 'Open'
});

('#mm').menu('appendItem', {
parent: just_added,
text: 'Invoice'
});

var po = ('#mm').menu('appendItem', {
parent: just_added,
text: 'PO'
});

('#mm').menu('appendItem', {
parent: po,
text: 'DSD'
});

Thanks.

Title: Re: Extension method returning just appended menu item?
Post by: jarry on February 22, 2018, 11:40:48 PM

The 'appendItem' method returns the menu object. Please try this code to create your menu.

Code:

var mm = $('#mm');
mm.append(
	'<div>' +
		'<span>Open</span>' +
		'<div>' +
			'<div>Invoice</div>' +
			'<div>' +
				'<span>PO</span>' +
				'<div>' +
					'<div>DSD</div>' +
				'</div>' +
			'</div>' +
		'</div>' +
	'</div>' 
);
mm.menu();

Title: Re: Extension method returning just appended menu item?
Post by: fsiedi on February 23, 2018, 09:26:07 AM

Building HTML as a string is even more complicated.
My problem is that Titles on menu items are not unique and also in 2 languages.

It looks like this:
DC Invoice
   DUNS: 1
   DUNS: 2
   Templates:
      Templ A
      Templ B
DSD Invoice
   DUNS: 1
   Templates:
      Templ C

And if I search for ‘Templates:’ it finds the first one and it is wrong.
Is there a way to search by something else? Not the title?
May be some unique ID?

Title: Re: Extension method returning just appended menu item?
Post by: jarry on February 25, 2018, 08:40:57 PM

Here is the extended method 'findItemBy'

Code:

<script type="text/javascript">
	(function($){
		function findItem(target, param){
			var result = null;
			var fn = $.isFunction(param) ? param : function(item){
				for(var p in param){
					if (item[p] != param[p]){
						return false;;
					}
				}
				return true;
			}
			function find(menu){
				menu.children('div.menu-item').each(function(){
					var opts = $(this).data('menuitem').options;
					if (fn.call(target, opts) == true){
						result = $(target).menu('getItem', this);
					} else if (this.submenu && !result){
						find(this.submenu);
					}
				});
			}
			find($(target));
			return result;
		}

		$.extend($.fn.menu.methods, {
			findItemBy: function(jq, param){
				return findItem(jq[0], param);
			}
		})
	})(jQuery);
</script>

Usage examples:

Code:

var item = $('#mm').menu('findItemBy',{id:'m1'});  // find by id
var item = $('#mm').menu('findItemBy',{href:'window.html'});  // find by href property
// find by custom logic
var item = $('#mm').menu('findItemBy',function(item){
	var s = $(item.text).text();
	return s == 'M1';
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: fsiedi on February 22, 2018, 11:04:12 AM