创建jqGrid上下文菜单的方法如下:
在使用jqGrid之前,需要引入jQuery和jqGrid插件。可以从官方网站下载,也可以使用CDN。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.5.2/css/ui.jqgrid.min.css" />
首先,需要创建一个jqGrid表格。
$("#grid").jqGrid({
url: 'data.json',
datatype: "json",
colModel: [
{ label: 'ID', name: 'id', key: true, width: 70 },
{ label: 'Name', name: 'name', width: 150 },
{ label: 'Age', name: 'age', width: 80 },
{ label: 'Address', name: 'address', width: 200 }
],
viewrecords: true,
width: 780,
height: 200,
rowNum: 10,
pager: "#pager"
});
使用jQuery的.contextMenu()
方法创建上下文菜单。
$("#grid").contextMenu({
selector: 'td',
build: function ($trigger, e) {
return {
callback: function (key, options) {
var rowId = $(e.target).closest("tr").attr("id");
var rowData = $("#grid").jqGrid('getRowData', rowId);
switch (key) {
case 'edit':
editRow(rowId, rowData);
break;
case 'delete':
deleteRow(rowId, rowData);
break;
}
},
items: {
"edit": { name: "Edit", icon: "edit" },
"delete": { name: "Delete", icon: "delete" },
}
};
}
});
function editRow(rowId, rowData) {
// 编辑行的逻辑
}
function deleteRow(rowId, rowData) {
// 删除行的逻辑
}
为了使上下文菜单看起来更美观,可以引入jQuery UI主题。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
这样就可以在jqGrid表格上创建上下文菜单了。当用户右键点击表格中的单元格时,会弹出一个上下文菜单,其中包含“编辑”和“删除”两个选项。用户可以根据需要进行选择。
领取专属 10元无门槛券
手把手带您无忧上云