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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
Vue header组件开发详解
Jan 26 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python爬虫基本知识
2018/03/05 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python中常用的内置方法
2019/01/28 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Python ORM编程基础示例
2020/02/02 Python
Python创建临时文件和文件夹
2020/08/05 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
爱心倡议书范文
2014/05/12 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
学习三严三实心得体会
2014/10/13 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
公司规章制度范本
2015/08/03 职场文书
小学校园广播稿
2015/08/18 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python