您的位置: 首页  >  文章  >  jqGrid colMenu列菜单 排序、显示隐藏、分组统计，添加、删除菜单项使用指南

jqGrid colMenu列菜单 排序、显示隐藏、分组统计，添加、删除菜单项使用指南

分类: 文章 • 2024-03-11 14:08:13

  在上篇博文“jqGrid 右键菜单contextmenu简单实现”中，探讨了jqGrid右键自定义菜单的实现，比如可以使用右键菜单实现统一的行记录编辑、删除、新增入口。本文探讨jqGrid自带的列快捷菜单colMenu使用细节，具体请参考"官方user-guide Colume menu"。

1、jqGrid自带的快捷菜单的默认功能

jqGrid colMenu列菜单 排序、显示隐藏、分组统计，添加、删除菜单项使用指南
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）截图

jqGrid colMenu列菜单 排序、显示隐藏、分组统计，添加、删除菜单项使用指南
jqGrid colMenu列菜单 排序、显示隐藏、分组统计，添加、删除菜单项使用指南

3）DEMO说明
  • 零件号设置了colmenu:false，所以没有快捷菜单触发按钮；
  • 零件名称列，设置了coloptions:{filtering:false}，所以快捷菜单没有Filter过滤项
  • 点击”colMenuAdd“按钮后，零件名称列 快捷菜单增加了一个”My menu“菜单项，点击”colMenuDelete“按钮，”My menu“菜单项将被删除。

相关推荐