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）迁移到free jqGrid（4.14.1），而是迁移到jQuery UI 1.12.1。在1.10.x，1.11.x和1.12.x版本中，jQuery UI Menu的CSS样式多次更改。插件jquery.contextmenu.js和jquery.contextmenu-ui.js已过时。它们基于10年前发布的代码（请参阅2007年7月16日的jquery.contextmenu.js文件的评论）。如果你真的不需要使用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，现在没有上下文菜单

1 个答案: