栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jQuery-Easyui 1.2 实现多层菜单效果的代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jQuery-Easyui 1.2 实现多层菜单效果的代码

11年9月份项目刚开始时,找到了园中的疯狂秀才。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了!一直搁在那……还好最后找到了

今天这位朋友想要这块,就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段 呵呵
需求:菜单比如“导航菜单-基础数据-基础数据1-子菜单1”
效果:

js代码如下
复制代码 代码如下:

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
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/113355.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号