jqGrid colMenu列菜单 排序、显示隐藏、分组统计，添加、删除菜单项使用指南
在上篇博文“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代码
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid-colmenutitle>
<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%; ">
<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()">colMenuAddbutton>
<button type="button" class="btn btn-sm btn-default" onclick="colMenuDelete()">colMenuDeletebutton>
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“菜单项将被删除。