您的位置:首页 > 产品设计 > UI/UE

MVC+EasyUI 菜单导航的实现

2015-07-09 21:33 801 查看
一个简单的使用mvc+easyUi 动态菜单显示

直接上代码

前端

function initMenu() {
$.get("/Admin/Home/GetNav", function (msg) {
if (msg==null) {
$.messager.alert("系统提示", "<font color=red><b>您没有任何权限!请联系管理员。</b></font>", "warning", function () { top.location.href = '/Admin/Member/Login'; });
return;
}
var d = msg.rows;
var $obj = $('#navs');
$obj.accordion({ animate: false, fit: true, border: false });
for (var i = 0; i < d.length; i++) {

if (d[i].ParentCode == "0")
{
var html = '<ul >';
var ii=d[i].NavCode;
for (var j = 0; j < d.length; j++) {
if (d[j].ParentCode == ii) {
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>";
}
}
html += '</ul>';
$obj.accordion('add', {
title: d[i].NavName,
content: html,
iconCls: 'icon-'+d[i].iconCls,
border: false
});
}
}

var panels = $obj.accordion('panels');
$obj.accordion('select', panels[0].panel('options').title);

$obj.find('li').click(function () {
$obj.find('li div').removeClass("selected");
$(this).children('div').addClass("selected");

var link = $(this).find('a');
var title = link.children('.nav').text();
var url = link.attr("rel");
var code = link.attr("ref");
var icon = link.children('.icon').attr('class');
//alert(icon);
addTab(title, url, icon);
}).hover(function () {
$(this).children('div').addClass("hover");
}, function () {
$(this).children('div').removeClass("hover");
});
})
};


控制器

/// <summary>
/// 获取菜单列表
/// </summary>
/// <returns></returns>
public ActionResult GetNav()
{
List<power_Nav> list = db.power_Nav.ToList().OrderByDescending(m => m.NavCode).ToList();
var json = new
{
total = list.Count,
rows = list
};
return Json(json, JsonRequestBehavior.AllowGet);

}


效果图





表结构



www.646708090.com
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: