jQuery 如何创建 jqGrid 上下文菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6607576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create jqGrid Context Menu?
提问by U.P
I am trying to create a context menu on jqGrid (for each row) but can't find how to do so.I am currently using jQuery Context Menu (is there a better way? )but it is for the entire Grid not for a particular row i.e. cannot perform row level operations for it. Please help me in this, thanks.
我正在尝试在 jqGrid 上创建一个上下文菜单（对于每一行），但找不到如何执行此操作。我目前正在使用 jQuery 上下文菜单（有没有更好的方法？）但它是针对整个网格而不是针对特定行 ie 不能为其执行行级操作。请帮我解决这个问题，谢谢。
$(document).ready(function(){
$("#list1").jqGrid({
sortable: true,
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:50, sortable:false}
],
multiselect: true,
rowNum:10,
rowList:[10,20,30],
pager: '#pager1',
sortname: 'id',
recordpos: 'left',
viewrecords: true,
sortorder: "desc",
caption: "Manipulating Array Data"
});
$("#list1").jqGrid('navGrid','#pager1',{add:false,del:false,edit:false,position:'right'});
$("#list1").contextMenu({
menu: "myMenu"
},
function(action, el, pos) {
alert(
"Action: " + action + "\n\n" +
"Element ID: " + $(el).attr("id") + "\n\n" +
"X: " + pos.x + " Y: " + pos.y + " (relative to element)\n\n" +
"X: " + pos.docX + " Y: " + pos.docY+ " (relative to document)"
);
});
回答by Oleg
There are many context menu plugins. One from there you will find in the pluginssubdirectory of the jqGrid source.
有许多上下文菜单插件。您可以在pluginsjqGrid 源代码的子目录中找到其中的一个。
To use it you can for example define your context menu with for example the following HTML markup:
要使用它，您可以例如使用以下 HTML 标记定义上下文菜单：
<div class="contextMenu" id="myMenu1" style="display:none">
<ul style="width: 200px">
<li id="add">
<span class="ui-icon ui-icon-plus" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Add Row</span>
</li>
<li id="edit">
<span class="ui-icon ui-icon-pencil" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Edit Row</span>
</li>
<li id="del">
<span class="ui-icon ui-icon-trash" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Delete Row</span>
</li>
</ul>
</div>
You can bind the context menu to the grid rows inside of loadComplete(after the rows are placed in the <table>):
您可以将上下文菜单绑定到里面的网格行loadComplete（在行放置在 之后<table>）：
loadComplete: function() {
$("tr.jqgrow", this).contextMenu('myMenu1', {
bindings: {
'edit': function(trigger) {
// trigger is the DOM element ("tr.jqgrow") which are triggered
grid.editGridRow(trigger.id, editSettings);
},
'add': function(/*trigger*/) {
grid.editGridRow("new", addSettings);
},
'del': function(trigger) {
if ($('#del').hasClass('ui-state-disabled') === false) {
// disabled item can do be choosed
grid.delGridRow(trigger.id, delSettings);
}
}
},
onContextMenu: function(event/*, menu*/) {
var rowId = $(event.target).closest("tr.jqgrow").attr("id");
//grid.setSelection(rowId);
// disable menu for rows with even rowids
$('#del').attr("disabled",Number(rowId)%2 === 0);
if (Number(rowId)%2 === 0) {
$('#del').attr("disabled","disabled").addClass('ui-state-disabled');
} else {
$('#del').removeAttr("disabled").removeClass('ui-state-disabled');
}
return true;
}
});
}
In the example I disabled "Del"menu item for all rows having even rowid. The disabled menu items forward the item selection, so one needs to control whether the item disabled one more time inside of bindings.
在示例中，我"Del"为所有具有偶数 rowid 的行禁用了菜单项。禁用的菜单项转发项目选择，因此需要控制该项目是否在bindings.
I used above $("tr.jqgrow", this).contextMenu('myMenu1', {...});to bind the same menu to all grid rows. You can of course bind different rows to the different menus: $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});
我在上面使用$("tr.jqgrow", this).contextMenu('myMenu1', {...});过将相同的菜单绑定到所有网格行。您当然可以将不同的行绑定到不同的菜单：$("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});
I didn't read the code of contextMenucareful and probably the above example is not the best one, but it works very good. You can see the corresponding demo here. The demo has many other features, but you should take the look only in the loadCompleteevent handler.
我没有contextMenu仔细阅读代码，可能上面的例子不是最好的，但它工作得很好。您可以在此处查看相应的演示。该演示还有许多其他功能，但您应该只查看loadComplete事件处理程序。
回答by 2GDev
you can have a look at the onRightClickRow event
你可以看看 onRightClickRow 事件
jQuery("#gridid").jqGrid({
...
onRightClickRow: function(rowid, iRow, iCol, e){
//Show context menu ...
},
...
})
From Wiki ... onRightClickRow
来自 Wiki ... onRightClickRow
Event Name
事件名称
onRightClickRow
右键单击行
Parameters
参数
rowid, iRow, iCol, e
rowid、iRow、iCol、e
Information
信息
Raised immediately after row was right clicked. rowid is the id of the row, iRow is the index of the row (do not mix this with the rowid), iCol is the index of the cell. e is the event object. Note - this event does not work in Opera browsers, since Opera does not support oncontextmenu event
右键单击行后立即引发。rowid 是行的 id，iRow 是行的索引（不要与 rowid 混合），iCol 是单元格的索引。e 是事件对象。注意 - 此事件在 Opera 浏览器中不起作用，因为 Opera 不支持 oncontextmenu 事件
回答by Attila Naghi
You can try this :
你可以试试这个：
jQuery("#yourid").jqGrid({
...
...
{name:'req_name',index:'req_name', width:'9%', sortable:true},
.....
.....
loadComplete:function(request){
...
...
$("[aria-describedby='yourid_req_name']", this).contextMenu('myMenu1',{
onContextMenu: function(e) {
var rowId = $(e.target).closest("tr.jqgrow").attr("id");
$("#send").html('<a onclick="send_email('+rowId+')">Send Email</a>');
return true;
}
});
},
........... and the html code :
..... 和 html 代码：
<div class="contextMenu" id="myMenu1" style="display:none">
<ul style="width: 400px">
<li id="send">
<span>Add Row</span>
</li>
</ul>
</div>
