MVC+EasyUI 菜单导航的实现
一个简单的使用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
MVC+EasyUI 菜单导航的实现的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(38)-Easyui-accordion+tree漂亮的菜单导航
系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看,但是基于原有树形无限级别的设计,没有办法只能已树形展示 先来看原来的效果 改变后的效果,当然我已经做好了 ...
- 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(二)菜单导航
一.前言 上篇博客中已经总体的说了一下权限系统的思路和表结构设计,那接下来我们就要进入正文了,先从菜单导航这个功能开始. 二.实现 这个页面基本不用什么需求分析了,大家都很明白,不过在这个页面要多维护 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(38)-Easyui-accordion+tree漂亮的菜单导航
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(38)-Easyui-accordion+tree漂亮的菜单导航 系列目录 本节主要知识点是easyui ...
- 基于easyUI实现权限管理系统(二)——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. menu.jsp:菜单导航主界面 <!DOCTYPE html PUBLIC "-//W ...
- 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事(续)——主界面
引言 在UML系列学习中的小插曲:看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 在上篇中只拿登录界面练练手,不把主界面抠出来,实在难受,严重的强迫症啊.之前一直在总 ...
- ASP.NET MVC +EasyUI 权限设计(一)开篇
在前一段时间中,老魏的确非常的忙碌,Blog基本上没有更新了,非常的抱歉,那么在后面的时间中,老魏会尽量的抽时间来写的,可能时间上就不太富裕了.今天开始呢,老魏会和大家分享一下关于权限设计的有关文章, ...
- EF和MVC系列文章导航:EF Code First、DbContext、MVC
对于之前一直使用webForm服务器控件.手写ado.net操作数据库的同学,突然来了EF和MVC,好多新概念泉涌而出,的确犹如当头一棒不知所措.本系列文章可以帮助新手入门并熟练使用EF和MVC,有了 ...
- 菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码
比如我们要写一个菜单导航/URHere/面包屑,如: 首页 > 个人中心 > 修改密码 代码: <ul> <li><a href="javascri ...
- 转-TabHost组件(一)(实现底部菜单导航)
http://www.cnblogs.com/lichenwei/p/3974009.html 什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用wind ...
随机推荐
- JavaScript:substr vs substring vs slice
参考文章: JavaScript取子串方法slice,substr,substring对比表
- 基于数据库MySQL的简易学生信息管理系统
通过这几天学习Mysql数据库,对其也有了基本的了解,为了加深印象,于是就写了一个最简易的学生信息管理系统. 一:基本要求 1.通过已知用户名和密码进行登录: 2.可以显示菜单: 3.可以随时插入学生 ...
- 细节小bug
1. function devChange(value){ $("#multipleLeft").empty(); ReportRemote.getDeviceFlow(value ...
- pdf生成器
apose, http://www.codeproject.com/Articles/570682/PDF-File-Writer-Csharp-Class-Library-Version
- 移动端头像上传AJax input file
jQuery中的Ajax不能支持 input file 需要用ajaxupload.js但是先需要引入jQuery文件 <script src="__PUBLIC__/js/ajaxf ...
- safari 日期对象新建new Date( timeStr ) 参数TimeStr格式
这是一个浏览器兼容的问题,在此总结一下,别老在这掉坑. 先坐下测试 var timeStrArray = [ '2016-10-04', '2016.10.04', '2016/10/04', '10 ...
- Android倒计时:计算两个时间将得到的时间差转化为倒计时(xx时xx分xx秒格式)
首先是一个自定义控件: public class RushBuyCountDownTimerView extends LinearLayout { // 小时,十位 private TextView ...
- laypage
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> < ...
- js判断类型方法
在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null,Boolean, Number和String:复杂数据类型是Object,Object中 ...
- Java中对session的简单操作
1.jsp中操作session <% String name=(String)request.getSession().getAttribute("username"); / ...