本节主要知识点是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，如需转载请自行联系原作者
