easyui学习笔记之动态创建手风琴菜单

最新推荐文章于 2022-07-23 19:32:04 发布

原创最新推荐文章于 2022-07-23 19:32:04 发布 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

本文记录了使用EasyUI库动态生成手风琴菜单的过程，通过JSON数据片段进行解析，实现灵活的菜单结构。适合需要在网页中构建可折叠、层次清晰的导航菜单的开发者参考。

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

</pre><p>html</p><p></p><pre name="code" class="html"><pre name="code" class="html"><div region="west" split="true" title="导航菜单" style="width:200px;" id="west">
				<div class="easyui-accordion" fit="true" border="false">
					<!--  导航内容 -->
					<div title="菜单一" data-options="selected:true,iconCls:'icon-folder'" style="padding: 10PX;width: 100%;" id="accoridDiv">
						<ul>
							<li>
								<div><a href="#" target="mainFrame">菜单一一</a></div>
							</li>
							<li>
								<div><a href="#" target="mainFrame">菜单一二</a></div>
							</li>
						</ul>
					</div>
			</div>

js代码

<pre name="code" class="javascript">$.each(_menus.menus, function(i, n) {
			menulist += "<ul>";
			$.each(n.menus, function(j, o) {
				menulist += "<li><div><a target='mainFrame'>" + o.menuname + "</a></div></li> ";
			})
			menulist += "</ul>";
		$(".easyui-accordion").accordion("add", {
			title: n.menuname,
			content:menulist
		})
		menulist = "";  //每次循环完子菜单后清空，避免内容重复
	})

json片段

var _menus = {
			"menus": [{
				"menuid": "1",
				"menuname": "系统管理",
				"menus": [{
					"menuname": "菜单管理",
					"url": "http://www.16sucai.com"
				}, {
					"menuname": "添加用户",
				}, {
					"menuname": "用户管理",
				}, {
					"menuname": "角色管理",
				}, {
					"menuname": "权限设置",
				}, {
					"menuname": "系统日志",
				}]
			}, {
				"menuid": "8",
				"menuname": "员工管理",
				"menus": [{
					"menuname": "员工列表",
				}, {
					"menuname": "视频监控",
				}]
			}, {
				"menuid": "56",
				"menuname": "部门管理",
				"menus": [{
					"menuname": "添加部门",
				}, {
					"menuname": "部门列表",
				}]
			}, {
				"menuid": "28",
				"menuname": "财务管理",
				"menus": [{
					"menuname": "收支分类",
				}, {
					"menuname": "报表统计",
				}, {
					"menuname": "添加支出",
				}]
			}, {
				"menuid": "39",
				"menuname": "商城管理",
				"menus": [{
					"menuname": "商品分",
				}, {
					"menuname": "商品列表",
				}, {
					"menuname": "商品订单",
				}]
			}]
		};