一个简单的使用mvc+easyUi 动态菜单显示
直接上代码
前端
1 function initMenu() { 2 $.get("/Admin/Home/GetNav", function (msg) { 3 if (msg==null) { 4 $.messager.alert("系统提示", "<font color=red><b>您没有任何权限！请联系管理员。</b></font>", "warning", function () { top.location.href = '/Admin/Member/Login'; }); 5 return; 6 } 7 var d = msg.rows; 8 var $obj = $('#navs'); 9 $obj.accordion({ animate: false, fit: true, border: false }); 10 for (var i = 0; i < d.length; i++) { 11 12 if (d[i].ParentCode == "0") 13 { 14 var html = '<ul >'; 15 var ii=d[i].NavCode; 16 for (var j = 0; j < d.length; j++) { 17 if (d[j].ParentCode == ii) { 18 html += "<li><div><a ref=\"" + d[j].NavCode + " \" href=\"javascript:void(0)\" rel=\"" + d[j].NavUrl + "\"><span class=\"icon icon-" + d[j].iconCls + "\"> </span><span class=\"nav\">" + d[j].NavName + "</span></a></div></li>"; 19 } 20 } 21 html += '</ul>'; 22 $obj.accordion('add', { 23 title: d[i].NavName, 24 content: html, 25 iconCls: 'icon-'+d[i].iconCls, 26 border: false 27 }); 28 } 29 } 30 31 var panels = $obj.accordion('panels'); 32 $obj.accordion('select', panels[0].panel('options').title); 33 34 $obj.find('li').click(function () { 35 $obj.find('li div').removeClass("selected"); 36 $(this).children('div').addClass("selected"); 37 38 var link = $(this).find('a'); 39 var title = link.children('.nav').text(); 40 var url = link.attr("rel"); 41 var code = link.attr("ref"); 42 var icon = link.children('.icon').attr('class'); 43 //alert(icon); 44 addTab(title, url, icon); 45 }).hover(function () { 46 $(this).children('div').addClass("hover"); 47 }, function () { 48 $(this).children('div').removeClass("hover"); 49 }); 50 }) 51 };
控制器
1 /// <summary> 2 /// 获取菜单列表 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult GetNav() 6 { 7 List<power_Nav> list = db.power_Nav.ToList().OrderByDescending(m => m.NavCode).ToList(); 8 var json = new 9 { 10 total = list.Count, 11 rows = list 12 }; 13 return Json(json, JsonRequestBehavior.AllowGet); 14 15 }
效果图
表结构
