Как создать контекстное меню jqGrid?

Ответ 1

Существует много плагинов контекстного меню. Один из них вы найдете в подкаталоге plugins источника jqGrid.

Чтобы использовать его, вы можете, например, определить свое контекстное меню, например, следующую разметку 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;
        }
    });
}

В примере я отключил пункт меню "Del" для всех строк, имеющих даже rowid. Элементы отключенного меню перенаправляют выбор элемента, поэтому необходимо контролировать, отключен ли элемент еще один раз внутри bindings.

Я использовал выше $("tr.jqgrow", this).contextMenu('myMenu1', {...});, чтобы связать одно и то же меню со всеми строками сетки. Вы можете, конечно, связать разные строки с разными меню: $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});

Я не читал код contextMenu осторожным, и, вероятно, приведенный выше пример не самый лучший, но он работает очень хорошо. Вы можете увидеть соответствующее демо здесь. В демо есть много других функций, но вы должны смотреть только в обработчике событий loadComplete.

Ответ 2

вы можете посмотреть событие onRightClickRow

JqGridWiki

jQuery("#gridid").jqGrid({
...
   onRightClickRow: function(rowid, iRow, iCol, e){ 
      //Show context menu ...

   },
...
})

Из Wiki... onRightClickRow

Имя события

onRightClickRow

Параметры

rowid, iRow, iCol, e

Информация

Поднят сразу после щелчка правой кнопкой. rowid - это идентификатор строки, iRow - это индекс строки (не смешивайте ее с rowid), iCol - это индекс ячейки. e - объект события. Примечание. Это событие не работает в браузерах Opera, поскольку Opera не поддерживает событие oncontextmenu

Ответ 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>