在上篇博文“jqGrid 右键菜单contextmenu简单实现”中,探讨了jqGrid右键自定义菜单的实现,比如可以使用右键菜单实现统一的行记录编辑、删除、新增入口。本文探讨jqGrid自带的列快捷菜单colMenu使用细节,具体请参考"官方user-guide Colume menu"。
1、jqGrid自带的快捷菜单的默认功能
1)列排序,升序|降序
2)显示、隐藏列
3)列过滤
4)列分组
5)冻结、解冻列
比较常用的有列显示、隐藏,列过滤。
2、如何开启表格列快捷菜单
$("#grid_id").jqGrid({
...
colMenu : true,
...
});
3、colMenu选项
1)某几列没有快捷菜单
当表格构造时colMenu设置为true,默认所有可见的表格列都有快捷菜单,可以通过设置colModel的colmenu = false屏蔽该列的快捷菜单功能,如下所示:
...
{label: "零件号", name: "goods_no", width: 60, colmenu: false},
...
2)设置不同列显示不同的快捷菜单项
默认快捷菜单项为:升序排序、降序排序、显示列、过滤列、分组统计、冻结解冻列,可以通过设置colModel的coloptions来控制默认菜单项显示还是不显示,user-guide对coloptions说明如下:
- object coloptions - object setting which action of the menu is enabled for that columns. The object have the following properties
sorting boolean - enables/disable sorting actions - default true
columns boolean - enables/disables columns reorder and moving action - default true
filtering boolean - enables disables filtering action - default true
grouping boolean - enables disables grouping action - default true
freeze boolean - enables disables freeze action - default true
...
{label: "零件名称", name: "goods_name", width: 300, coloptions:{filtering:false}},
...
上述配置,零件名称列,“过滤”菜单项不可见。
4、添加、删除自定义菜单项
1)添加自定义菜单项
$("#orders").jqGrid("colMenuAdd", "goods_name", {
id : "myid",
title: 'My menu',
funcname: myfunc
});
function myfunc(colName) {
console.log("myfunc", colName);
}
- goods_name: 表格列name
- id:菜单项id,唯一即可
- funcname:点击该菜单项的回调函数,回调函数有一个参数(表格列名称)
2)删除自定义菜单项
$("#orders").jqGrid("colMenuDelete", "myid");
5、本文DEMO
1)Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid-colmenu</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/jqueryui/1.11.0/jquery-ui.min.css" />
<link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/jquery.jqGrid.min.js"></script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/i18n/grid.locale-en.js"></script>
</head>
<body>
<div class="page-content container" style="margin-top: 30px; overflow-x: hidden;">
<div class="page-body" style="width: 100%; "> <!-- page-body -->
<div class="panel panel-default" id="panel-orders">
<div class="panel-heading">
<h3 class="panel-title">colMenu
<button type="button" class="btn btn-sm btn-default" onclick="colMenuAdd()">colMenuAdd</button>
<button type="button" class="btn btn-sm btn-default" onclick="colMenuDelete()">colMenuDelete</button>
</h3>
</div>
<table id="orders"></table>
</div>
</div>
</div>
<script type="text/javascript">
var data = [], rowIds = [];
function getBills(gridId) {
var rowCount = 10;
for (var i = 0; i < rowCount; i ++) {
data.push({
goods_no: i + 1,
goods_name: '零件名称' + rowCount + i,
car_type_name: '车型' + rowCount + i,
package_name: '包装器具' + rowCount + i,
pihao: '20190329' + i,
lj_desc: '零件描述,A零件B零件C零件A零件B零件C零件' + i,
cx_desc: '车型描述,A车型B车型C车型A车型B车型C车型' + i,
})
}
$("#" + gridId).jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function myfunc(colName) {
console.log("myfunc", colName);
}
function colMenuAdd() {
$("#orders").jqGrid("colMenuAdd", "goods_name", {
id : "myid",
title: 'My menu',
funcname: myfunc
});
}
function colMenuDelete() {
$("#orders").jqGrid("colMenuDelete", "myid");
}
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60, colmenu: false},
{label: "零件名称", name: "goods_name", width: 300, coloptions:{filtering:false}},
{label: "车型", name: "car_type_name", width: 70},
{label: "批号", name: "pihao", width: 70, },
{label: "批号2", name: "pihao2", width: 200, hidden: true },
{label: "批号3", name: "pihao3", width: 200, hidden: true},
{label: "零件描述(原生显示)", name: "lj_desc", width: 50},
{label: "零件描述(超出部分省略号)", name: "lj_desc", width: 350},
{label: "车型描述(强制换行)", name: "cx_desc", width: 150},
],
datatype: 'local',
rownumbers: true,
height: 400,
rowNum: 100,
colMenu: true,
shrinkToFit: false,
autowidth: true
});
getBills("orders");
});
</script>
</body>
</html>
2)截图
3)DEMO说明
- 零件号设置了colmenu:false,所以没有快捷菜单触发按钮;
- 零件名称列,设置了coloptions:{filtering:false},所以快捷菜单没有Filter过滤项
- 点击”colMenuAdd“按钮后,零件名称列 快捷菜单增加了一个”My menu“菜单项,点击”colMenuDelete“按钮,”My menu“菜单项将被删除。