Easyui之Tree节点右键菜单操作讲解

情况描述

有时候我们希望在右键Tree节点的时候在右键的位置弹出右键菜单进行一些额外的操作，如下图所示，右键DEPT表弹出菜单

实现

定义右键菜单项，注意这里定义的右键菜单要加上 easyui 的 easyui-menu class

<p id="tableOperate" class="easyui-menu" style="width:120px;">
    <p id="alterTableStructure">修改此表结构</p>
    <p id="renameTable">重命名此表</p>
    <p id="delTable">删除此表</p>
</p>

通过onContextMenu为树的所有节点绑定右击响应函数，在右击响应事件回调函数中根据节点的唯一标识去定位右击的是哪个节点，我这里是根据节点的flag属性

$('#treeDemo').tree({
    // do something...

    // 为所有节点绑定右击响应事件
    onContextMenu : function(e,node){
        console.log(e,node);
        var flag = node.flag;
        switch (flag) {
        case 21111:// 具体的表
            // 阻止浏览器默认的右键菜单事件
            e.preventDefault();

            // 显示右键菜单
            $('#tableOperate').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        default:
            break;
        }
    }
});

为右键菜单绑定单击响应函数，实现对应的功能

$('#alterTableStructure').click(function(){
    // 修改表结构
});
$('#renameTable').click(function(){
    // 重命名表
});
$('#delTable').click(function(){   
    // 删除表
});