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

jQuery EasyUI 树形菜单 - 使用标记创建树形菜单

news 2026/7/21 12:40:29

下面直接给你最实用、最常见的使用标记（HTML标记）创建树形菜单方法，jQuery EasyUI 的tree组件支持超级简单的<ul><li>标记方式构建树，复制粘贴就能做出左侧导航菜单、部门组织架构、分类目录等，领导最爱的“静态树形菜单”全都有！

方法1：最简单最常用 - 纯HTML标记创建树形菜单（推荐现在就用这个，3秒出效果）

<!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="width:250px;margin:20px auto;"><!-- 使用 <ul class="easyui-tree"> 标记方式创建树 --><ulclass="easyui-tree"><li><span>系统管理</span><ul><lidata-options="iconCls:'icon-user'"><span>用户管理</span></li><lidata-options="iconCls:'icon-role'"><span>角色管理</span></li><lidata-options="iconCls:'icon-dept'"><span>部门管理</span></li><li><span>权限设置</span><ul><lidata-options="iconCls:'icon-menu'"><span>菜单权限</span></li><lidata-options="iconCls:'icon-btn'"><span>按钮权限</span></li></ul></li></ul></li><lidata-options="state:'closed',iconCls:'icon-order'"><span>订单管理</span><ul><li><span>订单列表</span></li><li><span>订单统计</span></li><li><span>退款处理</span></li></ul></li><lidata-options="iconCls:'icon-product'"><span>商品管理</span><ul><li><span>商品列表</span></li><li><span>商品分类</span></li><li><span>库存管理</span></li></ul></li><lidata-options="iconCls:'icon-report'"><span>报表统计</span></li><lidata-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：标记 + 数据属性混合（更灵活控制节点）

<ulclass="easyui-tree"data-options="lines:true,animate:true"><lidata-options="id:1,state:'closed',iconCls:'icon-home'"><span>首页</span><ul><lidata-options="id:11,attributes:{url:'dashboard.php'}"><span>控制台</span></li><lidata-options="id:12"><span>个人信息</span></li></ul></li><lidata-options="id:2,iconCls:'icon-chart'"><span>数据统计</span></li><lidata-options="id:3,iconCls:'icon-logout',attributes:{url:'logout.php'}"><span>退出系统</span></li></ul>

方法3：结合左侧布局 + 主内容区域（经典后台框架结构）

<divclass="easyui-layout"data-options="fit:true"><!-- 左侧树形菜单 --><divdata-options="region:'west',title:'导航菜单',iconCls:'icon-tree',split:true"style="width:220px;"><ulclass="easyui-tree"data-options="lines:true"><!-- 同上面的树结构 --></ul></div><!-- 右侧主内容（可放tabs或iframe） --><divdata-options="region:'center'"><divid="mainTabs"class="easyui-tabs"data-options="fit:true,border:false"><divtitle="欢迎页"style="padding:20px;">欢迎使用EasyUI后台系统</div></div></div></div><script>// 点击树节点打开或切换tabfunctionaddTab(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>