Below we will design a scenario in which grid needs to implement the right mouse button in each row, adding, deleting, and saving operations. Grid I used the GridView, casually with the style provided by Microsoft, test cases do not have to do much good, I am not doing art, haha, secretly lazy.
The first effect of the picture, is some comrades said that there is a picture of the truth:
UI code:
Copy Code code as follows:
<%@ 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 ">
<title></title>
<%----%>
<script src= "Script/jquery.js" type= "Text/javascript" ></script>
<script src= "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 + ' add ' + "Taget by:" + $ ("Td:eq (0)", target). text ());
},
' Delete ': function (t, target) {
Alert (' Trigger: ' + t.id + ' delete ' + "Taget by:" + $ ("Td:eq (0)", target). text ());
$ (target). Remove ();
},
' Save ': function (t, target) {
Alert (' Trigger: ' + t.id + ' save ' + "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>
<body>
<form id= "Form1" runat= "Server" >
<div>
<div class= "ContextMenu" id= "Menu" >
<ul>
<li id= "Add" >
Edit </li>
<li id= "Delete" >
Delete </li>
<li id= "Save" >
Save </li>
<li id= "About" >
About </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= "the #000066" horizontalalign= "left"/>
<selectedrowstyle backcolor= "#669999" font-bold= "True" forecolor= "white"/>
</asp:GridView>
</div>
</form>
</body>
Note:
1:contextmenu We hide some menu items based on data records, which can be in the Onshowmenu event, depending on
E.currenttarget triggers the source to get the data, based on the Remove menu item. For example, in a test case: if ID>10 is not allowed to save
if (parseint ($ ("Td:eq (0)", e.currenttarget). Text ()) > 10) {
$ ("#save", menu). Remove ();
}
2: Event Registration: Gets the data based on the second parameter target, the first parameter T gets the menu item. Like what:
Copy Code code as follows:
' Add ': function (t, target) {
Alert (' Trigger: ' + t.id + ' add ' + "Taget by:" + $ ("Td:eq (0)", target). text ());
},
Ajax and server-side communications are needed here, and I can use my previous component: JQuery Ajax Imitation AjaxPro.Utility.RegisterTypeForAjax helper method, will be more simple to apply AJAX communication.
There is something wrong with my source code:
The original, here Currenttarget always for undefined.
Copy Code code 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 revise:
Copy Code code 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);
});
});
Then everything is fine.
With little content, everything is interrupted, ended, over!
Attachment Download: Demo
