jQuery right-click menu contextMenu usage example_jquery

Below we will design a scenario where the table grid needs to implement right-click, add, delete, and save operations on each row. For grid, I use gridview. I just use the styles provided by Microsoft. The test cases don’t need to be very beautiful. I’m not an artist anymore. Haha, I’m just lazy.

First, the renderings. Some comrades say that only with pictures can the truth be revealed:

ui code:

Copy the code The code is as follows:

• 
  
  edit


• 
  
  Delete


• 
  
  Save


• 
  
  About

BorderStyle="None" BorderWidth="1px" CellPadding="3">
< ;RowStyle ForeColor="#000066" />

html>

Note:
1: contextMenu we hide some menu items based on data records. This can be done in the onShowMenu event, based on the
e.currentTarget trigger source to obtain data, based on remove menu item. For example, in the test case: if id>10, saving is not allowed
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$ ("#save", menu).remove();
}
2: Event registration: Get data according to the second parameter target, and get the menu item according to the first parameter t. For example:

Copy code The code is as follows:

'add': function(t, target) {
alert('Trigger: ' t.id ' increase ' " taget by:" $("td:eq(0)", target).text());
},

Ajax and server-side communication are needed here. You can use the component from my previous article: jQuery Ajax imitates the AjaxPro.Utility.RegisterTypeForAjax auxiliary method, which will make it easier to apply ajax communication.
There is a problem here in the source code I downloaded:
Originally, the currentTarget here is always undefined.

Copy code The code is as follows:

if (!!cur.onShowMenu) menu = cur. onShowMenu(e, menu);
$.each(cur.bindings, function(id, func) {
$('#' id, menu).bind('click', function(e) {
hide();
func(trigger, currentTarget);
});
});

After I modified:

Copy code The code is as follows:

if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
$.each(cur.bindings, function(id, func) {
$('#' id, menu).bind('click', function(ev) {
hide();
func(trigger, e.currentTarget);
});
});

This way everything is normal.
There is very little content, everything is interrupted and ends here, over!
Attachment download: Demo