我正在尝试在jqGrid上创建一个上下文菜单(对于每一行)但是找不到如何这样做。我目前正在使用jQuery Context Menu(有更好的方法吗?)但它适用于整个网格不是特定的行,即不能为它执行行级操作。请帮助我,谢谢。
$(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)"
);
});
答案 0 :(得分:17)
有许多上下文菜单插件。你可以在那里找到jqGrid源代码的plugins
子目录。
要使用它,您可以使用例如以下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>
您可以将上下文菜单绑定到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;
}
});
}
在示例中,我为具有偶数rowid的所有行禁用了"Del"
菜单项。禁用的菜单项会转发项目选择,因此需要控制项目是否在bindings
内再次禁用。
我使用上面的$("tr.jqgrow", this).contextMenu('myMenu1', {...});
将相同的菜单绑定到所有网格行。您当然可以将不同的行绑定到不同的菜单:$("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});
我没有仔细阅读contextMenu
的代码,可能上面的例子并不是最好的,但效果非常好。您可以看到相应的演示here。该演示还有许多其他功能,但您应该只在loadComplete
事件处理程序中进行查看。
答案 1 :(得分:5)
您可以查看onRightClickRow事件
jQuery("#gridid").jqGrid({
...
onRightClickRow: function(rowid, iRow, iCol, e){
//Show context menu ...
},
...
})
来自Wiki ... onRightClickRow
onRightClickRow
rowid,iRow,iCol,e
右键单击行后立即抬起。 rowid是行的id, iRow是行的索引(不要将它与rowid混合), iCol是细胞的索引。 e是事件对象。 注意 - 此事件在Opera浏览器中不起作用,因为Opera不支持oncontextmenu事件
答案 2 :(得分:1)
你可以试试这个:
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;
}
});
},
........... 和HTML代码:
<div class="contextMenu" id="myMenu1" style="display:none">
<ul style="width: 400px">
<li id="send">
<span>Add Row</span>
</li>
</ul>
</div>