下面直接给你最实用、最常见的树形菜单添加节点方法，jQuery EasyUI 的 tree 组件支持超级灵活的动态添加节点（新增根节点、新增子节点、插入同级节点等），复制粘贴就能用，领导最爱的“动态部门树新增、菜单管理新增节点、分类无限添加”效果全都有！
方法1：最简单最常用 – 添加子节点（推荐现在就用这个）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI 树形菜单 - 添加节点</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px;">
<div style="margin-bottom:10px;">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-add" onclick="appendChild()">在选中节点下添加子节点</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="appendSibling()">在选中节点后添加同级节点</a>
<a href="javascript:void(0)" class="easyui-linkbutton c3" iconCls="icon-add" onclick="appendRoot()">添加根节点</a>
<a href="javascript:void(0)" class="easyui-linkbutton c1" iconCls="icon-remove" onclick="removeNode()">删除选中节点</a>
</div>
<ul id="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>
// 获取当前选中节点
function getSelectedNode(){
var node = $('#tt').tree('getSelected');
if(!node){
$.messager.alert('提示','请先选中一个节点！','warning');
return null;
}
return node;
}
// 方法1：添加子节点（最常用）
function appendChild(){
var node = getSelectedNode();
if(!node) return;
var newNode = {
text: '新节点',
iconCls: 'icon-folder'
};
$('#tt').tree('append', {
parent: node.target, // 关键：指定父节点
data: [newNode]
});
// 自动展开父节点并选中新节点
$('#tt').tree('expand', node.target);
var addedNode = $('#tt').tree('find', newNode.id); // 如果没id，可以用其他方式定位
if(addedNode){
$('#tt').tree('select', addedNode.target);
}
}
// 方法2：添加同级节点（插入到选中节点之后）
function appendSibling(){
var node = getSelectedNode();
if(!node) return;
var newNode = {
text: '新同级节点'
};
$('#tt').tree('append', {
parent: $('#tt').tree('getParent', node.target), // 获取父节点
data: [newNode]
});
}
// 方法3：添加根节点
function appendRoot(){
var newNode = {
text: '新根节点',
state: 'closed', // 默认折叠
iconCls: 'icon-setting'
};
$('#tt').tree('append', {
parent: null, // parent 为 null 表示根节点
data: [newNode]
});
}
// 方法4：删除选中节点
function removeNode(){
var node = getSelectedNode();
if(!node) return;
$.messager.confirm('确认','确定删除节点 "' + node.text + '" 及其所有子节点吗？',function(r){
if(r){
$('#tt').tree('remove', node.target);
}
});
}
</script>
</body>
</html>效果亮点：
- “在选中节点下添加子节点”：最常用，部门树新增下级部门
- “添加同级节点”：插入到当前节点后面
- “添加根节点”：新增一级菜单
- 支持删除节点（带确认）
- 新节点自动展开并选中
方法2：异步树中添加节点（结合后台保存）
function appendChildAsync(){
var node = getSelectedNode();
if(!node) return;
// 先本地添加（乐观更新）
var tempNode = {text: '新建节点（保存中...）'};
$('#tt').tree('append', {
parent: node.target,
data: [tempNode]
});
// 发请求保存到服务器
$.post('add_node.php', {
parent_id: node.id,
name: '新节点'
}, function(res){
if(res.success){
// 更新节点为服务器返回的真实数据
var addedNode = $('#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>
<div class="menu-sep"></div>
<div onclick="removeNode()" iconCls="icon-remove">删除节点</div>
</div>你现在直接复制方法1的完整代码运行，就能看到一个支持动态添加/删除节点的树形菜单了！
特别适合：菜单管理、部门组织架构、商品分类管理等需要动态增删的场景。
想要我给你一个完整的示例（异步树 + 添加节点 + 右键菜单 + 保存到服务器）？
或者你告诉我你想怎么添加（比如“弹窗输入节点名称”“拖拽排序后添加”“批量导入”），我2分钟发你精准代码，复制就能跑！
快说说你的具体需求，我手把手帮你搞定，5分钟内看到完美动态添加节点效果！
