easyui的treegrid的子节点的formatter放入menubutton菜单按钮

2019独角兽企业重金招聘Python工程师标准>>>

项目需求:

在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 = '<a uid="'+menuId+'" href="javascript:void(0)" class="__zdymenu" >Edit</a>';
           yyy += '<div id="__zdymenu'+row.id+'" style="width:150px;">';
           yyy += getMenuStrForActionFun(row);
           yyy += "</div>";
           yyy += "</div>";
           str += yyy;
           return str;
}

/**
 * 每一个子节点根据节点特定的情况设置不同的菜单项
 * @param row
 */
function getMenuStrForActionFun(row){
	var str = "";
	if(row.processInfoId>0){
     	// 编制阶段也可以启用子流程
     	if(条件1...)
 		{
             str += "<div onclick='' data-options=\"iconCls:'icon1'\">审批子流程</div>";//每个菜单项
 		}
        if(条件2...)
 		{
             str += "<div onclick='' data-options=\"iconCls:'icon1'\">审批子流程</div>";//每个菜单项
 		}
 	}
	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);
}

//设置菜单所在行的行高都固定为27px
function fixEprjInfoRow(row){
	var children = row.children;
	for(var j=0;j<children.length;j++){
		$("tr[node-id='"+children[j].uuid+"']").height('27px');
	}
}

//在treegrid中的onLoadSuccess和onExpand事件中都要定义,防止菜单变形或者表格变形
$('#gcxh').treegrid({
  onLoadSuccess:function(row, data){
     if(selectRow){
         zdySelectRow = $('#gcxh').treegrid('getRowData',selectRow.uuid);
         var parent = $('#gcxh').treegrid('getParent',selectRow.uuid);
         if(parent){
            	initMenuFun(parent);
         }else{
            	initMenuFun(zdySelectRow);
         }
     }
  }

  //在treegrid的展开事件中定义:
  onExpand:function(row){
	 initMenuFun(row);
  }
})

 

转载于:https://my.oschina.net/u/2331760/blog/1612028