How does easyui's treegrid dynamically hide or display the menu

Because there are too many treegrid right-click menus in easyui in the project, when using disable, you may not see the complete menu. After considering optimization, there are two ways to implement:

Since the menu is dynamically generated in JS, it is not easy to use the appendItem and removeItem methods of easyui's menu, so considering these factors, the first implementation method is:

1. After the menu item is displayed, dynamically hide the disabled menu item (disadvantage: after the menu is displayed, when the disabled menu item is hidden, there will be a hidden animation process on the page)

The menu of easyui's treegrid tree:

$('#xmzj').treegrid({
    ....
    rowContextMenu: createMenu(),
    //第一种菜单实现方式:在treegrid的菜单事件中去处理,要注意的是:要延迟处理,等菜单被初始化之后,再去隐藏禁用的菜单项
    onContextMenu: function(e, row){
        setTimeout(function(){
           getContentMenuFun($("#jgxxLayout"));
        },1);
    },
})

//绑定treegrid所在的layout在表格没有一条数据的时候也要有菜单项,所以这里绑定了treegrid的layout的菜单事件
$("#xmzjdatagrid").bind("contextmenu", function (e) {
     e.preventDefault();
     $.easyui.showMenu({
          left: e.pageX, top: e.pageY,
          items: createMenu(),
     });
     e.preventDefault();  //阻止浏览器自带的右键菜单弹出   
     //第一种菜单实现方式
     setTimeout(function(){
         getContentMenuFun($("#jgxxLayout"));
     },1);
});


function createMenu(){
   var menuObj = [
      {
        ....每个菜单项
      }
   ];
   return menuObj;
}

Method to realize:

/**
 * 隐藏被禁用的菜单
 * @param jq
 */
function getContentMenuFun(jq){
	var menuDom = jq.parent().find(".menu-top.menu:visible");
	var $item = menuDom.children(".menu-item-disabled");
	var $sep = menuDom.find('.menu-sep');
	if($item.length >0 ){
		$item.hide();
		menuDom.height(menuDom.height() - $item.length*22);
		menuDom.next().remove();
	}
	if($sep.length >0){
		for(var i = $sep.length-1;i>=0;i--){
			var $current = $($sep[i]);
			removeTogetherMenuSepFun($current,menuDom);
		}
	}
}


/**
 * 移除多余的菜单分隔符
 * @param current
 * @param menuDom
 * @param falg 用来标记两个分割线之间有没有正常可见的菜单项
 */
function removeTogetherMenuSepFun($current,menuDom){
	var $prevAll = $current.prevAll();
	if($prevAll){
		var flag = false;//假设该分割线是要隐藏的
		for(var i = 0;i<$prevAll.length;i++){
			var prevDom = $prevAll[i];
			if($(prevDom).hasClass("menu-sep")){
				break;
			}
			if($(prevDom).is(':visible')){
				flag = true;
			}
		}
		if(!flag){
			$current.hide();
		}
	}
}

optimization:

The second implementation method (advantage: the new menu has been completed before the menu is displayed, and the right-click menu is completely normal when displayed, without animation effect ):

How to write treegrid:

$('#xmzj').treegrid({
    ....
    rowContextMenu: createMenu(),
    //第二种菜单实现方式,可以在onSelect事件中处理,也可以在onContextMenu事件中处理,onSelect在菜单显示之前就会调用
    onSelect:function(rowData){
       hidenOrShowMenuFun($('#xmzj'),true,rowData); 
   }
})


$("#xmzjdatagrid").bind("contextmenu", function (e) {
     e.preventDefault();
     $.easyui.showMenu({
          left: e.pageX, top: e.pageY,
          items: createMenu(),
     });
     //layout的右键菜单每次都会调用createMenu()方法,所以layout的右键菜单的第二种的实现方式在createMenu()中处理
     //easyui的treegrid的右键菜单只初始化一次
});


function createMenu(flag){
   var menuObj = [
      {
        ....每个菜单项
      }
   ];
   //第二种菜单的实现方式(如果flag为true,表示我们主动调用的,如果是easyui的treegrid自动调用或者layout的右键菜单调
   用,则flag为undefiend)
   if(!falg){
		try { 
            //easyui的treegrid主动调用的时候,此时treegrid还没有初始化,所以这段代码会报错,这里使用try catch捕
            获,如果是layout的右键菜单调用,则不会报错
			var selectRow = $('#xmzj').treegrid('getSelected');
			newMenu = hiddenRightMenu(menuObj,null);//在treegrid的范围之外右键菜单,此时菜单的disable函数中的row参数为null,所以这里传入null
			return newMenu;
		} catch (e) {
			return menuObj;
		}
	}
   return menuObj;
}

Ideas: Change the properties of the menu items of easyui's treegrid

//过滤menuObj被禁用的每个菜单项,组成新的数组赋值给treegrid的rowContextMenu对象
function hidenOrShowMenuFun(easyuiDom,isTree,row,$dom){
	var menuObj = createMenu(true);
	var newMenu = hiddenRightMenu(menuObj,row);
	easyuiDom.treegrid('options').rowContextMenu = newMenu;
	if($dom && $dom.length > 0){
		newMenu = hiddenRightMenu($dom.menu("options").items);
		$dom.menu("options").items = newMenu;
	}
}

//隐藏禁用的菜单项
function hiddenRightMenu(oldMenu,row){
	if(oldMenu){
		for(var i = oldMenu.length-1;i >= 0;i--){
			if(oldMenu[i].disabled && $.isFunction(oldMenu[i].disabled)){
				var disable = oldMenu[i].disabled(null,row);
				if(disable){
					oldMenu.splice(i, 1);
				}
			}
		}
	}
	return oldMenu;
}

As shown in the figure: The dynamically generated menu is as follows: