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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
详解React-Todos入门例子
Nov 08 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python 支付整合开发包的实现
2019/01/23 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python ORM编程基础示例
2020/02/02 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
小学生班会演讲稿
2014/01/09 职场文书
大学班级学风建设方案
2014/05/01 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
海上钢琴师的观后感
2015/06/11 职场文书