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 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
编写React组件项目实践分析
Mar 04 Javascript
Vue组件之单向数据流的解决方法
Nov 10 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
用来解析.htgroup文件的PHP类
2012/09/05 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
webpack多页面开发实践
2017/12/18 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
js实现点击烟花特效
2020/10/14 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python定位xpath 节点位置的方法
2019/08/27 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
党员违纪检讨书
2014/02/18 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
北京英语导游词
2015/02/12 职场文书
教师求职简历自我评价
2015/03/10 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
MySQL 5.7常见数据类型
2021/07/15 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python