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