我的网站上有一个内部使用的jqGrid,列出了我们所有的用户。在每个用户/行上,我希望能够应用各种选项(取决于该行中的数据)。不是向分页器添加导航按钮,而是在右键单击行时显示上下文菜单会更有意义。
我们目前在我们的网站上导入this jQuery contextMenu plugin,因此最好以某种方式将其整合到我的jqGrid中。
我的jqGrid缩小到基础看起来像这样:
$("#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});
上下文菜单中我需要的一些选项:
如何设置带有变量选项的上下文菜单(取决于特定行的值),并定义单击选项时会发生什么?
答案 0 :(得分:2)
一般来说,the jQuery contextMenu plugin与jqGrid的使用在我看来非常简单。您可以将菜单绑定到网格主体。需要知道rowid是id
元素的<tr>
属性的值,而具有真实数据的tr元素具有类.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
回调的代码修改为您的任何要求。