从jqgrid转换为free-jqgrid，现在没有上下文菜单
我从jqgrid（4.6.0）转换为free-jqgrid（4.14.1）。一切似乎工作，但我没有得到我的上下文菜单，当我右键单击网格（工具栏搜索按钮仍然工作）。是否有额外的进口或我需要的东西？下面是我目前引进：从jqgrid转换为free-jqgrid，现在没有上下文菜单
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>
在我看来，其原因你的问题不是从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年前发布的代码（请参见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那么你需要添加额外的CSS规则附加到$.contextMenu.defaults方法的调用以上
.jqContextMenu .ui-menu .ui-icon {
position: relative;
}
.jqContextMenu li span {
float: none !important;
}
完美，谢谢。 – user2340157
@ user2340157：不客气！ – Oleg
@ user2340157：小额外的评论：我发现你从来没有使用过**投票权**的答案或问题。 *最重要的目标是与其他开发人员共享*有用的信息。信息是否有用的主要标准是*投票计数器*。您有权每天投票约30个答案**（请参阅[此处]（https://meta.stackexchange.com/a/5213/147495））。建议您为任何文章投票，您的阅读和哪些信息对您有帮助（推荐给其他开发人员）。如果你想帮助其他开发者，请使用投票权。 – Oleg
可以创建不同的方式上下文菜单。您至少需要发布您使用的JavaScript代码。如果您不发布**演示**，这会再现问题，所以很难为您提供帮助。有了JSFiddle演示，例如，不仅可以重现问题，还可以修复代码以使其工作。我个人只使用'plugins/jquery.createcontexmenufromnavigatorbuttons.js'中的'createContexMenuFromNavigatorButtons'和'plugins/jquery.contextmenu-ui'。 – Oleg
我（错误地）认为这将是一个简单的修复常见的迁移问题。对不起 – user2340157
你可以准备**演示**，它重现了这个问题？例如，您是否使用'multiselect：true'或不？您发布的代码不包含“jqGridGetSelectedText”，“myBinding”和“menuId”的定义以及定义菜单div的相应HTML片段。等等......你可以使用一些选项的组合，这可能会有一些副作用。这可能是因为使用'singleSelectClickMode：'选择“选项解决了这个问题。人们无法解决猜测它会是什么。一个需要能够重现该问题。之后，一切都将清晰可见 – Oleg