jqGrid中的动态上下文菜单

时间:2011-11-16 14:02:43

标签: javascript jquery jqgrid

如何在jqGrid中获取动态上下文菜单?我需要为偶数行显示'menu1',为奇数行显示'menu2'?我尝试使用contextmenu插件,但不知道如何在两个上下文菜单之间实现动态切换。感谢。

2 个答案:

答案 0 :(得分:0)

好的,所以你已经有了contextmenu工作,但需要定义行是偶数还是奇数。

尝试以下方法:

afterInsertRow: function(rowId, rowData, rowElm) {
  var trElement = $('#' + rowid);
  if(trElement.is(':even'))
    // even contextMenu
  else
    // odd contextMenu
}

答案 1 :(得分:0)

如果你需要为偶数行绑定'menu1'而为奇数行绑定'menu2',你可以实现绑定到loadComplete内的网格行。例如,如果你有

<div class="contextMenu" id="myMenu1" style="display:none">
    <ul style="width: 200px">
        <li id="edit1">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Edit Row 1</span>
        </li>
        <li id="del1">
            <span class="ui-icon ui-icon-trash" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Delete Row 1</span>
        </li>
    </ul>
</div>
<div class="contextMenu" id="myMenu2" style="display:none">
    <ul style="width: 200px">
        <li id="edit2">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Edit Row 2</span>
        </li>
        <li id="del2">
            <span class="ui-icon ui-icon-trash" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Delete Row 2</span>
        </li>
    </ul>
</div>

你可以进行绑定

loadComplete: function () {
    $("tr:even", this).contextMenu('myMenu1', {
        bindings: {
            'edit1': function(trigger) {
                alert ("Edit (menu1) id=" + trigger.id);
            },
            'del1': function(trigger) {
                alert ("Delete (menu1) id=" + trigger.id);
            }
        }
    });
    $("tr:odd", this).contextMenu('myMenu2', {
        bindings: {
            'edit2': function(trigger) {
                alert ("Edit (menu2) id=" + trigger.id);
            },
            'del2': function(trigger) {
                alert ("Delete (menu2) id=" + trigger.id);
            }
        }
    });
}

请参阅the demo