如何为jqGrid设置contextMenu? [英] How can I set up a contextMenu for my jqGrid?

问题描述

我在我们的网站上有一个供内部使用的jqGrid，其中列出了所有用户.在每个用户/行上，我希望能够应用各种选项(取决于该行中的数据).与其在导航器中添加导航按钮，还不如在右键单击某行时显示上下文菜单.

I have a jqGrid for internal use on our site that lists all our users. On each user/row, I would like to be able to apply various options (depending on the data in that row). Instead of adding navbuttons to the pager, it would make more sense to have a context menu that appears on right-click of a row.

我们当前在我们的网站上导入了此jQuery contextMenu插件，因此以某种方式更可取将其集成到我的jqGrid中.

We currently have this jQuery contextMenu plugin imported on our site, so it would be preferable to somehow integrate that into my jqGrid.

我的jqGrid缩小到了基础，看起来像这样:

My jqGrid scaled down to basics looks something like this:

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

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

Some of the options I need in the context menu:

1. 启用或停用(取决于用户当前是处于活动状态还是处于非活动状态-基本上需要切换)
2. 处理待处理的用户(仅在用户状态为待处理"时才显示)
3. 编辑用户信息
4. 发送重置密码链接

如何设置带有变量选项(取决于特定行的值)的上下文菜单，并定义单击选项时会发生什么?

How can I set up a context menu with variable options (dependent on that particular row's values), and define what happens when an option is clicked?

推荐答案

通常 jQuery contextMenu插件的用法与jqGrid在我看来非常简单.您可以将菜单绑定到网格主体.只需知道rowid是<tr>元素的id属性的值，而具有实际数据的tr元素的类就是.jqgrow.

In general the usage of the jQuery contextMenu plugin with jqGrid seems to me very simple. You can just bind the menu to the grid body. One need just know that the rowid is the value of id attribute of <tr> element and tr elements which have the real data have the 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回调的代码.

See the demo https://jsfiddle.net/OlegKi/37rb593h/. You can modify the code of build callback to any your requirements.

这篇关于如何为jqGrid设置contextMenu?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！