从 jqgrid 转换为 free-jqgrid，现在没有上下文菜单

Question

我正在从 jqgrid (4.6.0) 转换为 free-jqgrid (4.14.1)。一切似乎都正常，但是当我右键单击网格时我没有得到上下文菜单（工具栏搜索按钮仍然有效）。是否有额外的进口或我需要的东西？这是我目前带来的：

jqueryui/1.12.1/themes/smoothness/jquery-ui.css
free-jqgrid/4.14.1/css/ui.jqgrid.css
free-jqgrid/4.14.1/plugins/css/ui.multiselect.css
jquery/3.2.1/jquery.min.js
jqueryui/1.12.1/jquery-ui.min.js
free-jqgrid/4.14.1/plugins/min/ui.multiselect.js
free-jqgrid/4.14.1/i18n/grid.locale-en.js
free-jqgrid/4.14.1/jquery.jqgrid.min.js
free-jqgrid/4.14.1/plugins/jquery.contextmenu.js

TIA

编辑：

grid.contextMenu(menuId, {
    bindings : myBinding,
    onContextMenu : function(e) {
        var p = grid[0].p,
            i,
            lastSelId,
            $target = $(e.target),
            rowId = $target.closest("tr.jqgrow").attr("id"),
            isInput = $target.is(':text:enabled') || $target.is('input[type=textarea]:enabled') || $target.is('textarea:enabled');
        if (rowId && !isInput && jqGridGetSelectedText() === '') {
            i = $.inArray(rowId, p.selarrrow);
            if (p.selrow !== rowId && i < 0) {
                // prevent the row from be unselected
                // the implementation is for "multiselect:false" which we use,
                // but one can easy modify the code for "multiselect:true"
                grid.jqGrid('setSelection', rowId);
            } else if (p.multiselect) {
                // Edit will edit FIRST selected row.
                // rowId is allready selected, but can be not the last selected.
                // Se we swap rowId with the first element of the array p.selarrrow
                lastSelId = p.selarrrow[p.selarrrow.length - 1];
                if (i !== p.selarrrow.length - 1) {
                    p.selarrrow[p.selarrrow.length - 1] = rowId;
                    p.selarrrow[i] = lastSelId;
                    p.selrow = rowId;
                }
            }
            return true;
        } else {
            return false;
            // no contex menu
        }
    },
    menuStyle : {
        backgroundColor : '#fcfdfd',
        border : '1px solid #a6c9e2',
        maxWidth : '600px',
        width : '100%'
    },
    itemHoverStyle : {
        border : '1px solid #79b7e7',
        color : '#1d5987',
        backgroundColor : '#d0e5f5'
    }
});

编辑：演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" type="text/css" media="screen" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/css/ui.multiselect.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/min/ui.multiselect.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.contextmenu-ui.js"></script>

        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
        <title>jqGrid Loading Data - Million Rows from a REST service</title>
    </head>
    <body>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#jqGrid").jqGrid({
                    url : 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
                    mtype : "GET",
                    datatype : "jsonp",
                    colModel : [{
                        label : 'OrderID',
                        name : 'OrderID',
                        key : true,
                        width : 75
                    }, {
                        label : 'Customer ID',
                        name : 'CustomerID',
                        width : 150
                    }, {
                        label : 'Order Date',
                        name : 'OrderDate',
                        width : 150
                    }, {
                        label : 'Freight',
                        name : 'Freight',
                        width : 150
                    }, {
                        label : 'Ship Name',
                        name : 'ShipName',
                        width : 150
                    }],
                    viewrecords : true,
                    width : 780,
                    height : 250,
                    rowNum : 20,
                    pager : "#jqGridPager"
                }).jqGrid('navGrid', "#jqGridPager", {
                    add : true,
                    edit : true,
                    view : true,
                    del : true,
                    search : true,
                    refresh : true
                }).jqGrid("createContexMenuFromNavigatorButtons", $("#jqGrid").jqGrid("getGridParam", "pager"))
            });
        </script>

    </body>
</html>

Answer 1

在我看来，您出现问题的原因不是从 jqGrid (4.6.0) 迁移到免费的 jqGrid (4.14.1)，而是迁移到 jQuery UI 1.12。 1. jQuery UI 菜单的 CSS 样式在版本 1.10.x、1.11.x 和 1.12.x 中更改了多次。插件 jquery.contextmenu.js 和 jquery.contextmenu-ui.js 是旧的。它们基于 10 年前发布的代码（请参阅 jquery.contextmenu.js 文件注释中的日期 2007 年 7 月 16 日）。如果您真的不需要使用 jQuery UI 1.12.1，那么我建议您只使用 jQuery UI 1.11.4。它将上下文菜单的外观更改为以下内容：

如果您确实需要使用 jQuery UI 1.12.1，那么您应该根据以下代码更改 jquery.contextmenu-ui.js 使用的默认设置：

$.contextMenu.defaults({
    menuShadowStyle: {
        "box-shadow": "8px 8px 8px #aaaaaa",
        margin: "-2px",
        padding: "0"
    },
    itemIconSpanStyle: {
        "float": "none",
        top: "-2px",
        position: "relative"
    }
});

请务必将 jquery.contextmenu-ui.js 从 GitHub 更新到最新版本。如果您必须使用来自 CDN 的 jquery.contextmenu-ui.js 4.14.1，那么您需要在上述 $.contextMenu.defaults 方法

的调用之外添加额外的 CSS 规则

.jqContextMenu .ui-menu .ui-icon {
    position: relative;
}
.jqContextMenu li span {
    float: none !important;
}

见http://jsfiddle.net/OlegKi/avxvy1z0/

从 jqgrid 转换为 free-jqgrid，现在没有上下文菜单

Convert from jqgrid to free-jqgrid, now no context menu

jqgrid

free-jqgrid