早上打開郵箱，一位朋友問我之前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/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的jQuery-Easyui 1.2 实现多层菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。