例1

在HTML頁面中設置一個隱藏的菜單（前提是已經使用封裝的Easyui）

代碼：

? <div id="contextMenu_jygl" class="easyui-menu" style="width: 80px; display: none;"> ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? <div id="btn_More" data-options="iconCls:'icon-ok'" οnclick="MoreInfo()">查看個人信息</div>
? ? ? ? ? ? ? ? <div id="Pass" data-options="iconCls:'icon-remove'" οnclick="MoreInfo()">通過</div>
? ? ? ? ? ? ? ? <div id="NoPass" data-options="iconCls:'icon-remove'" οnclick="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" οnclick="revoke()">授權</div>? ?
?? ?? <div iconCls="icon-delete" οnclick="onDelete()">刪除</div>? ?
?? ?? <div iconCls="icon-xiaoxi" οnclick="onAdds()">發送個人消息</div>
?? ?? <div>? ?
?? ?????? <span>其它添加方式</span>? ?
?? ?????? <div style="width:100px;">? ?
?? ?????????? <div iconCls="icon-commbook" οnclick="saveToGroup()">存通訊錄</div>? ?
?? ?????????? <div iconCls="icon-qunzu" οnclick="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);
}
};

轉載于:https://www.cnblogs.com/sjd1118/p/7019916.html

總結

以上是生活随笔為你收集整理的EasyUI 表格点击右键添加或刷新 绑定右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。