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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013045437/article/details/49227505

   

   引言


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


动态加载导航栏的功能了,但是根据整个界面的风格需要需要用到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的封装的基础上进行了改


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


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


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


   


阅读更多

扫码向博主提问

郑浩-

博客专家

非学,无以致疑;非问,无以广识
去开通我的Chat快问
换一批

没有更多推荐了,返回首页