Jquery 如何创建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)"
            );
    });

---

您可以查看onRightClickRow事件

从维基打开右键单击行

事件名称 在右键单击行

参数 罗维德，伊罗，国际古迹遗址理事会，e

信息 在右键单击行后立即引发。 rowid是行的id， iRow是行的索引（不要将其与rowid混合）， iCol是单元的索引。 e是事件对象。

---

注意-此事件在Opera浏览器中不起作用，因为Opera不支持oncontextmenu事件有许多上下文菜单插件。其中一个可以在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>

在示例中，我为所有具有偶数rowid的行禁用了

“Del”

菜单项。禁用的菜单项转发项目选择，因此需要控制是否在

绑定中再次禁用该项目

我使用了上面的
$（“tr.jqgrow”，this）.contextMenu（'myMenu1'，{…}）
将同一菜单绑定到所有网格行。当然，您可以将不同的行绑定到不同的菜单：
$（“tr.jqgrow:even”，this）$（（tr.jqgrow:odd），this.contextMenu（'myMenu2'，{…}）

我没有仔细阅读
contextMenu
的代码，上面的示例可能不是最好的，但效果非常好。您可以看到相应的演示。该演示还有许多其他功能，但您应该只查看
loadComplete
事件处理程序。
您可以尝试以下方法：

jQuery("#yourid").jqGrid({




$（“[aria descripbeby='yourid_req_name']”，this.contextMenu（'myMenu1'，{
onContextMenu:函数（e）{
var rowId=$（e.target）.closest（“tr.jqgrow”）.attr（“id”）；
$（“#发送”）.html（“发送电子邮件”）；
返回true；
}
});
},

。。。。。。。。。。。
以及html代码：

<div class="contextMenu" id="myMenu1" style="display:none">
        <ul style="width: 400px">
            <li id="send">
                <span>Add Row</span>
            </li>
        </ul>
    </div>


宽度：400px>

添加行


如何在此处膨胀上下文菜单？如果可以找到带有show（）方法的上下文菜单，则可以在rightclickevent中使用它。或者另一种解决方案是创建一个自己的div，并在用户右键单击该行时调用$（'div'）.show（），所以我猜jqGrid中没有上下文菜单。有一个使用ContextMenu的ASP.NET MVC代码示例，但我在简单的jQuery中找不到它的等效代码。你可以用同样的方法。。1） 为每一行分配一个类2）将上下文菜单附加到所有DOM元素，并使用该类3）在ContextMenu函数（action、el、pos）上，像现在一样获取行数据（$（el）.attr（“id”））我可能不得不满足50万行（有时）。这不是有点贵吗？太棒了！肯定会在我的jQGrid@FastTrack：我后来建议在关联菜单中添加一些附加项。例如，请参见和其他一些。另请参见。在JqGrid for PHP中也应该有一种实现此解决方案的方法。是question@Oleg-谢谢！这个方法对我来说也很好，但我有一个问题——ul元素的内联样式规则（“width:200px”）似乎以某种方式被覆盖了。我在你的例子中也看到了这种情况。有什么办法可以解决这个问题吗？（我的上下文菜单选项更长）@froadie:不客气！答案真的很古老。例如，将
conetxMenu
单独绑定到每个
tr.jqgrow
是不好的。最好将事件绑定到
元素一次。此外，现在有了jQueryUI的新版本，而且jqGrid有两个分支：我开发的和Tony开发的。中有两个相近的插件。如果你把所有细节都单独贴出来，那就更好了
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;    
                    }
                });
},

<div class="contextMenu" id="myMenu1" style="display:none">
        <ul style="width: 400px">
            <li id="send">
                <span>Add Row</span>
            </li>
        </ul>
    </div>