jqGrid 右键菜单contextmenu简单实现
鼠标右键单击表格弹出快捷菜单可以查看、编辑、新增、删除行记录，这是很多项目的常见操作，jqGrid也可以实现类似功能，本案例依赖：bootstrap-contextmenu，该项目比较老了作者已经不维护，作者推荐https://github.com/swisnl/jQuery-contextMenu。由于bootstrap-contextmenu依赖js、css资源更少，使用方便，因此本例仍然使用bootstrap-contextmenu实现快捷菜单弹出。
1、案例截图
点击“获取当前行”，浏览器控制台输出如下：
当前操作： 获取当前行
表格行数据：
Object { goods_no: "2", goods_name: "零件名称501", car_type_name: "车型501", package_name: "包装器具501", unit: "箱", snp: "0.89", box_count: "51", total_count: "51", goods_count: "51", out_count: "51", … }
2、案例代码
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid右键菜单title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js">script>
<script src="https://cdn.bootcss.com/bootstrap-contextmenu/0.3.4/bootstrap-contextmenu.min.js">script>
<style>
tr.ui-state-highlight td, tr.selected-row td{background: #dff0d8;}
style>
head>
<body>
<div class="page-content container">
<div class="page-body">
<div class="panel panel-default" id="panel-orders">
<div class="panel-heading">
表格右键菜单演示
div>
<table id="orders" class="table-bordered">table>
div>
div>
div>
<div id="context-menu">
<ul class="dropdown-menu" role="menu" style="min-width: 115px;">
<li><a href="javascript:;" tabindex="-1" menuitem=1>获取当前行a>li>
<li class="divider" style="margin: 5px 0">li>
<li><a href="javascript:;" tabindex="-1" menuitem=3>删除当前行a>li>
ul>
div>
<script type="text/javascript">
var data = [], rowIds = [], $grid = $('#orders');
function getBills() {
var rowCount = 50;
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
bill_id: i,
bill_detail: i,
goods_id: i,
unit_id: i,
package_id: i,
ref_detail: i,
goods_no: i + 1,
goods_name: '零件名称' + rowCount + i,
car_type_name: '车型' + rowCount + i,
package_name: '包装器具' + rowCount + i,
unit: i%2==0 ? '件' : '箱',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
})
}
$grid.jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
$(function() {
$grid.jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60},
{label: "零件名称", name: "goods_name", width: 180},
{label: "车型", name: "car_type_name", width: 70},
{label: "包装器具", name: "package_name", width: 70},
{label: "单位", name: "unit", width: 60 },
{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
{label: "箱数", name: "box_count", width: 40, sorttype: "number"},
{label: "需求总数", name: "total_count", width: 70, sorttype: "number"},
{label: "需求数量", name: "goods_count", width: 70,},
{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
{label: "订单号", name: "bill_no", width: 120},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000,
// cellEdit: true,
multiselect: true,
cellsubmit: 'clientArray'
});
getBills();
//
$grid.contextmenu({
target:'#context-menu',
before: function(e,context) {
$grid.data("contextmenu-rowId", $(e.target).closest('tr').attr('id'));
// execute code before context menu if shown
},
onItem: function(context,e) {
// execute on menu item selection
console.log("当前操作：", $(e.target).text());
console.log("表格行数据：", $grid.jqGrid('getRowData', $grid.data('contextmenu-rowId')));
}
})
});
script>
body>
html>
3、代码说明
1）先定义弹出菜单DOM，务必有class=“dropdown-menu”
<div id="context-menu">
<ul class="dropdown-menu" role="menu" style="min-width: 115px;">
<li><a href="javascript:;" tabindex="-1" menuitem=1>获取当前行a>li>
<li class="divider" style="margin: 5px 0">li>
<li><a href="javascript:;" tabindex="-1" menuitem=3>删除当前行a>li>
ul>
div>
2）表格构建完后，初始化快捷菜单
$grid.contextmenu({
target:'#context-menu',
before: function(e,context) {
$grid.data("contextmenu-rowId", $(e.target).closest('tr').attr('id'));
// execute code before context menu if shown
},
onItem: function(context,e) {
// execute on menu item selection
console.log("当前操作：", $(e.target).text());
console.log("表格行数据：", $grid.jqGrid('getRowData', $grid.data('contextmenu-rowId')));
}
})
注意：
before: 设置当前点击行
onItem: 处理点击的是快捷菜单哪个菜单项，可以获取当前点击行数据