如何创建jqGrid上下文菜单？

我正在尝试在jqGrid上创建一个上下文菜单（对于每一行）但是找不到如何这样做。我目前正在使用jQuery上下文菜单（有更好的方法吗？）但它是针对整个网格而不是为了特定行即不能为它执行行级操作。 请帮助我，谢谢。

$(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)" ); }); 

Answer 1

有许多上下文菜单插件。 从那里你可以在jqGrid源的plugins子目录中找到。

要使用它，您可以使用例如以下HTML标记定义上下文菜单：

 
 
 
  Add Row 
 
  Edit Row 
 
  Delete Row 
 
  

您可以将上下文菜单绑定到loadComplete的网格行（在将行放入

）：

 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', {...}); $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});

我没有仔细阅读contextMenu的代码，可能上面的例子并不是最好的，但它的效果非常好。 您可以在此处查看相应的演示。 该演示具有许多其他function，但您应该只在loadComplete事件处理程序中进行查看。

Answer 2

你可以看一下onRightClickRow事件

JqG​​ridWiki

 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事件

Answer 3

你可以试试这个：

 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('Send Email'); return true; } }); }, 

………..和html代码：

 
 
 
 Add Row