项目需求:

在easyui的treegrid的子节点因为某列操作栏需要定义的按钮太多,显示起来有点难看,要改为菜单显示.

做这个的时候绕了些弯路,开始的做法是把easyui-menu自动生成的所有元素都添加的formatter里面,使用字符串拼接,这样的话会发现菜单和菜单列表不能联系起来,后面再手写mouseover和mouseout方法,感觉实现起来,菜单列表的显示的定位也有问题,后面总算找到好的解决办法,如下:

​{ field: 'action', title: '操作', width: 100,align:'center',      formatter:function(value,row,index){          var menuId = row.id;          var parent = $("#gcxh").treegrid("getParent", row.uuid);          if(parent){//父节点不加入菜单,子节点的formatter加入菜单               menuId = parent.id;          }           var yyy = 'Edit';           yyy += '
    
     ';           yyy += getMenuStrForActionFun(row);           yyy += "
    
";           yyy += "";           str += yyy;           return str;}/** * 每一个子节点根据节点特定的情况设置不同的菜单项 * @param row */function getMenuStrForActionFun(row){	var str = "";	if(row.processInfoId>0){     	// 编制阶段也可以启用子流程     	if(条件1...) 		{             str += "
    
     审批子流程
    
";//每个菜单项 		}        if(条件2...) 		{             str += "
    
     审批子流程
    
";//每个菜单项 		} 	}	return str;}onExpand:function(row){	var $menu = $('.__zdymenu[uid="'+row.id+'"]');	for(var i = 0;i<$menu.length;i++){		var a = $menu[i];		var uid = $(a).attr("uid");		var menuDiv = $(a).next("div");		var menuDivId = $(menuDiv).attr("id");		$(a).menubutton({			iconCls: 'icon-edit',    			menu: '#'+menuDivId+''   		});	}}​

如图所示:

这么做之后,可能会让表格的行高自适应,即会自动根据edit菜单的高度来设置行高,这样就不是很好看,此时,可可以动态的设置被展开的每个父节点所有的子节点的行高(子节点即菜单所在的行)

function initMenuFun(row){	var $menu = $('.__zdymenu[uid="'+row.id+'"]');	for(var i = 0;i<$menu.length;i++){		var a = $menu[i];		var uid = $(a).attr("uid");		var menuDiv = $(a).next("div");		var menuDivId = $(menuDiv).attr("id");		$(a).menubutton({			menu: '#'+menuDivId+''   		});	}	fixEprjInfoRow(row);}//设置菜单所在行的行高都固定为27pxfunction fixEprjInfoRow(row){	var children = row.children;	for(var j=0;j