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 相关文章推荐
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
子页向父页传值示例
Nov 27 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
JavaScript中this详解
Sep 01 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Three.js实现简单3D房间布局
Dec 30 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
人族 TERRAN 概述
2020/03/14 星际争霸
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
JS作用域深度解析
2016/12/29 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python实现打砖块游戏
2020/02/25 Python
django使用channels实现通信的示例
2020/10/19 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
C语言面试题
2015/10/30 面试题
英文导游欢迎词
2014/01/11 职场文书
家长对小学生的评语
2014/01/28 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书