引言
小编最近在做项目的时候遇到一个权限控制的功能，就是根据权限的大小来控制导航栏中的内容，这就遇到了动态加载导航栏的功能了，但是根据整个界面的风格需要需要用到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;'" + "οnclick=" + "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的封装的基础上进行了改进，所以实现的非常的完美，但是自己在发现了一个方法以后，不知道怎样去修改人家封装好的方法，所以没有思路，这就体现了现在自己学的东西还非常的浅显需要不断的深入，所以我们在学习知识的时候不仅需要广度更需要深度，这样我们才能灵活的运用这些方法，所以在以后的学习中会增加深度的思考，这样自己提高的会更快，加油！！
