easyUI的鼠标右键展示菜单（treegrid和datagrid）

这里给大家介绍treegrid和datagrid中的两种右键菜单展示方式：

1：treegrid:

<script type="text/javascript">
function show(){
tip.show();
tip.autoHide();
}
   
$(document).ready(function(){
var JSON = '<%=request.getAttribute("json") %>';
$('#easyuigrid').treegrid({
title:'我的项目列表', 
//iconCls:'icon-ok',
width:etc.getFrameWidth(),
height:etc.getFrameHeight()-65,
loadMsg :'数据正在加载中,请稍候...',//加载数据时，显示的的提示信息
//nowrap: false,
//rownumbers: true,
animate:true,
rowStyler:function(row){
if (row.percentageComplete == 100){
return 'background:#AAD684;color:#fff';
}
},
url:'ProjectAction!searchMyProject.do?typeId=1',
idField:'spId',//数据表格要有主键
treeField:'projectName',//treegrid 树形结构主键 text
fitColumns:true ,
columns:[[
{field:'projectName',title:'项目名称/细项名称/文档名称',width :etc.fixWidth(0.3),sortable:true,resizable:true,
formatter:function(value , record , index){
  if(value==null){
  return "";
  }else{
  return '<span title='+value+'>'+value+'</span>';
  }
} 
} ,
{field:'recordMan',title:'记录人',width :etc.fixWidth(0.1),sortable:true,resizable:true} ,
{field:'responsibleMan',title:'负责人',width :etc.fixWidth(0.1),sortable:true,resizable:true} ,
{field:'planStartTime',title:'计划开始时间',width:etc.fixWidth(0.19),sortable:true,resizable:true}, 
{field:'planEndTime',title:'计划完成时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'actualStartTime',title:'实际开始时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'actualEndTime',title:'实际完成时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'remark',title:'备注',width:etc.fixWidth(0.3),sortable:true,resizable:true,
formatter:function(value , record , index){
  if(value==null){
  return "";
  }else{
  return '<span title='+value+'>'+value+'</span>';
  }
} 
},
{field:'percentageComplete',title:'完成率',width:etc.fixWidth(0.25),sortable:true,resizable:true,rowspan:2,
formatter:function(value){
    if (value){
    var s = '<div style="width:100%;background:#fff;border:1px solid #ccc">' +
    '<div style="width:' + value + '%;background:red">' + value + '%' + '</div>'
    '</div>';
    return s;
    } else {
    return '';
    }
    }
},
{field:'type',title:'文件类型',width:etc.fixWidth(0.19),sortable:true,resizable:true,
  formatter:function(value,row,index){
            if(value==1){
            return '<span style=color:red; >电子文档</span>' ;
               }else if(value==2){
                return '<span style=color:green; >纸质文档</span>' ;
               }
            }
},
{field:'storagePlace',title:'存放位置',width:etc.fixWidth(0.19),sortable:true,resizable:true,
formatter:function(value , record , index){
          if(value==null){
          return "";
          }else{
          return '<span title='+value+'>'+value+'</span>'; 
          }
} 
},
{field:'uploadTime',title:'上传时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'spId',title:'下载',width:etc.fixWidth(0.19),sortable:true,resizable:true,
formatter:function(value,row,index){
         if(row.type==1){
         return '<a href="<%=path%>/ProjectAction!download.do?id='+value+'" >下载</a>'; 
         }else if(row.type==2){
         return "";
         }
         }  
},
]],
onContextMenu: function(e,row){ //这个就是树形菜单加载鼠标右键菜单的代码
e.preventDefault();//屏蔽浏览器的菜单
$(this).treegrid('unselectAll');//清除所有选中项
$(this).treegrid('select', row.spId);//选中状态 
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
},
data: typeof JSON =="string"?eval('('+JSON+')'):JSON,//(new Function(""," return "+JSON))()

});



$('#easyuigrid').treegrid("getPanel").panel({
tools :"#toolbar"
});
//修改panel的tools样式，把按钮往上移
var pt = $(".panel-tool");
var ph = $(".panel-header");
pt.css({backgroundImage:"url(<%=basePath%><%=session.getAttribute("themeDIR")%>title25.png)",fontSize: "12px",height: "24px", right: "0px",top:"0px",paddingTop:"0px",border:0});
//设置panel的title字体为白色
pt.prev().css({color:"white"});

//var origi = "";
//var bText = "";
pt.find(".l-btn-icon-left").bind('mouseover',function(){
origi = $(this).attr("class");
bText = $(this).html();
//$(this).css({color:"black"});
//$(this).html("<img src='<%=path%>/Backstage/Frame/images/button02.png'>");
//$(this).removeAttr("class");

});
pt.find(".l-btn-icon-left").bind('mouseout',function(){
$(this).css({color:"white"});
// $(this).attr("class",origi);
// $(this).html(bText);
});

//修改工具栏内功能按钮的位置
$(".panel-tool-a").css({marginTop:"-2px"});

//设置里面的tool的字体颜色为白色
pt.find(".l-btn-icon-left").css({color:"white"});
ph.css({filter:""});

//设置grid的head颜色
pt.parent().css({backgroundImage:"url(<%=basePath%><%=session.getAttribute("themeDIR")%>title25.png)",backgroundColor:"#AAAAAA"});
pt.parent().removeClass("panel-hear");
//设置grid的列头颜色 
$(".datagrid-header-inner").find("span").css({color:"#064286",fontWeight:"600"});

pt.removeClass("panel-header");
pt.addClass("tabs-tool");
pt.removeClass("panel-tool");
});


function append(){
var node = $('#easyuigrid').treegrid('getSelected');//选中状态 
//console.info(node);
if(node.level==3){
etc.msgShow("操作提示","当前节点不能添加子节点!!");
}else if(node.level==2){
   etc.operate3('ADD','<%=path%><s:property value="#session.resource.MD150101.ADDPROJECTDATA.url"/>','文档材料新增',node.spId,node.level,null,500,260);
}else if(node.level==1){
etc.operate3('ADD','<%=path%><s:property value="#session.resource.MD150101.ADDPROJECTITEM.url"/>','项目细项新增',node.spId,node.level,null,750,300);
}
        };
        
        
        function rem(){
var node = $('#easyuigrid').treegrid('getSelected');//选中状态 
//console.info(node);
if(node.level==3){
$.messager.confirm("提示信息","确认删除该文档吗?",function(r){
if(r){
etc.operate3('DELETE','<%=path%><s:property value="#session.resource.MD150101.DELETEDATA.url"/>','项目文档删除',node.spId,null,null,null,null);
}else{                                                                          
return ;
}
});
}else if(node.level==2){
$.messager.confirm("提示信息","当前项目细项下的文档都会删除,确认删除?",function(r){
if(r){
etc.operate3('DELETE','<%=path%><s:property value="#session.resource.MD150101.DELETEPROJECTITEM.url"/>','项目细项删除',node.spId,null,null,null,null);
}else{                                                                            
return ;
}
});
}else if(node.level==1){
$.messager.confirm("提示信息","当前项目下的细项和文档都会删除,确认删除?",function(r){
if(r){
etc.operate3('DELETE','<%=path%><s:property value="#session.resource.MD150101.DELETE.url"/>','项目删除',node.spId,null,null,null,null);
}else{
return ;
}
});
}
        };
        
        
        function update(){
var node = $('#easyuigrid').treegrid('getSelected');//选中状态 
//console.info(node);
if(node.level==3){
   etc.operate3('UPDATE','<%=path%><s:property value="#session.resource.MD150101.UPDATEPROJECTDATA.url"/>','项目文档材料修改',node.spId,node.level,null,500,260);
}else if(node.level==2){
   etc.operate3('UPDATE','<%=path%><s:property value="#session.resource.MD150101.UPDATEPROJECTITEM.url"/>','项目信息细项修改',node.spId,node.level,null,750,300);
}else if(node.level==1){
etc.operate3('UPDATE','<%=path%><s:property value="#session.resource.MD150101.UPDATE.url"/>','项目信息修改',node.spId,node.level,null,770,270);
}
        };
        
        function detail(){
        var node = $('#easyuigrid').treegrid('getSelected');//选中状态 
//console.info(node);
if(node.level==3){
etc.operate3('DETAIL','<%=path%><s:property value="#session.resource.MD150101.DETAIL.url"/>','项目文档详情',node.spId,node.level,null,540,220);
}else if(node.level==2){
etc.operate3('DETAIL','<%=path%><s:property value="#session.resource.MD150101.DETAIL.url"/>','项目细项详情',node.spId,node.level,null,540,290);
}else if(node.level==1){
etc.operate3('DETAIL','<%=path%><s:property value="#session.resource.MD150101.DETAIL.url"/>','项目信息详情',node.spId,node.level,null,540,290);
}
       
        }

</script>
  </head>
<body style="padding:0px;">
<table class="tb_first" >
<tr>
<td class="td_first">
 <!-- easyui grid列表 -->
<table id="easyuigrid" style="width:100%;height:100%;overflow-y:hidden;"></table> 
          <!-- 渲染到grid列表中的toolbar  -->
<div id="toolbar">
<table style="width:100%">
<tr>
<td style="text-align:right;">
<!-- 新增 -->
<s:if test="#session.resource.MD150101.ADD!=null">
<a class="easyui-linkbutton"  data-options="iconCls:'icon-add',plain:true" onclick="etc.operate('ADD','<%=path%><s:property value="#session.resource.MD150101.ADD.url"/>','项目信息新增',null,null,770,270)">新增</a>
</s:if>
</td>
</tr>
</table>
</div>
        </td>
     </tr>      
  </table>
  
    <div id="mm" class="easyui-menu" style="width:80px;">
<div onclick="append()">新增</div>
<div onclick="rem()">删除</div>
<div onclick="update()">修改</div>
<div onclick="detail()">详情</div>
 </div>  

2：datagrid

<script type="text/javascript">
function show(){
tip.show();
tip.autoHide();
}
   
$(document).ready(function(){
var JSON = '<%=request.getAttribute("json") %>';
$('#easyuigrid').datagrid({
title:'我的项目列表', 
//iconCls:'icon-ok',
width:etc.getFrameWidth(),
height:etc.getFrameHeight()-65,
loadMsg :'数据正在加载中,请稍候...',//加载数据时，显示的的提示信息
//nowrap: false,
//rownumbers: true,
animate:true,
rowStyler:function(row){
if (row.percentageComplete == 100){
return 'background:#AAD684;color:#fff';
}
},
url:'ProjectAction!searchMyProject.do?typeId=1',
idField:'spId',//数据表格要有主键
treeField:'projectName',//treegrid 树形结构主键 text
fitColumns:true ,
columns:[[
{field:'projectName',title:'项目名称/细项名称/文档名称',width :etc.fixWidth(0.3),sortable:true,resizable:true,
formatter:function(value , record , index){
  if(value==null){
  return "";
  }else{
  return '<span title='+value+'>'+value+'</span>';
  }
} 
} ,
{field:'recordMan',title:'记录人',width :etc.fixWidth(0.1),sortable:true,resizable:true} ,
{field:'responsibleMan',title:'负责人',width :etc.fixWidth(0.1),sortable:true,resizable:true} ,
{field:'planStartTime',title:'计划开始时间',width:etc.fixWidth(0.19),sortable:true,resizable:true}, 
{field:'planEndTime',title:'计划完成时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'actualStartTime',title:'实际开始时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'actualEndTime',title:'实际完成时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'remark',title:'备注',width:etc.fixWidth(0.3),sortable:true,resizable:true,
formatter:function(value , record , index){
  if(value==null){
  return "";
  }else{
  return '<span title='+value+'>'+value+'</span>';
  }
} 
},
{field:'percentageComplete',title:'完成率',width:etc.fixWidth(0.25),sortable:true,resizable:true,rowspan:2,
formatter:function(value){
    if (value){
    var s = '<div style="width:100%;background:#fff;border:1px solid #ccc">' +
    '<div style="width:' + value + '%;background:red">' + value + '%' + '</div>'
    '</div>';
    return s;
    } else {
    return '';
    }
    }
},
{field:'type',title:'文件类型',width:etc.fixWidth(0.19),sortable:true,resizable:true,
  formatter:function(value,row,index){
            if(value==1){
            return '<span style=color:red; >电子文档</span>' ;
               }else if(value==2){
                return '<span style=color:green; >纸质文档</span>' ;
               }
            }
},
{field:'storagePlace',title:'存放位置',width:etc.fixWidth(0.19),sortable:true,resizable:true,
formatter:function(value , record , index){
          if(value==null){
          return "";
          }else{
          return '<span title='+value+'>'+value+'</span>'; 
          }
} 
},
{field:'uploadTime',title:'上传时间',width:etc.fixWidth(0.19),sortable:true,resizable:true},
{field:'spId',title:'下载',width:etc.fixWidth(0.19),sortable:true,resizable:true,
formatter:function(value,row,index){
         if(row.type==1){
         return '<a href="<%=path%>/ProjectAction!download.do?id='+value+'" >下载</a>'; 
         }else if(row.type==2){
         return "";
         }
         }  
},
]],
onRowContextMenu: function(e, rowIndex, rowData) { //右键时触发事件(鼠标右键菜单)
                //三个参数：e里面的内容很多，rowIndex就是当前点击时所在行的索引，rowData当前行的数据
               e.preventDefault(); //阻止浏览器捕获右键事件
                $(this).datagrid("clearSelections"); //取消所有选中项
                $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
               $("#"+divId).menu('show', {//显示右键菜单
                   left: e.pageX,//在鼠标点击处显示菜单
                   top: e.pageY
               });
           },
data: typeof JSON =="string"?eval('('+JSON+')'):JSON,//(new Function(""," return "+JSON))()

});
……
</script>
  </head>
<body style="padding:0px;">
<table class="tb_first" >
<tr>
<td class="td_first">
 <!-- easyui grid列表 -->
<table id="easyuigrid" style="width:100%;height:100%;overflow-y:hidden;"></table> 
          <!-- 渲染到grid列表中的toolbar  -->
<div id="toolbar">
<table style="width:100%">
<tr>
<td style="text-align:right;">
<!-- 新增 -->
<s:if test="#session.resource.MD150101.ADD!=null">
<a class="easyui-linkbutton"  data-options="iconCls:'icon-add',plain:true" onclick="etc.operate('ADD','<%=path%><s:property value="#session.resource.MD150101.ADD.url"/>','项目信息新增',null,null,770,270)">新增</a>
</s:if>
</td>
</tr>
</table>
</div>
        </td>
     </tr>      
  </table>
  
    <div id="mm" class="easyui-menu" style="width:80px;">
<div onclick="append()">新增</div>
<div onclick="rem()">删除</div>
<div onclick="update()">修改</div>
<div onclick="detail()">详情</div>
 </div>