How to create jqGrid Context Menu?

Question

I am trying to create a context menu on jqGrid (for each row) but can\'t find how to do so.I am currently using jQuery Context Menu (is there a better way? )but it is for th

Answer 1

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

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

    

        

            
            Add Row
        
        

            
            Edit Row
        
        

            
            Delete Row
        
    

You can bind the context menu to the grid rows inside of loadComplete (after the rows are placed in the

):

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;
        }
    });
}

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.

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

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.

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...

验证码

 看不清?

提交回复

热议问题