如何创建 jqGrid 上下文菜单？

Question

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

$(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 标记来定义上下文菜单：

<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 的代码，可能上面的例子不是最好的，但效果很好。可以看对应的demohere。该演示还有许多其他功能，但您应该只查看loadComplete 事件处理程序。

Answer 2

你可以看看 onRightClickRow 事件

JqGridWiki

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('<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>