EasyUI+js实现动态加载导航栏

   

   引言

   小编最近在做项目的时候遇到一个权限控制的功能，就是根据权限的大小来控制导航栏中的内容，这就遇到了

动态加载导航栏的功能了，但是根据整个界面的风格需要需要用到EasyUI，在开始的时候没有头绪来解决这个问题，

所以就查阅了EasyUI的API文档，俗话说：“如果学会了查看某个技术的API文档，那么编程就成功了一半”，所以我

在API文档中找到了一丝的灵感，其中有一个封装好的方法来解决这个问题，下面给大家分享这个方法。

   API文档展示

    实例展示

   在小编的项目中的需求是这样的，当用户登录的时候先判断用户的权限，然后就可以知道该用户可以操作的内

容有哪些，这样的话就可以让导航栏中加载出这些内容，其余的不能操作的内容，就不显示在导航栏中。这样的话只

有API中的这个简单的内容是不能实现的，这里还用到了一个比价让人头疼的东西，那就是DIV的拼接问题，下面就给

大家展示一下代码：

  首先来看一下大家都比较关心的js代码：

//通过accordion+动态拼接DIV实现父菜单的动态加载
$(function () {

$(function () {

$.getJSON("/Role/getOperateContentByRoleName", null, function (data) {

for (var m = 0; m < data.Length; m++) {

$("#aa").accordion('add', {
title: data.Title[m],
content: "<div style='text-align:center' id='tableDiv" + m + "'>" + ini(data, m) + "</div>"

});

}
});
//加载出表格
//initTable();
//getjson();
});

//加载出表格
//initTable();
//getjson();
});
//通过accordion+动态拼接DIV实现子菜单的动态加载
function ini(data, num) {

var maxCol = 0;
//var strTbody = ["<table>"];
var strTbody = ["<table width='120px' align='center'>"];
strTbody += "<tr>";
for (var i = 0; i < data.Content[num].length; i++) {

strTbody += "<td><a href='#'  style='font-size: 14px; text-align: center; margin-left: 20px; text-decoration: none;'" + "onclick=" + "AddTabs(this)" + ">" + data.Content[num][i] + "</a>" + "</td>";
maxCol++;
if (maxCol % 1 == 0) {
strTbody += "</tr>";
strTbody += "<tr>";
}
}
strTbody += "</tr>";
strTbody += "</table>";
return strTbody;
}

   下面来展示前台给js传递数据的代码：

#region 获取可操作的内容  郑浩-2015年8月28日11:18:47
public ActionResult getOperateContentByRoleName()
{
Guid roleID = new Guid(Session["RoleInfo"].ToString());

List<RoleOperationsViewModel> operateContent = new List<RoleOperationsViewModel>();
//根据roleID获取操作内容

operateContent = iRoleOperationsManagerWCF.QueryOperateContentByRoleID(roleID);

int length = operateContent.Count;

List<string> title = new List<string>();
IList<String> tempContent = new List<String>();
IList<IList<string>> content = new List<IList<string>>();

for (int i = 0; i < length; i++)
{

//添加标题的时候，防止加入重复数据
if (!title.Contains(operateContent[i].OperateContent))
{
title.Add(operateContent[i].OperateContent);

//添加子菜单
var OperateContentSub = from t in operateContent where t.OperateContent == operateContent[i].OperateContent select t;

foreach (var item in OperateContentSub)
{
tempContent.Add(item.OperateContentSub);
}

content.Add(tempContent.ToList());  //指针类型
tempContent.Clear();
}

}
var data = new
{
Length = title.Count,
Title = title,
Content = content

};

return Json(data, JsonRequestBehavior.AllowGet);
}

#endregion

   在这小编个读者们简单一下解决这个问题的思路，既然是动态的加载导航栏，那么我们的思路肯定是放在动态拼接

这个方向，因为我们的界面布局是不固定的，所以只能通过循环等手段来动态的加载，在这个项目中小编首先在登录

的时候画的一个权限，然后根据权限去数据库中读取可以操作的父菜单和子菜单的内容，让后在controller中定了一

个Ilist，里面存放两个list分别是父菜单的内容，第二个list存放的是此父菜单对应的子菜单，最后将这个IList传

递到js中，然后利用上面的代码进行动态的拼接，然后完成显示。

   小结

   当小编接到这个任务的时候那叫一个愁啊，对着东西一点都不熟悉怎么动实现这个功能呢？所以迟迟没有下手

实现，最后没有办法了就利用自己的思路实现了一版，但是效果非常的不好，所以被否定了，然后在帮别人调试代码

的时候偶然发现，在他们的项目中有这功能的影子，所有就看了一下。人家就是在EasyUI的封装的基础上进行了改

进，所以实现的非常的完美，但是自己在发现了一个方法以后，不知道怎样去修改人家封装好的方法，所以没有思

路，这就体现了现在自己学的东西还非常的浅显需要不断的深入，所以我们在学习知识的时候不仅需要广度更需要深

度，这样我们才能灵活的运用这些方法，所以在以后的学习中会增加深度的思考，这样自己提高的会更快，加油！！