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

11年9月份项目刚开始时，找到了园中的。因为秀才上面的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                 };

 

 

 

 

 

源码下载

 

 

 

 

 

 

 

 

 

 

作者：

出处：

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