JqG​​rid上下文菜单和子菜单

Question

我正在使用Jqgrid 4.5.4版本。要实现右键单击上下文菜单功能，我使用Jquery插件进行右键单击上下文菜单（http://www.trendskitchens.co.nz/jquery/contextmenu/）。

我的要求是在主右键单击上下文菜单中显示子菜单。例如：

--------------------------
Delete
Add
Highlight > ---------------
             Highlight doc1
             Highlight doc 2
           ----------------
Edit
----------------------------

当我点击＆＃34;突出显示＆＃34;上下文菜单选项，子菜单打开＆＃34;突出显示文档1＆＃34;和＆＃34;突出显示文档2＆＃34;。我无法使用上下文菜单插件实现相同的功能。

任何人都可以提供一些解决方案。

这是我的代码：

loadComplete : function(data) {
$("tr.jqgrow", this)
    .contextMenu('rightClickMenu', {
        bindings : createContextMenuBindings(),
        onContextMenu : function(event) {
           var rowId = $(event.target).closest("tr.jqgrow").attr("id");
               return createContextMenu(myMap[rowId].ctxMenu);
        }
    });
}

function createContextMenuBindings() {
var bindings = {
    'delete' : function(trigger) {
        handleDelete(trigger.id);
    },
    'add' : function(trigger) {
        handleAccept(codeType, trigger.id, true);
    },
    'highlight' : function(trigger) {
               // This case I have to show sub menu with different options
    }
    };
return bindings;
}

function createContextMenu(ctxMenu) {
var menuItem = '';

if (ctxMenu != null) {
    for ( var i = 0; i < ctxMenu.length; i++) {
        if (ctxMenu[i].display) {

            var subMenu = ctxMenu[i].subCtxMenu;

            if(subMenu != null && subMenu.length > 0) 
            {
                 menuItem += "<li class='menuitem dropdown' id= "+ ctxMenu[i].handler + ">";
                 var ulTag = '<a class="btn btn-sm btn-link" data-toggle="dropdown">' + ctxMenu[i].name +
                             '<span class="caret"></span>'+
                             '</a>';
                 ulTag += "<ul class='subrowul dropdown-menu'>";  
                 $.each(subMenu, function( index, value ) {
                     ulTag += "<li class='submenuitem' id= '"+ value.handler + "'>" + value.name + "</li>";
                });
                 ulTag += "</ul>";
                 menuItem += ulTag;
             }  
             else 
             {
                 menuItem += "<li class='menuitem' id= "+ ctxMenu[i].handler + ">" + ctxMenu[i].name; 
             }
             menuItem += "</li>";

        } 
$('#rightClickMenu > ul li.menuitem').remove();
$("#rightClickMenu > ul").append(menuItem);
if (menuItem == '') {
    return false;
} else {
    return true;
}
}

我很感激你的回答。 感谢

更新 我正在回答我自己的问题。我能够将Jquery上下文菜单集成到jqgrid。现在我能够看到菜单和子菜单。我正在为寻找答案的人附上一些代码：

在按行完成jqgrid加载后，将调用下面的逻辑。

    $.contextMenu({
        selector: 'tr#'+rowId,
        build: function($trigger, e){
            // ctxMenu is rendered from server.
            var ctxMenu = jqGridJsonResponseMap[code_type]    [$trigger[0].id].rowInfo.ctxMenu;
            // ctx menu options constructed for each row. It is dynamic based on each row.  
            var _items = getCtxMenuOptionsByRowId(ctxMenu, code_type, $trigger[0].id);
            return {
                callback: function(key, options) {
                    // each context menu has differnt callback
                    ctx_bindings[key](key, options, code_type);
                },
                items: _items
            };
        }
    });