如何为我的 jqGrid 设置上下文菜单？

Question

我在我们的网站上有一个供内部使用的 jqGrid，它列出了我们所有的用户。在每个 user/row 上，我希望能够应用各种选项（取决于该行中的数据）。与其将导航按钮添加到寻呼机，不如在右键单击一行时显示上下文菜单更有意义。

我们目前在我们的网站上导入了 this jQuery contextMenu plugin，因此最好以某种方式将其集成到我的 jqGrid 中。

我的 jqGrid 缩小到基础看起来像这样：

$("#users").jqGrid({
    datatype: 'json',
    url: 'myMethodURL',
    gridview: true,
    colModel: [
        {name: 'id', label: 'User ID', hidden:true},
        {name: 'lastname', label: 'Last Name'},
        {name: 'firstname', label: 'First Name'},
        {name: 'status', label: 'Status', stype: 'select', searchoptions: {value: ':All;ACTIVE:Active;INACTIVATED:Inactive;PENDING APPROVAL:Pending Approval;'}},
        ... more fields ...
      ],
    height:'auto',
    autowidth:true,
    caption:'Users',
    rowNum:20,
    rowList:[10,20,50],
    sortorder:'asc',
    sortname: 'lastname',
    ignoreCase: true, // case-insensitive filtering
    pager: '#pager',
    jsonReader: {
        root: "ROWS", //our data
        page: "PAGE", //current page
        total: "TOTAL", //total pages
        records:"RECORDS", //total records
        cell: "", //not used
        id: "0" //will default first column as ID
    },
    postData: postData
});
$("#users").jqGrid("filterToolbar", {searchOnEnter: true});

上下文菜单中我需要的一些选项：

激活或停用（取决于用户当前是否 active/inactive - 基本上需要切换）
处理待定用户（仅当用户状态为 "pending" 时才会显示）
编辑用户信息
发送重置密码link

如何设置具有可变选项（取决于特定行的值）的上下文菜单，并定义单击选项时发生的情况？

Answer 1

一般来说，the jQuery contextMenu plugin 与 jqGrid 的用法在我看来非常简单。您可以将菜单绑定到网格主体。只需要知道 rowid 是 <tr> 元素的 id 属性的值，而具有真实数据的 tr 元素具有 class .jqgrow.

因此代码可能如下所示

$("#users").jqGrid({
    datatype: 'json',
    ...
}).contextMenu({
    selector: ".jqgrow", 
    build: function ($trigger, e) {
        // this callback is executed every time the menu is to be shown
        // its results are destroyed every time the menu is hidden
        // e is the original contextmenu event

        var $tr = $(e.target).closest("tr.jqgrow"),
            rowid = $tr.attr("id"),
            item = $grid.jqGrid("getRowData", rowid);

        // item contains now the data of the row and we can
        // build the context menu dynamically
        if (item.status === "ACTIVE") {
            return {
                callback: function (key, options) {
                    var m = "clicked: " + key + " on rowid=" + rowid +
                            " (" + item.firstname + " " + item.lastname + ")";
                    alert(m); 
                },
                items: {
                    edit: {name: "Edit", icon: "edit"},
                    cut: {name: "Cut", icon: "cut"},
                    copy: {name: "Copy", icon: "copy"},
                    paste: {name: "Paste", icon: "paste"},
                    delete: {name: "Delete", icon: "delete"},
                    sep1: "---------",
                    quit: {name: "Quit", icon: function($element, key, item) {
                            return 'context-menu-icon context-menu-icon-quit';
                          }}
                }
            };
        } else {
            return {
                callback: function (key, options) {
                    var m = "clicked: " + key + " on rowid=" + rowid +
                            " (" + item.firstname + " " + item.lastname + ")";
                    alert(m); 
                },
                items: {
                    delete: {name: "Delete", icon: "delete"},
                    sep1: "---------",
                    quit: {name: "Quit", icon: function($element, key, item) {
                            return 'context-menu-icon context-menu-icon-quit';
                          }}
                }
            };
        }
    }
});

查看演示 https://jsfiddle.net/OlegKi/37rb593h/。您可以根据自己的需要修改 build 回调的代码。

如何为我的 jqGrid 设置上下文菜单？

How can I set up a contextMenu for my jqGrid?

jquery

contextmenu

jqgrid