我從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>
可以創建不同的方式上下文菜單。您至少需要發佈您使用的JavaScript代碼。如果您不發佈**演示**,這會再現問題,所以很難爲您提供幫助。有了JSFiddle演示,例如,不僅可以重現問題,還可以修復代碼以使其工作。我個人只使用'plugins/jquery.createcontexmenufromnavigatorbuttons.js'中的'createContexMenuFromNavigatorButtons'和'plugins/jquery.contextmenu-ui'。 – Oleg
我(錯誤地)認爲這將是一個簡單的修復常見的遷移問題。對不起 – user2340157
你可以準備**演示**,它重現了這個問題?例如,您是否使用'multiselect:true'或不?您發佈的代碼不包含「jqGridGetSelectedText」,「myBinding」和「menuId」的定義以及定義菜單div的相應HTML片段。等等......你可以使用一些選項的組合,這可能會有一些副作用。這可能是因爲使用'singleSelectClickMode:'選擇「選項解決了這個問題。人們無法解決猜測它會是什麼。一個需要能夠重現該問題。之後,一切都將清晰可見 – Oleg