Question

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

我正在使用onContextMenu来根据所选行内的特定单元格值动态显示菜单。（返回true或false）。

问题出在显示菜单后，当我右键单击另一行时，未关闭上一行打开的菜单。如果我不想显示行的菜单并且之前打开了菜单，则在我再次在另一行显示菜单或者在页面中的任何位置左键单击时，无法关闭它。

如果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

.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(); });

JQGrid动态上下文菜单

1 个答案: