jQuery-Easyui 1.2 实现多层菜单效果的代码


Posted in Javascript onJanuary 13, 2012

11年9月份项目刚开始时,找到了园中的疯狂秀才。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了!一直搁在那……还好最后找到了

今天这位朋友想要这块,就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段 呵呵
需求:菜单比如“导航菜单-基础数据-基础数据1-子菜单1”
效果:

jQuery-Easyui 1.2 实现多层菜单效果的代码

js代码如下
/****************************************Index页面******************************************/ 
var _menus = { 
basic: [{ 
"menuid": "10", 
"icon": "icon-sys", 
"menuname": "常用菜单", 
"menus": 
[{ 
"menuid": "111", 
"menuname": "基础数据1", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "113", 
"menuname": "基础数据12", 
"icon": "icon-nav", 
"url": "#" 
}, 
// 
{ 
"menuid": "119", 
"menuname": "这个是有子菜单的", 
"icon": "icon-nav", 
"menus": [{ 
"menuid": "120", 
"menuname": "子菜单1", 
"icon": "icon-nav", 
"menus": [{ 
"menuid": "120", 
"menuname": "子子菜单11111", 
"icon": "icon-nav", 
"url": "#" 
}] 
}] 
}, 
// 
{ 
"menuid": "115", 
"menuname": "基础数据13", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "117", 
"menuname": "基础数据14", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "119", 
"menuname": "基础数据15", 
"icon": "icon-nav", 
"url": "em/enterpriseChannelObtend.action" 
}] 
}, { 
"menuid": "20", 
"icon": "icon-sys", 
"menuname": "测试一", 
"menus": [{ 
"menuid": "211", 
"menuname": "测试一11", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "213", 
"menuname": "测试一22", 
"icon": "icon-nav", 
"url": "#" 
}] 
}], 
point: [{ 
"menuid": "20", 
"icon": "icon-sys", 
"menuname": "邮件列表", 
"menus": [{ 
"menuid": "211", 
"menuname": "邮件用途", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "213", 
"menuname": "邮件调整", 
"icon": "icon-nav", 
"url": "#" 
}] 
}] 
};

源码下载 jQuery-Easyui-12-three-Demo.rar
Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
20个最新的jQuery插件
Jan 13 #Javascript
JSON 数据格式介绍
Jan 13 #Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 #Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 #Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 #Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 #Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 #Javascript
You might like
PHP常用代码
2006/11/23 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
Python数据分析库pandas基本操作方法
2018/04/08 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
安全教育培训心得体会
2016/01/15 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python