Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

jquery - How can I set up a contextMenu for my 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.

We currently have this jQuery contextMenu plugin imported on our site, so it would be preferable to somehow integrate that into my 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. Activate OR Inactivate (depending on if user is currently active/inactive - basically need a toggle)
  2. Process pending user (should ONLY show up if user status is "pending")
  3. Edit user info
  4. Send reset password link

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

Thus the code could be like below

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...