快捷導(dǎo)航

jQuery-Easyui 1.2 實(shí)現(xiàn)多層菜單效果的代碼

更新時(shí)間：2012年01月13日 23:55:55 作者：

早上打開郵箱，一位朋友問我之前JQuery-Easyui 怎么做可以實(shí)現(xiàn)多級(jí)菜單

11年9月份項(xiàng)目剛開始時(shí)，找到了園中的瘋狂秀才。因?yàn)樾悴派厦娴腄emo沒有多級(jí)菜單。也是第一次接觸Easyui。好多不是明白。不過后來(lái)我們?nèi)€是搗鼓出來(lái)了。但是發(fā)現(xiàn)我們的項(xiàng)目用不了。就放棄了！一直擱在那……還好最后找到了

今天這位朋友想要這塊，就貼出來(lái)。有需要的可以看看。方法肯定不止一種。這只是我們實(shí)現(xiàn)的手段呵呵
需求：菜單比如“導(dǎo)航菜單-基礎(chǔ)數(shù)據(jù)-基礎(chǔ)數(shù)據(jù)1-子菜單1”
效果：

js代碼如下

復(fù)制代碼代碼如下:

 
/****************************************Index頁(yè)面******************************************/ 
var _menus = { 
basic: [{ 
"menuid": "10", 
"icon": "icon-sys", 
"menuname": "常用菜單", 
"menus": 
[{ 
"menuid": "111", 
"menuname": "基礎(chǔ)數(shù)據(jù)1", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "113", 
"menuname": "基礎(chǔ)數(shù)據(jù)12", 
"icon": "icon-nav", 
"url": "#" 
}, 
// 
{ 
"menuid": "119", 
"menuname": "這個(gè)是有子菜單的", 
"icon": "icon-nav", 
"menus": [{ 
"menuid": "120", 
"menuname": "子菜單1", 
"icon": "icon-nav", 
"menus": [{ 
"menuid": "120", 
"menuname": "子子菜單11111", 
"icon": "icon-nav", 
"url": "#" 
}] 
}] 
}, 
// 
{ 
"menuid": "115", 
"menuname": "基礎(chǔ)數(shù)據(jù)13", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "117", 
"menuname": "基礎(chǔ)數(shù)據(jù)14", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "119", 
"menuname": "基礎(chǔ)數(shù)據(jù)15", 
"icon": "icon-nav", 
"url": "em/enterpriseChannelObtend.action" 
}] 
}, { 
"menuid": "20", 
"icon": "icon-sys", 
"menuname": "測(cè)試一", 
"menus": [{ 
"menuid": "211", 
"menuname": "測(cè)試一11", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "213", 
"menuname": "測(cè)試一22", 
"icon": "icon-nav", 
"url": "#" 
}] 
}], 
point: [{ 
"menuid": "20", 
"icon": "icon-sys", 
"menuname": "郵件列表", 
"menus": [{ 
"menuid": "211", 
"menuname": "郵件用途", 
"icon": "icon-nav", 
"url": "#" 
}, { 
"menuid": "213", 
"menuname": "郵件調(diào)整", 
"icon": "icon-nav", 
"url": "#" 
}] 
}] 
}; 