• MVC+EasyUI 菜单导航的实现


    一个简单的使用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 + "">&nbsp;</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         }

    效果图

    表结构

  • 相关阅读:
    误区30日谈25-30
    误区30日谈21-24
    误区30日谈16-20
    误区30日谈11-15
    误区30日谈6-10
    eclipse如何导入java项目文件
    Spring配置bean文件的底层实现方式
    hibernate中get,load,list,iterate的用法及比较
    MySQL数据库的事务管理
    单元格样式
  • 原文地址:https://www.cnblogs.com/huzhimin/p/4634312.html
Copyright © 2020-2023  润新知