jQuery-Easyui 1.2 实现多层菜单

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 602 次

早上打开邮箱，一位朋友问我之前JQuery-Easyui怎么做可以实现多级菜单。。。11年9月份项目刚开始时，找到了园中的疯狂秀才http://www.cnblogs.com/hxling/arch

早上打开邮箱，一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单。。。

11年9月份项目刚开始时，找到了园中的疯狂秀才http://www.cnblogs.com/hxling/archive/2010/09/06/1819260.html。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了！一直搁在那……还好最后找到了

　　今天这位朋友想要这块，就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段呵呵

需求：菜单比如“导航菜单-基础数据-基础数据1-子菜单1”

效果：

js代码如下

 1 /****************************************Index页面******************************************/
 2 
 3 var _menus = {
 4     basic: [{
 5         "menuid": "10",
 6         "icon": "icon-sys",
 7         "menuname": "常用菜单",
 8         "menus":
 9                  [{
10                      "menuid": "111",
11                      "menuname": "基础数据1",
12                      "icon": "icon-nav",
13                      "url": "#"
14                  }, {
15                      "menuid": "113",
16                      "menuname": "基础数据12",
17                      "icon": "icon-nav",
18                      "url": "#"
19                  },
20         //
21                   {
22                   "menuid": "119",
23                   "menuname": "这个是有子菜单的",
24                   "icon": "icon-nav",
25                   "menus": [{
26                       "menuid": "120",
27                       "menuname": "子菜单1",
28                       "icon": "icon-nav",
29                       "menus": [{
30                       "menuid": "120",
31                       "menuname": "子子菜单11111",
32                       "icon": "icon-nav",
33                       "url": "#"
34                       }]
35                       }]
36 
37                   },
38 
39         //
40                  {
41                  "menuid": "115",
42                  "menuname": "基础数据13",
43                  "icon": "icon-nav",
44                  "url": "#"
45              }, {
46                  "menuid": "117",
47                  "menuname": "基础数据14",
48                  "icon": "icon-nav",
49                  "url": "#"
50              }, {
51                  "menuid": "119",
52                  "menuname": "基础数据15",
53                  "icon": "icon-nav",
54                  "url": "em/enterpriseChannelObtend.action"
55 }]
56     }, {
57         "menuid": "20",
58         "icon": "icon-sys",
59         "menuname": "测试一",
60         "menus": [{
61             "menuid": "211",
62             "menuname": "测试一11",
63             "icon": "icon-nav",
64             "url": "#"
65         }, {
66             "menuid": "213",
67             "menuname": "测试一22",
68             "icon": "icon-nav",
69             "url": "#"
70 }]
71 }],
72             point: [{
73                 "menuid": "20",
74                 "icon": "icon-sys",
75                 "menuname": "邮件列表",
76                 "menus": [{
77                     "menuid": "211",
78                     "menuname": "邮件用途",
79                     "icon": "icon-nav",
80                     "url": "#"
81                 }, {
82                     "menuid": "213",
83                     "menuname": "邮件调整",
84                     "icon": "icon-nav",
85                     "url": "#"
86 }]
87 
88 }]
89                 };

源码下载

jQuery-Easyui-1.2-三层-Demo.rar

作者：PEPE
出处：http://pepe.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。