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

简介:

系列目录

本节主要知识点是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; }
    }
复制代码

目前已经完工,非常漂亮的一次转换。

也完美的支持了英文版本,其实2个是可以并存的,有的用户比较喜欢tree,因为很直观,只是比较丑陋,这个设置应该让用户去自动选择

注:补充一个经常被问到的问题。关于菜单图标不显示,还是原来的图标问题,这是由于你引入CSS的先后顺序问题导致的,请注意引用的先后


本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/3824368.html,如需转载请自行联系原作者

相关文章
|
7天前
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
17 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
|
17天前
|
SQL 设计模式 开发框架
.NET异步有多少种实现方式?(异步编程提高系统性能、改善用户体验)
想要知道.NET异步有多少种实现方式,首先我们要知道.NET提供的执行异步操作的三种模式,然后再去了解.NET异步实现的四种方式。
|
26天前
|
安全 API C#
C#.Net筑基-类型系统②常见类型--枚举Enum
枚举(enum)是C#中的一种值类型,用于创建一组命名的整数常量。它们基于整数类型(如int、byte等),默认为int。枚举成员可指定值,未指定则从0开始自动递增。默认值为0。枚举可以与整数类型互相转换,并可通过`[Flags]`特性表示位域,支持位操作,用于多选场景。`System.Enum`类提供了如`HasFlag`、`GetName`等方法进行枚举操作。
|
26天前
|
编译器 C#
C#.Net筑基-类型系统②常见类型 --record是什么类型?
`record`在C#中是一种创建简单、只读数据结构的方式,常用于轻量级数据传输。它本质上是类(默认)或结构体的快捷形式,包含自动生成的属性、`Equals`、`ToString`、解构赋值等方法。记录类型可以继承其他record或接口,但不继承普通类。支持使用`with`语句创建副本。例如,`public record User(string Name, int Age)`会被编译为包含属性、相等比较和`ToString()`等方法的类。记录类型提供了解构赋值和自定义实现,如密封的`sealed`记录,防止子类重写。
|
1天前
基于EasyUI的后台管理系统页面原型_示例图_下载地址
基于EasyUI的后台管理系统页面原型_示例图_下载地址
5 0
|
26天前
|
存储 安全 Unix
C#.Net筑基-类型系统②常见类型--日期和时间的故事
在System命名空间中,有几种表示日期时间的不可变结构体(Struct):DateTime、DateTimeOffset、TimeSpan、DateOnly和TimeOnly。DateTime包含当前本地或UTC时间,以及最小和最大值;DateTimeOffset增加了时区偏移信息,适合跨时区操作。UTC是世界标准时间,而格林尼治标准时间(GMT)不稳定,已被更精确的UTC取代。DateTimeOffset和DateTime提供了转换为UTC和本地时间的方法,以及各种解析和格式化函数。
|
1月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
91 0
|
1月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
35 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
148 5
|
1月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
40 0

相关实验场景

更多