easyui的treegrid如何动态隐藏或者显示菜单

因为项目中的easyui的treegrid右键菜单太多,使用disable的时候,可能看不到完整的菜单,后面考虑了一下优化,有两种实现方式:

由于菜单是在JS中动态生成的,所以不好利用easyui的menu的appendItem和removeItem方法,所以考虑到这些因素,第一种实现方式为:

1.在显示了菜单项之后,再动态的去隐藏disable的菜单项(缺点:菜单显示出来之后,在隐藏禁用的菜单项,页面上看上去会有一个隐藏的动画过程)

easyui的treegrid树的菜单:

$('#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;
}

实现方式:

/**
 * 隐藏被禁用的菜单
 * @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();
		}
	}
}

优化:

第二种实现方式(优点:在菜单显示之前就已经完成新的菜单,右键菜单显示的时候完全正常,没有动画效果):

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;
}

思路:改变easyui的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;
}

如图:动态生成的菜单如下:

easyui的treegrid如何动态隐藏或者显示菜单

猜你喜欢