jquery EasyUi tree实现右键菜单

啦啦啦allalal

已于 2024-03-11 17:05:56 修改

阅读量654

点赞数

分类专栏： EasyUI tree 文章标签： easyui 前端 javascript

于 2022-09-05 15:33:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46388225/article/details/126706116

版权

EasyUI tree 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用JqueryEasyUitree插件来实现在树形结构中添加右键菜单的功能。通过js代码展示了如何定义不同节点的右键菜单项，并在点击父节点或子节点时显示不同的菜单选项。示例中，父节点右键菜单用于添加子节点，而子节点的菜单则包含编辑和删除操作。

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

Jquery EasyUi tree实现右键菜单

js代码：

var treeList=[{ //EasyUi tree数据
			id:-1,
			text:'父节点',
			children:[{id:1,text:'子节点1',},
			{id:2,text:'子节点2',}]
		}]
		$('#treeId').tree({
			data:treeList,
			onContextMenu: function (e, data) { //右击事件
				e.preventDefault();
				if(data.id==-1){//根据不同的节点显示不同的菜单
					$('#addId').menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				}else{
					$('#editDeleteId').menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				}
			},
		});

html部分

<div id="addId" class="easyui-menu" style="width:120px;">
	<div>增加子节点</div>
</div>
<div id="editDeleteId" class="easyui-menu" style="width:120px;">
	<div>编辑节点</div>
	<div>删除节点</div>
</div>