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 对象定义方法 简单易学
Mar 22 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
台湾家适得:Homeget
2019/02/11 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
项目计划书范文
2014/01/09 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书