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 字符串操作函数
Jul 25 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
Boostrap入门准备之border box
May 09 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
关于AOP在JS中的实现与应用详解
May 06 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 常用函数库和一些实用小技巧
2009/01/01 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python用模块pytz来转换时区
2016/08/19 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
幼儿园春游活动方案
2014/01/19 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
房产授权委托书范本
2014/09/22 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书