问题描述
我在我们的网站上有一个供内部使用的 jqGrid,它列出了我们所有的用户.在每个用户/行上,我希望能够应用各种选项(取决于该行中的数据).与其将导航按钮添加到寻呼机,不如在右键单击一行时出现一个上下文菜单更有意义.
I have a jqGrid for internal use on our site that lists all our users. On each user/row, I would like to be able to apply various options (depending on the data in that row). Instead of adding navbuttons to the pager, it would make more sense to have a context menu that appears on right-click of a row.
我们目前在我们的网站上导入了这个 jQuery contextMenu 插件,所以它会比某种方式更可取将其集成到我的 jqGrid 中.
We currently have this jQuery contextMenu plugin imported on our site, so it would be preferable to somehow integrate that into my jqGrid.
我的 jqGrid 缩小到基础看起来像这样:
My jqGrid scaled down to basics looks something like this:
$("#users").jqGrid({
datatype: 'json',
url: 'myMethodURL',
gridview: true,
colModel: [
{name: 'id', label: 'User ID', hidden:true},
{name: 'lastname', label: 'Last Name'},
{name: 'firstname', label: 'First Name'},
{name: 'status', label: 'Status', stype: 'select', searchoptions: {value: ':All;ACTIVE:Active;INACTIVATED:Inactive;PENDING APPROVAL:Pending Approval;'}},
... more fields ...
],
height:'auto',
autowidth:true,
caption:'Users',
rowNum:20,
rowList:[10,20,50],
sortorder:'asc',
sortname: 'lastname',
ignoreCase: true, // case-insensitive filtering
pager: '#pager',
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
cell: "", //not used
id: "0" //will default first column as ID
},
postData: postData
});
$("#users").jqGrid("filterToolbar", {searchOnEnter: true});
上下文菜单中我需要的一些选项:
Some of the options I need in the context menu:
- 激活或停用(取决于用户当前是否处于活动/非活动状态 - 基本上需要切换)
- 处理待处理用户(应仅在用户状态为待处理"时显示)
- 编辑用户信息
- 发送重置密码链接
如何设置带有可变选项的上下文菜单(取决于该特定行的值),并定义单击选项时会发生什么?
How can I set up a context menu with variable options (dependent on that particular row's values), and define what happens when an option is clicked?
推荐答案
jQuery contextMenu 插件的一般用法 用 jqGrid 在我看来很简单.您可以将菜单绑定到网格体.只需知道 rowid 是 <tr>
元素的 id
属性的值,具有真实数据的 tr 元素具有类 .jqgrow.
In general the usage of the jQuery contextMenu plugin with jqGrid seems to me very simple. You can just bind the menu to the grid body. One need just know that the rowid is the value of
id
attribute of <tr>
element and tr elements which have the real data have the class .jqgrow
.
因此代码可能如下所示
$("#users").jqGrid({
datatype: 'json',
...
}).contextMenu({
selector: ".jqgrow",
build: function ($trigger, e) {
// this callback is executed every time the menu is to be shown
// its results are destroyed every time the menu is hidden
// e is the original contextmenu event
var $tr = $(e.target).closest("tr.jqgrow"),
rowid = $tr.attr("id"),
item = $grid.jqGrid("getRowData", rowid);
// item contains now the data of the row and we can
// build the context menu dynamically
if (item.status === "ACTIVE") {
return {
callback: function (key, options) {
var m = "clicked: " + key + " on rowid=" + rowid +
" (" + item.firstname + " " + item.lastname + ")";
alert(m);
},
items: {
edit: {name: "Edit", icon: "edit"},
cut: {name: "Cut", icon: "cut"},
copy: {name: "Copy", icon: "copy"},
paste: {name: "Paste", icon: "paste"},
delete: {name: "Delete", icon: "delete"},
sep1: "---------",
quit: {name: "Quit", icon: function($element, key, item) {
return 'context-menu-icon context-menu-icon-quit';
}}
}
};
} else {
return {
callback: function (key, options) {
var m = "clicked: " + key + " on rowid=" + rowid +
" (" + item.firstname + " " + item.lastname + ")";
alert(m);
},
items: {
delete: {name: "Delete", icon: "delete"},
sep1: "---------",
quit: {name: "Quit", icon: function($element, key, item) {
return 'context-menu-icon context-menu-icon-quit';
}}
}
};
}
}
});
查看演示 https://jsfiddle.net/OlegKi/37rb593h/.您可以根据自己的要求修改
build
回调的代码.
See the demo https://jsfiddle.net/OlegKi/37rb593h/. You can modify the code of
build
callback to any your requirements.
这篇关于如何为我的 jqGrid 设置 contextMenu?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!