JQGrid 动态上下文菜单

Question

将 JQGrid-4.3.3 与 jquery.contextmenu.js 插件一起使用。

我使用onContextMenu 是为了根据所选行内的特定单元格值动态显示菜单。 （返回真或假）。

问题是显示菜单后，当我右键单击另一行时，为上一行打开的菜单没有关闭。如果我不想显示某一行的菜单并且该菜单之前已打开，则在我在另一行中再次显示该菜单或左键单击页面中的任意位置之前，它无法关闭。

onContextMenu 返回 false 后如何关闭旧菜单？

更新： 这是我的代码：

function createGridContextMenu(grid_)
        {                                              
            $("tr.jqgrow" , grid_).contextMenu('grid_contextmenu' , {
                bindings: {
                    'item1': function(trigger)
                    {

                    }                      
                },
                menuStyle: { font:'11px Arial, Verdana, Helvetica', 
                    border: '1px solid #000' , 
                    width: '130px'                                        
                },                     
                itemStyle: {  border: 'none', padding: '4px' }, 
                itemHoverStyle: { backgroundColor: '#C0C0C0', border: 'none'},
                onContextMenu : function(event, menu)
                {          

                    var selected_row_id = $(event.target).parent("tr").attr("id");         

                    var row = grid_.jqGrid('getRowData',selected_row_id);
                    if(row.status == 1)
                    {
                        return false;
                    }                        
                    else
                    {
                        grid_.setSelection(selected_row_id, true);
                        return true;           
                    }
                },
                onShowMenu: function(event, menu)
                {   
                    return menu;                        
                }
            });                           
        }   

我打电话给createGridContextMenu 里面

loadComplete: function()
{
createGridContextMenu($(this));
},

提前致谢。

Answer 1

我认为问题的原因是您创建上下文菜单的位置错误。第二个问题是在网格的不同行上设置单独的上下文菜单。

回调loadComplete 将在加载网格、分页、排序等时每次执行。当前实现使用$("tr.jqgrow" , grid_).('grid_contextmenu' , {...});。另一方面，您可以设置整个<table> 的上下文菜单，而不是设置表格主体的每个<tr>。因为<table> 不会在每次填充网格时重新创建，您可以执行以下操作

// create the grid
$("#grid").jqGrid({
    ...
});

// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
    ...
});

我希望这样的更改能够解决您当前的问题。我建议您另外将您使用的 jqGrid 更新到当前版本 4.6.0，您可以从 trirand 下载该版本。

更新：您可以在离开时隐藏上下文菜单。为此，您可以修改jquery.contextmenu.js的代码的the lines 57-59 from

.bind('click', function(e) {
    e.stopPropagation();
});

到

.bind('click', function(e) {
    e.stopPropagation();
}).mouseleave(function (e) {
    if (e.pageX === -1 && e.pageY === -1) {
        return; // over tooltip
    }
    hide();
});

或者，您也可以不修改jquery.contextmenu.js。您只需在调用contextMenu 之后执行相同的操作。最终代码将是

// create the grid
$("#grid").jqGrid({
    ...
});

// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
    ...
});

// register mouseleave handler which close the menu
$("#jqContextMenu").mouseleave(function (e) {
    if (e.pageX === -1 && e.pageY === -1) {
        return; // over tooltip
    }
    $(this).hide().next().hide();
});