利用jquery右键菜单巧妙获取table的每行数据的id施行方法 _Web前端

利用jquery右键菜单巧妙获取table的每行数据的id执行方法

今天想在table的表格上针对每行数据能进行右键菜单操作，根据不同的要求调用不同的方法，比如右键显示详细信息，修改之类的操作，但是jquery有点击右键的方法，但是没有获取每行数据，然后进行操作的方法。所以想了个折中的方法，在鼠标划入table的数据行的时候，触发事件，获取当前行的数据把它放到隐藏域中，然后再点击右键触发事件的时候，从隐藏域中获取参数，大致思路就是这样的

<html>

<head>
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/Contents/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/Contents/themes/icon.css">
 <script type="text/javascript" src="${pageContext.request.contextPath}/Contents/JS/jquery.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/Contents/JS/jquery.easyui.min.js"></script>

<script type="text/javascript">

$(function() {
  $(document).bind('contextmenu',function(e){
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    });
    return false;
   });
 });
 function mouseoverevent(id){
  document.getElementById("eventid").value=id;
 }
 function getmouseevent(){
  var id=$("#eventid").val();
  alert(id);
 }

</script>

</head>

<body>

 <input id="eventid"name="eventid" type="hidden" value="" />

 

<table>

 <tr onmouseover="this.style.backgroundColor = '#F5F5F5'; mouseoverevent('id');" style="CURSOR: hand" 
        onmouseout="this.style.backgroundColor = ''"  bgColor=#FFFFFF>
        <td noWrap  >

 </td>

 </tr>

<table>

 

 <div id="mm" class="easyui-menu" style="width:120px;">
  <div onclick="getmouseevent();">获取事件</div>
 </div>

</body>

以下部分是转载

插件下载地址:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
压缩版:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js

Jquery主页:?? http://jquery.com/

插件中的参数说明:

Parameters
menu_id
The?id?of?the?menu?as?defined?in?your?markup.?You?can?bind?one?or?more?elements?to?a?menu.?Eg?$("table?td").contextMenu("myMenu")?will?bind?the?menu?with?id?"myMenu"?to?all?table?cells.?
Note:?This?behaviour?has?changed?from?r1?where?you?needed?a?"#"?before?the?id?

settings
ContextMenu?takes?an?optional?settings?object?that?lets?you?style?your?menu?and?bind?click?handlers?to?each?option.?ContextMenu?supports?the?following?properties?in?the?settings?object:?

bindings?
An?object?containing?"id":function?pairs.?The?supplied?function?is?the?action?to?be?performed?when?the?associated?item?is?clicked.?The?element?that?triggered?the?current?menu?is?passed?to?this?handler?as?the?first?parameter.?
Note:?This?behaviour?has?changed?from?r1?where?you?needed?a?"#"?before?the?id?
menuStyle?
An?object?containing?styleName:value?pairs?for?styling?the?containing?<ul>?menu.?
itemStyle?
An?object?containing?styleName:value?pairs?for?styling?the?<li>?elements.?
itemHoverStyle?
An?object?containing?styleName:value?pairs?for?styling?the?hover?behaviour?of?<li>?elements.?
shadow?
Boolean:?display?a?basic?drop?shadow?on?the?menu.?
Defaults?to?true?
eventPosX?
Allows?you?to?define?which?click?event?is?used?to?determine?where?to?place?the?menu.?There?are?possibly?times?(particularly?in?IE6)?where?you?will?need?to?set?this?to?"clientX".?
Defaults?to:?'pageX'?
eventPosY?
Allows?you?to?define?which?click?event?is?used?to?determine?where?to?place?the?menu.?There?are?possibly?times?(particularly?in?IE6)?where?you?will?need?to?set?this?to?"clientY".?
Defaults?to:?'pageY'?
onContextMenu(event)?
A?custom?event?function?which?runs?before?the?context?menu?is?displayed.?If?the?function?returns?false?the?menu?is?not?displayed.?This?allows?you?to?attach?the?context?menu?to?a?large?block?element?(or?the?entire?document)?and?then?filter?on?right?click?whether?or?not?the?context?menu?should?be?shown.?
onShowMenu(event,?menu)?
A?custom?event?function?which?runs?before?the?menu?is?displayed.?It?is?passed?a?reference?to?the?menu?element?and?allows?you?to?manipulate?the?output?before?the?menu?is?shown.?This?allows?you?to?hide/show?options?or?anything?else?you?can?think?of?before?showing?the?context?menu?to?the?user.?This?function?must?return?the?menu.?

通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.

<HTML>
 <HEAD>
  <TITLE> JQuery右键菜单 </TITLE>
  <script  src="jquery-1.2.6.min.js"></script>
  <script src="jquery.contextmenu.r2.js"></script>
 </HEAD>

 <BODY>
 <span class="demo1" style="color:green;">
    右键点此
 </span>
<hr />
<div id="demo2">
    右键点此
</div>
<hr />
<div class="demo3" id="dontShow">
  不显示
</div>
<hr />
<div class="demo3" id="showOne">
  显示第一项
</div>
<hr />
<div class="demo3" id="showAll">
  显示全部
</div>

<hr />
    <!--右键菜单的源-->
     <div class="contextMenu" id="myMenu1">
      <ul>
        <li id="open"><img src="folder.png" /> 打开</li>
        <li id="email"><img src="email.png" /> 邮件</li>
        <li id="save"><img src="disk.png" /> 保存</li>
        <li id="delete"><img src="cross.png" /> 关闭</li>
      </ul>
    </div>

    <div class="contextMenu" id="myMenu2">
        <ul>
          <li id="item_1">选项一</li>
          <li id="item_2">选项二</li>
          <li id="item_3">选项三</li>
          <li id="item_4">选项四</li>
        </ul>
   </div>
    
     <div class="contextMenu" id="myMenu3">
         <ul>
          <li id="item_1">csdn</li>
          <li id="item_2">javaeye</li>
          <li id="item_3">itpub</li>
        </ul>
    </div>
 </BODY>
 <script>
    //所有class为demo1的span标签都会绑定此右键菜单
     $('span.demo1').contextMenu('myMenu1', 
     {
          bindings: 
          {
            'open': function(t) {
              alert('Trigger was '+t.id+'\nAction was Open');
            },
            'email': function(t) {
              alert('Trigger was '+t.id+'\nAction was Email');
            },
            'save': function(t) {
              alert('Trigger was '+t.id+'\nAction was Save');
            },
            'delete': function(t) {
              alert('Trigger was '+t.id+'\nAction was Delete');
            }
          }

    });
    //所有html元素id为demo2的绑定此右键菜单
    $('#demo2').contextMenu('myMenu2', {
      //菜单样式
      menuStyle: {
        border: '2px solid #000'
      },
      //菜单项样式
      itemStyle: {
        fontFamily : 'verdana',
        backgroundColor : 'green',
        color: 'white',
        border: 'none',
        padding: '1px'

      },
      //菜单项鼠标放在上面样式
      itemHoverStyle: {
        color: 'blue',
        backgroundColor: 'red',
        border: 'none'
      },
      //事件    
      bindings: 
          {
            'item_1': function(t) {
              alert('Trigger was '+t.id+'\nAction was item_1');
            },
            'item_2': function(t) {
              alert('Trigger was '+t.id+'\nAction was item_2');
            },
            'item_3': function(t) {
              alert('Trigger was '+t.id+'\nAction was item_3');
            },
            'item_4': function(t) {
              alert('Trigger was '+t.id+'\nAction was item_4');
            }
          }
    });
    //所有div标签class为demo3的绑定此右键菜单
    $('div.demo3').contextMenu('myMenu3', {
    //重写onContextMenu和onShowMenu事件
      onContextMenu: function(e) {
        if ($(e.target).attr('id') == 'dontShow') return false;
        else return true;
      },

      onShowMenu: function(e, menu) {
        if ($(e.target).attr('id') == 'showOne') {
          $('#item_2, #item_3', menu).remove();
        }
        return menu;
      }

    });



 </script>
</HTML>