下面直接给你最实用、最常见的使用标记（HTML标记）创建树形菜单方法，jQuery EasyUI 的 tree 组件支持超级简单的 <ul><li> 标记方式构建树，复制粘贴就能做出左侧导航菜单、部门组织架构、分类目录等，领导最爱的“静态树形菜单”全都有！
方法1：最简单最常用 – 纯HTML标记创建树形菜单（推荐现在就用这个，3秒出效果）
<!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="width:250px;margin:20px auto;">
<!-- 使用 <ul class="easyui-tree"> 标记方式创建树 -->
<ul class="easyui-tree">
<li>
<span>系统管理</span>
<ul>
<li data-options="iconCls:'icon-user'"><span>用户管理</span></li>
<li data-options="iconCls:'icon-role'"><span>角色管理</span></li>
<li data-options="iconCls:'icon-dept'"><span>部门管理</span></li>
<li>
<span>权限设置</span>
<ul>
<li data-options="iconCls:'icon-menu'"><span>菜单权限</span></li>
<li data-options="iconCls:'icon-btn'"><span>按钮权限</span></li>
</ul>
</li>
</ul>
</li>
<li data-options="state:'closed',iconCls:'icon-order'">
<span>订单管理</span>
<ul>
<li><span>订单列表</span></li>
<li><span>订单统计</span></li>
<li><span>退款处理</span></li>
</ul>
</li>
<li data-options="iconCls:'icon-product'">
<span>商品管理</span>
<ul>
<li><span>商品列表</span></li>
<li><span>商品分类</span></li>
<li><span>库存管理</span></li>
</ul>
</li>
<li data-options="iconCls:'icon-report'"><span>报表统计</span></li>
<li data-options="iconCls:'icon-setting'"><span>系统设置</span></li>
</ul>
</div>
<script>
// 初始化后绑定点击事件（点击节点显示信息或加载页面）
$(function(){
$('.easyui-tree').tree({
onClick: function(node){
if(node.text){
$.messager.show({
title:'你点击了',
msg:'节点文本：' + node.text,
timeout:2000
});
// 实际项目中可以这样：
// addTab(node.text, 'content.php?menu=' + node.id);
}
}
});
});
</script>
</body>
</html>效果亮点：
- 完全用
<ul><li>标准HTML标记构建，无需写JS数据 - 支持无限级嵌套
state:'closed'表示默认折叠iconCls指定节点图标（EasyUI内置大量icon）- 自动渲染成专业树形菜单，支持展开/折叠、选中高亮
方法2：标记 + 数据属性混合（更灵活控制节点）
<ul class="easyui-tree" data-options="lines:true,animate:true">
<li data-options="id:1,state:'closed',iconCls:'icon-home'">
<span>首页</span>
<ul>
<li data-options="id:11,attributes:{url:'dashboard.php'}"><span>控制台</span></li>
<li data-options="id:12"><span>个人信息</span></li>
</ul>
</li>
<li data-options="id:2,iconCls:'icon-chart'"><span>数据统计</span></li>
<li data-options="id:3,iconCls:'icon-logout',attributes:{url:'logout.php'}"><span>退出系统</span></li>
</ul>方法3：结合左侧布局 + 主内容区域（经典后台框架结构）
<div class="easyui-layout" data-options="fit:true">
<!-- 左侧树形菜单 -->
<div data-options="region:'west',title:'导航菜单',iconCls:'icon-tree',split:true" style="width:220px;">
<ul class="easyui-tree" data-options="lines:true">
<!-- 同上面的树结构 -->
</ul>
</div>
<!-- 右侧主内容（可放tabs或iframe） -->
<div data-options="region:'center'">
<div id="mainTabs" class="easyui-tabs" data-options="fit:true,border:false">
<div title="欢迎页" style="padding:20px;">欢迎使用EasyUI后台系统</div>
</div>
</div>
</div>
<script>
// 点击树节点打开或切换tab
function addTab(title, url){
if($('#mainTabs').tabs('exists', title)){
$('#mainTabs').tabs('select', title);
} else {
$('#mainTabs').tabs('add',{
title: title,
content: '<iframe src="'+url+'" style="width:100%;height:100%;border:0;"></iframe>',
closable: true
});
}
}
// 绑定树点击事件
$('.easyui-tree').tree({
onClick: function(node){
if(node.attributes && node.attributes.url){
addTab(node.text, node.attributes.url);
}
}
});
</script>你现在直接复制方法1的完整代码保存为HTML文件运行，就能看到一个超级专业的树形菜单了！
这是最简单、最稳定的方式，特别适合静态菜单或菜单数据不经常变化的场景。
想要我给你一个更完整的后台框架示例（左侧标记树菜单 + 右侧tabs内容区 + 节点带url自动打开页面）？
或者你告诉我你的菜单结构（比如几级、哪些需要图标、哪些默认展开），我2分钟帮你写好完整标记代码，复制就能跑！
快说说你的具体需求，我手把手帮你搞定，5分钟内看到完美树形菜单效果！
