【发布时间】：2015-04-05 11:56:52
【问题描述】：
下面的代码用于根据答案How to change column name in column chooser pop up in jqgrid?从顶级工具栏生成上下文菜单
工具栏也包含选择元素。它在上下文菜单中显示为 Form0...Form9，并使上下文菜单更宽。 如何从上下文菜单中排除它？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>https://stackoverflow.com/q/29365758/315935</title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!--<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>-->
<!--<link rel="stylesheet" href="../jqGrid/css/ui.jqgrid.css">-->
<link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.css">
<style>
html, body { font-size: 75%; }
.ui-datepicker select.ui-datepicker-year,
.ui-datepicker select.ui-datepicker-month {
color: black
}
</style>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!--<script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>-->
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
<!--<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>-->
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.jqgrid.showhidecolumnmenu.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.contextmenu-ui.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script>
<script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.js"></script>
<script>
//<![CDATA[
/*global $ */
/*jslint browser: true, unparam: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2007-10-01", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
setTimeout(function () {
initDateEdit(elem);
}, 50);
};
$grid.jqGrid({
data: mydata,
colNames: ["Client", "Date", "Closed", "Shipped via", "Amount", "Tax", "Total", "Notes"],
colModel: [
{ name: "name", align: "center", width: 65, editrules: {required: true} },
{ name: "invdate", width: 125, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, template: "booleanCheckboxFa" },
{ name: "ship_via", width: 105, align: "center", formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "amount", width: 75, template: "number" },
{ name: "tax", width: 52, template: "number" },
{ name: "total", width: 60, template: "number" },
{ name: "note", width: 60, sortable: false, edittype: "textarea" }
],
rowNum: 10,
rowList: [5, 10, 20],
iconSet: "fontAwesome",
toppager: true,
pager: true,
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true },
//autoresizeOnLoad: true,
autoencode: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
rownumbers: true,
hidegrid: false,
caption: "Try right mouse click inside of the grid body"
}).jqGrid("navGrid")
.jqGrid("setGroupHeaders", {
useColSpanStyle: true,
groupHeaders: [
{ startColumnName: "amount", numberOfColumns: 3, titleText: "<em>Price</em>" },
{ startColumnName: "closed", numberOfColumns: 2, titleText: "Shiping" }
]
})
.jqGrid("showHideColumnMenu")
.jqGrid("createContexMenuFromNavigatorButtons", $grid.jqGrid("getGridParam", "toppager"));
var i, layout = 1,
selectElem= '<select tabindex="-1" id="_layout">';
for (i=0; i<10; i++) {
selectElem += '<option value="'+i+'" ';
if (i==layout)
selectElem += ' selected';
selectElem += '>Form ' + i + '</option>'
}
$grid.jqGrid('navButtonAdd', '#list_toppager', {
caption: '<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div">' +
selectElem +
'</select>' +
'</div></td>',
buttonicon:'',
});
});
//]]>
</script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="list"></table>
</div>
</body>
</html>
更新
预期的结果是最后一行没有出现在上下文菜单中：
【问题讨论】：
-
首先我认为你应该将
caption:的值减少到selectElem +'</select>'。我可以在上下文菜单中包含来自按钮的 HTML 片段。<select>将放置在案例中的菜单内。我仍然不完全理解你想要什么行为？工具栏内的选择可以更改。用户可以更改选择的项目。将<select>简单地放置在菜单内不会有同样的效果，因为菜单项内的click将关闭该项目，而不是打开菜单项内的下拉选择（在菜单上方）。 -
预期的行为是根本不在上下文菜单中呈现它，或者让它像在工具栏选择中一样：第一次单击打开下拉菜单，第二次单击选择项目并调用 onchange
-
你不应该忘记菜单是由
contextMenu插件创建的。第一次点击会被contextMenu插件处理，隐藏菜单然后调用菜单项的绑定函数。创建createContexMenuFromNavigatorButtons的绑定函数模拟原工具栏菜单中div的click。所有这些都只对按钮有意义，但对<select>没有意义。即使创建了 custom 绑定功能，也必须显示以前隐藏的菜单。顺便说一句，从菜单项中选择不存在“onchange”处理程序。一切都不是那么容易。 -
同一 div 内的分页器未呈现，因此有代码选择要呈现的元素。也许要添加检查，以便工具栏中的
select元素不会添加到上下文菜单中。或者检查一些神奇的类名或提供方法来控制它 -
目前工具栏中没有没有选择，比如没有三态按钮。顺便说一下，该插件应该与三态按钮一起使用，但带有
<select>的按钮当前可以解释为通用 HTML 片段。所以我看到了任何解决方案，要么在导航栏中引入新的“选择”按钮，要么通过在createContexMenuFromNavigatorButtons创建的菜单中提供自定义菜单项的回调。问题只是回调应该如何看起来更好？
标签： jquery css jqgrid free-jqgrid