EasyUI 表格点击右键添加或刷新 绑定右键菜单
Posted 模糊的星空
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI 表格点击右键添加或刷新 绑定右键菜单相关的知识,希望对你有一定的参考价值。
例1
在html页面中设置一个隐藏的菜单(前提是已经使用封装的Easyui)
代码:
<div id="contextMenu_jygl" class="easyui-menu" style="width: 80px; display: none;">
<div id="btn_More" data-options="iconCls:‘icon-ok‘" onclick="MoreInfo()">查看个人信息</div>
<div id="Pass" data-options="iconCls:‘icon-remove‘" onclick="MoreInfo()">通过</div>
<div id="NoPass" data-options="iconCls:‘icon-remove‘" onclick="MoreInfo()">不通过</div>
</div>
第二步:
编写js代码
$("#dt").datagrid({
onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件
e.preventDefault(); //阻止浏览器捕获右键事件
$(this).datagrid("clearSelections"); //取消所有选中项
$(this).datagrid("selectRow", rowIndex); //根据索引选中该行
$(‘#contextMenu_jygl‘).menu(‘show‘, {
left: e.pageX,//在鼠标点击处显示菜单
top: e.pageY
});
e.preventDefault(); //阻止浏览器自带的右键菜单弹出
},
})
例2
- <table id="dg" class="easyui-datagrid" data-options="onRowContextMenu: function (e, rowIndex, rowData) {
- $(‘#mm‘).menu(‘show‘, { left: e.pageX, top: e.pageY }); e.preventDefault();
- }
- <tr>.....</tr>
- <tr>.....</tr>
- <tr>.....</tr>
- <tr>.....</tr>
- </table>
<div id="mm" class="easyui-menu" style="width:100px;display: none">
<div iconCls="icon-shield" onclick="revoke()">授权</div>
<div iconCls="icon-delete" onclick="onDelete()">删除</div>
<div iconCls="icon-xiaoxi" onclick="onAdds()">发送个人消息</div>
<div>
<span>其它添加方式</span>
<div style="width:100px;">
<div iconCls="icon-commbook" onclick="saveToGroup()">存通讯录</div>
<div iconCls="icon-qunzu" onclick="deptImport()">导入</div>
</div>
</div>
</div>
- 右击表格数据行显示效果图如下:
例三
<table id="StorageManagerId" class="easyui-datagrid" style="width:auto;height:500px;" data-options="onRowContextMenu: function (e, rowIndex, rowData) {
$(‘#mmStorageManager‘).menu(‘show‘, { left: e.pageX, top: e.pageY }); e.preventDefault();
} "></table>
<div id="mmStorageManager" class="easyui-menu" style="width:100px;display: none">
<div id="gridViewAdd" iconcls="icon-shield">添加</div>
<div id="gridViewRefresh" iconcls="icon-shield">涮新</div>
</div>
刷新
$(‘#mmCustomerCHis #gridViewRefresh‘).on("click", function () {
$(‘#‘ + tableId).datagrid(‘reload‘);
});
添加
$(‘#mmStorageManager #gridViewAdd‘).on("click", function () {
datagridAdd();
});
function datagridAdd() {
var data = $(‘#‘ + tableId).datagrid(‘getData‘);
if (data.rows.length < 6) {
dataOption.ListOperation(StorageManager, null, 2, "", "/StorageManager/BaseStorageManagerOption", tableId, refreshNode);
}
else {
showTime("最多只能拥有5个仓库!",3);
}
};
以上是关于EasyUI 表格点击右键添加或刷新 绑定右键菜单的主要内容,如果未能解决你的问题,请参考以下文章
Delphi -- 创建 桌面发送到...快速启动栏开始菜单程序菜单右键菜 单