当前位置：首页 > news >正文

jQuery EasyUI 树形菜单 - 树形菜单添加节点

news 2026/8/7 17:36:08

下面直接给你最实用、最常见的树形菜单添加节点方法，jQuery EasyUI 的tree组件支持超级灵活的动态添加节点（新增根节点、新增子节点、插入同级节点等），复制粘贴就能用，领导最爱的“动态部门树新增、菜单管理新增节点、分类无限添加”效果全都有！

方法1：最简单最常用 - 添加子节点（推荐现在就用这个）

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>EasyUI 树形菜单 - 添加节点</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><divstyle="margin:20px;"><divstyle="margin-bottom:10px;"><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-add"onclick="appendChild()">在选中节点下添加子节点</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"onclick="appendSibling()">在选中节点后添加同级节点</a><ahref="javascript:void(0)"class="easyui-linkbutton c3"iconCls="icon-add"onclick="appendRoot()">添加根节点</a><ahref="javascript:void(0)"class="easyui-linkbutton c1"iconCls="icon-remove"onclick="removeNode()">删除选中节点</a></div><ulid="tt"class="easyui-tree"data-options="lines:true, animate:true"><li><span>系统管理</span><ul><li><span>用户管理</span></li><li><span>角色管理</span></li></ul></li><li><span>商品管理</span></li><li><span>订单管理</span></li></ul></div><script>// 获取当前选中节点functiongetSelectedNode(){varnode=$('#tt').tree('getSelected');if(!node){$.messager.alert('提示','请先选中一个节点！','warning');returnnull;}returnnode;}// 方法1：添加子节点（最常用）functionappendChild(){varnode=getSelectedNode();if(!node)return;varnewNode={text:'新节点',iconCls:'icon-folder'};$('#tt').tree('append',{parent:node.target,// 关键：指定父节点data:[newNode]});// 自动展开父节点并选中新节点$('#tt').tree('expand',node.target);varaddedNode=$('#tt').tree('find',newNode.id);// 如果没id，可以用其他方式定位if(addedNode){$('#tt').tree('select',addedNode.target);}}// 方法2：添加同级节点（插入到选中节点之后）functionappendSibling(){varnode=getSelectedNode();if(!node)return;varnewNode={text:'新同级节点'};$('#tt').tree('append',{parent:$('#tt').tree('getParent',node.target),// 获取父节点data:[newNode]});}// 方法3：添加根节点functionappendRoot(){varnewNode={text:'新根节点',state:'closed',// 默认折叠iconCls:'icon-setting'};$('#tt').tree('append',{parent:null,// parent 为 null 表示根节点data:[newNode]});}// 方法4：删除选中节点functionremoveNode(){varnode=getSelectedNode();if(!node)return;$.messager.confirm('确认','确定删除节点 "'+node.text+'" 及其所有子节点吗？',function(r){if(r){$('#tt').tree('remove',node.target);}});}</script></body></html>

效果亮点：

“在选中节点下添加子节点”：最常用，部门树新增下级部门
“添加同级节点”：插入到当前节点后面
“添加根节点”：新增一级菜单
支持删除节点（带确认）
新节点自动展开并选中

方法2：异步树中添加节点（结合后台保存）

functionappendChildAsync(){varnode=getSelectedNode();if(!node)return;// 先本地添加（乐观更新）vartempNode={text:'新建节点（保存中...）'};$('#tt').tree('append',{parent:node.target,data:[tempNode]});// 发请求保存到服务器$.post('add_node.php',{parent_id:node.id,name:'新节点'},function(res){if(res.success){// 更新节点为服务器返回的真实数据varaddedNode=$('#tt').tree('find',tempNode.id);// 临时节点$('#tt').tree('update',{target:addedNode.target,text:res.node.name,id:res.node.id,iconCls:res.node.icon});$.messager.show({title:'成功',msg:'节点添加成功'});}else{// 失败回滚$('#tt').tree('remove',addedNode.target);$.messager.alert('错误',res.msg);}},'json');}

方法3：插入节点到指定位置（insert 方法）

// 在选中节点之前插入$('#tt').tree('insert',{before:node.target,data:{text:'插入到前面'}});// 在选中节点之后插入$('#tt').tree('insert',{after:node.target,data:{text:'插入到后面'}});

方法4：右键菜单添加节点（更专业）

$('#tt').tree({onContextMenu:function(e,node){e.preventDefault();$('#mm').menu('show',{left:e.pageX,top:e.pageY});$('#tt').tree('select',node.target);}});// 右键菜单HTML<div id="mm"class="easyui-menu"><div onclick="appendChild()"iconCls="icon-add">添加子节点</div><div onclick="appendSibling()"iconCls="icon-add">添加同级节点</div><divclass="menu-sep"></div><div onclick="removeNode()"iconCls="icon-remove">删除节点</div></div>