上下文菜单插件很多.您可以在 jqGrid 源代码的 plugins 子目录中找到其中的一个.

There are many context menu plugins. One from there you will find in the plugins subdirectory of the jqGrid source.

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

To use it you can for example define your context menu with for example the following HTML markup:

<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> 之后):

You can bind the context menu to the grid rows inside of loadComplete (after the rows are placed in the <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 中控制是否再次禁用该项目.

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.

我在上面使用 $("tr.jqgrow", this).contextMenu('myMenu1', {...}); 将相同的菜单绑定到所有网格行.您当然可以将不同的行绑定到不同的菜单: $("tr.jqgrow:even", this).contextMenu('myMenu1', {...});$("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});

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', {...});

我没有仔细阅读contextMenu的代码，可能上面的例子不是***的，但它工作得很好.您可以在这里看到相应的演示.该演示还有许多其他功能，但您应该只查看 loadComplete 事件处理程序.

I didn't read the code of contextMenu careful 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 loadComplete event handler.