当前位置： 移动技术网 > IT编程>网页制作>CSS > Easyui之Tree节点右键菜单操作讲解

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

2018年03月21日  | 移动技术网IT编程  | 我要评论

非诚勿扰20120603,热血无赖按键延迟,jar of love歌词

情况描述

有时候我们希望在右键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(){   
    // 删除表
});

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网