ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航-阿里云开发者社区

ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航

2017-07-07 1991

简介：

+关注继续查看

系列目录

本节主要知识点是easyui 的手风琴加树结构做菜单导航

有园友抱怨原来菜单非常难看，但是基于原有树形无限级别的设计，没有办法只能已树形展示

先来看原来的效果

改变后的效果，当然我已经做好了，最后只放出代码供大家参考，其实网上也有这方面的资料，但是不是很好用，我还是自己写了

手风琴一直都是比较漂亮和受欢迎的，但是基于树多级别来说，做起来就比较麻烦，所以我这里也用了手风琴加树的模式来做

注：上面的图标都是乱添加的，并不代表意思

进入正文：

首先必须下载一些图标。可以自行百度网页小图标，那资源是非常多了，我在群里也分享了一组3800个的图标，我只拿其中的几百个出来用用，下载的图标都是零散的，我们必须节省用户的带宽，所以要先将图片进行压缩生成CSS样式，这里我用的工具是CSSSatyr,大家可以百度后下载即可，这里我已经为大家随便挑选了几个图片，有些同学可能还不知道有这个方法组图，现在你会了，把你的网站的图片组起来，节省带宽！非常重要，无论是加载还是用户体验都快不少

生成的CSS如下

 View Code

对应图片：

右键下载我就可以了

现在怎么用，这个很重要了

原理：首先加载手风琴为第一级目录，再让手风琴生成动态树，再循环获取树的目录

来分析一下代码：

将原来的系统的tree位置代码替换

原来的

<div id="RightTree" style="background-color: #fff;">
            <div class="panel-loading">加载中...</div>
        </div>

替换为

<div id="RightAccordion" class="easyui-accordion" >

加入JS代码

<script>
        $(function(){
            jQuery("#RightAccordion").accordion({ //初始化accordion
                fillSpace:true,
                fit:true,
                border:false,
                animate:false  
            });
            $.post("/@info/Home/GetTreeByEasyui", { "id": "0" }, //获取第一层目录
               function (data) {
                   if (data == "0") {
                       window.location = "/Account";
                   }
                   $.each(data, function (i, e) {//循环创建手风琴的项
                       var id = e.id;
                       $('#RightAccordion').accordion('add', {
                           title: e.text,
                           content: "<ul id='tree"+id+"' ></ul>",
                           selected: true,
                           iconCls:e.iconCls//e.Icon
                       });
                       $.parser.parse();
                       $.post("/@info/Home/GetTreeByEasyui?id="+id,  function(data) {//循环创建树的项
                           $("#tree" + id).tree({
                               data: data,
                               onBeforeExpand:function(node,param){  
                                   $("#tree" + id).tree('options').url = "/@info/Home/GetTreeByEasyui?id=" + node.id;
                               },   
                               onClick : function(node){  
                                   if (node.state == 'closed'){  
                                       $(this).tree('expand', node.target);  
                                   }else if (node.state == 'open'){  
                                       $(this).tree('collapse', node.target);  
                                   }else{
                                       var tabTitle = node.text;
                                       var url = "../../" + node.attributes;
                                       var icon = node.iconCls;
                                       addTab(tabTitle, url, icon);
                                   }
                               }
                           });
                       }, 'json');
                   });
               }, "json");
        });
    </script>

全面异步，JS已经非常清楚的展现

其中$.parser.parse();是再次加载Easyui

后台MVC代码

        /// <summary>
        /// 获取导航菜单
        /// </summary>
        /// <param name="id">所属</param>
        /// <returns>树</returns>
        public JsonResult GetTreeByEasyui(string id)
        {
            //加入本地化
            CultureInfo info = Thread.CurrentThread.CurrentCulture;
            string infoName = info.Name;
            if (Session["Account"] != null)
            {
                //加入本地化
                AccountModel account = (AccountModel)Session["Account"];
                List<SysModuleModel> list = homeBLL.GetMenuByPersonId(account.Id, id);
                var json = from r in list
                           select new SysModuleNavModel()
                           {
                               id = r.Id,
                               text = infoName.IndexOf("zh") > -1 || infoName == "" ? r.Name :r.EnglishName,     //text
                               attributes = (infoName.IndexOf("zh") > -1 || infoName == "" ? "zh-CN" : "en-US") + "/" + r.Url,
                               iconCls = r.Iconic,
                               state = (m_BLL.GetList(r.Id).Count > 0) ? "closed" : "open"
                               
                           };


                return Json(json);
            }
            else
            {
                return Json("0", JsonRequestBehavior.AllowGet);
            }
        }

 public class SysModuleNavModel
    {
        public string id { get; set; }
        public string text { get; set; }
        public string iconCls { get; set; }
        public string attributes { get; set; }
        public string state { get; set; }
        public List<SysModuleNavModel> children { get; set; }
    }