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 pagination插件实现无刷新分页代码
Oct 13 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
javascript文本模板用法实例
Jul 31 Javascript
树结构之JavaScript
Jan 24 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
ajax php 实现写入数据库
2009/09/02 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
Ext.MessageBox工具类简介
2009/12/10 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python实现的密码强度检测器示例
2017/08/23 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python 类的特殊成员解析
2018/06/20 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python属于哪种语言
2020/08/16 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
信息专业本科生个人的自我评价
2013/10/28 职场文书
商场端午节活动方案
2014/01/29 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
安全教育主题班会总结
2015/08/14 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL