jQuery MiniUI 开发教程表格控件表格：右键菜单（十五）

最新推荐文章于 2022-10-06 17:47:29 发布

iteye_4698

最新推荐文章于 2022-10-06 17:47:29 发布

阅读量737

点赞数

分类专栏： jquery 文章标签： jquery UI Ajax JavaScript datagrid ViewUI

jquery 专栏收录该内容

69 篇文章

订阅专栏

本文主要介绍了表格右键菜单的相关操作。包括创建ContextMenu、设置表格contextmenu、监听beforeopen事件对右键菜单进行精确控制，还提到了表头菜单headerContextMenu的设置方法，通过代码示例展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]表格：右键菜单[/b]
[img]http://www.miniui.com/docs/api/images/contextmenu_grid.gif[/img]

参考示例：[url=http://www.miniui.com/demo/datagrid/contextmenu.html]右键菜单[/url]

[b]一：创建ContextMenu[/b]
<ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">
<li name="add" iconCls="icon-add" onclick="onAdd">新增</li>
<li name="edit" iconCls="icon-edit" onclick="onEdit">编辑节点</li>
<li name="remove" iconCls="icon-remove" onclick="onRemove">删除节点</li>
</ul>

[b]二：设置表格contextmenu[/b]
<div id="datagrid1" class="mini-datagrid"
contextMenu="#gridMenu">
......
</div>

[b]三：监听beforeopen事件[/b]
监听右键菜单的beforeopen事件，可以对右键菜单精确控制。
function onBeforeOpen(e) {
var grid = mini.get("datagrid1");
var menu = e.sender;

var row = grid.getSelected();
var rowIndex = grid.indexOf(row);
if (!row || rowIndex== 0) {
e.cancel = true;
//阻止浏览器默认右键菜单
e.htmlEvent.preventDefault();
return;
}
////////////////////////////////
var editItem = mini.getbyName("edit", menu);
var removeItem = mini.getbyName("remove", menu);
editItem.show();
removeItem.enable();

if (rowIndex == 1) {
editItem.hide();
}
if (rowIndex == 1) {
removeItem.disable();
}

}

[b]四：表头菜单headerContextMenu[/b]
创建同样一个menu菜单对象，设置给表格的headerContextMenu属性即可。