ui代码：
View Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <%-- --%> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Script/jquery.js" type="text/javascript"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Script/jquery.contextmenu.r2.js" type="text/javascript"></script> <style type="text/css"> .SelectedRow { background: yellow; } .contextMenu { display: none; } </style> <script type="text/javascript"> $(function() { $('#GridView1 tr:gt(0)').contextMenu('menu', { bindings: { 'add': function(t, target) { alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text()); }, 'delete': function(t, target) { alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text()); $(target).remove(); }, 'save': function(t, target) { alert('Trigger：' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text()); }, 'About': function(t, target) { alert('Code by http://www.cnblogs.com/whitewolf/'); } }, onShowMenu: function(e, menu) { if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) { $("#save", menu).remove(); } $(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow"); return menu; } }); }) </script> </head> <body> <form id="form1" runat="server"> <div> <div class="contextMenu" id="menu"> <ul> <li id="add"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 编辑</li> <li id="delete"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 删除</li> <li id="save"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 保存</li> <li id="About"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 关于</li> </ul> </div> <asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3"> <RowStyle ForeColor="#000066" /> <FooterStyle BackColor="White" ForeColor="#000066" /> <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /> </asp:GridView> </div> </form> </body> </html> 复制代码注：
1：contextMenu我们互根据数据记录隐藏一些菜单项，这个可以在onShowMenu事件中，根据
e.currentTarget触发源获取数据，在根据remove菜单项。比如测试用例中的：
如果id>10则不允许保存 if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) { $("#save", menu).remove();2:事件注册：根据第二个参数target获取数据，第一个参数t获取菜单项。比如：
'add': function(t, target) { alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text()); },在这里需要用到ajax和服务端通讯，可以采用我的上一篇组件：jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法，将会更简单应用ajax通讯。
在我下的源代码中这里有点问题：
原来的，这里的currentTarget始终为undefined。
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu); $.each(cur.bindings, function(id, func) { $('#' + id, menu).bind('click', function(e) { hide(); func(trigger, currentTarget); }); });我修改后：
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); }); });这样就一切正常了。
内容很少，一切就在此打断，结束 ，over！
其他资料jQuery目录： 我jQuery系列之目录汇总
附件下载：Demo
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦