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基本对象
Jan 11 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
js实现的订阅发布者模式简单示例
Mar 14 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输出XML到页面的3种方法详解
2013/06/06 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 可爱的大小写
2008/09/06 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python中Django文件上传方法详解
2020/08/05 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
社区学习十八大感想
2014/01/22 职场文书
渡河少年教学反思
2014/02/12 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
学校校庆演讲稿
2014/05/22 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
合作合同协议书范本
2015/01/27 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
分享一些Java的常用工具
2021/06/11 Java/Android