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