AdminLte 开发中遇到得坑

直奔主题~

1.框架搭建~.net 

在搭建框架得过程中，想必很多人会遇到与我类似得问题

  (1)就是把全量包直接导入到vs中，vs直接卡死。无力回天得那种死法。

解决：在试了几次不行得情况下，就只能按照系统自带得demo引用路径整理一下需要引用得JS css ....

https://download.csdn.net/download/lllooollpp/10816540 有需要得小伙伴可以下载。

（2）导入后按照Demo中得starter.html 页，进行布局，细节都是泛泛得HTML CSS JS 得知识，不多说了。

界面图如下：

左侧菜单栏，右侧为可切换的DIV（本来合计用IFREAME做，但缺点比较多，后来就用div加载的方式进行页面切换了）。

2.开发阶段~ .net 

开发阶段遇到得问题很多，很多很头疼得东西，希望大家能引以为戒，少走弯路。

（1）左侧菜单动态生成后，点击右侧下拉按钮无法下拉。

解决： 反正现在也没实际得解决，只是用js对下拉属性      display: none /block 的控制进行合并和展开。

虽然有些生硬，但是目的达到了。下面是创建菜单步骤，希望有遇到类似问题加以指点。

1.1在数据库中创建了菜单表，结构如下

CREATE TABLE "ETLMONITOR"."EMRAM_MENU" 
   (    "PID" NUMBER NOT NULL ENABLE, 
    "MENUNAME" VARCHAR2(50), 
    "MEUNURL" VARCHAR2(50), 
    "SORTORDER" NUMBER, 
    "PARENTID" NUMBER, 
    "ICO" VARCHAR2(32), 
    "ISSHOW" NUMBER, 
    "MENUKEY" VARCHAR2(50) NOT NULL ENABLE
   ) 

1.2后台动态拼接前端HTML

 public static string GetMenuItem()
        {
            var svc =   ObjectContainer.GetObject<IBll.Service.IMenuService>();
            var ItemMenu = svc.GetMenuItem();
            if (ItemMenu.Count() > 0)
            {
                StringBuilder sbstr = new StringBuilder();
                sbstr.Append("<ul class=\"sidebar-menu\" data-widget=\"tree\">");
                var round =new Random();                
                foreach (MenuDto item in ItemMenu)
                {
                    if (item.IsHaveChild)
                    {
                        string childHtml = GenerateChildMenuHtml(item);
                        sbstr.Append("<li title=\"" + item.MeunURL + "?ran=" + round.Next()+"\" class=\"treeview\">");
                        sbstr.Append(" <a href=\"#\"><i class=\"fa " + item.Ico + "\"></i> <span>" + item.MenuName + "</span>");
                        sbstr.Append("<span class=\"pull-right-container\">");
                        sbstr.Append(" <i class=\"fa fa-angle-left pull-right\"></i>");
                        sbstr.Append("</span> </a >");
                        sbstr.Append(childHtml);
                        sbstr.Append("</li>");
                    }
                    else
                    {
                        sbstr.Append("<li title=\"" + item.MeunURL + "?ran=" + round.Next() +  "\"><a href=\"#\"><i  class=\"fa " + item.Ico + "\"></i> <span>" + item.MenuName + "</span></a></li>");
                    }
                }
                sbstr.Append("</ul>");
                return sbstr.ToString();
            }

            return Newtonsoft.Json.JsonConvert.SerializeObject(svc);
        }



  private static string GenerateChildMenuHtml(MenuDto menus)
        {
            StringBuilder sb = new StringBuilder();
            List<MenuDto> childList = menus.ChildItem;
            sb.Append("<ul class=\"treeview-menu\" style=\"display: none;\">");
            foreach (MenuDto item in childList)
            {
                sb.Append("<li id=\""+ item .MenuKey+ "\" title = \"\"><a href=\"#\">" + item.MenuName + "</a></li>");
            }
            sb.Append("</ul>");
            return sb.ToString();
        }

1.3.前端获取并添加到adminlte中

 $("#MenuDiv").append(result.d);

这样一套菜单的加载就搞定了。

1.4遇到的问题：

菜单加载后，左侧菜单中有子项的点击不能展开。这种情况是时常出现，时常好使，很难琢磨。用了好多方法。

• 最开始以为是刷新网页的时候走了缓存   304  200 文件，后来加上了时间戳，也是不好用。
•    不让页面缓存     
      <META HTTP-EQUIV="pragma" CONTENT="no-cache">
      <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
      <META HTTP-EQUIV="expires" CONTENT="0">
      <meta charset="utf-8">
• 禁用掉F5 
      //禁用F5
      //$(document).ready(function () {
      //    $(document).bind("keydown", function (e) {
      //        e = window.event || e;
      //        if (e.keyCode == 116) {
      //            e.keyCode = 0;
      //            return false;
      //        }
      //    });
      //});   依然不好用，折腾一圈后，得出个结论，根本不是缓存得问题（成本有点小小得大啊）。
• 实在没办法了，只能用js控制了，就如开头时候说得控制他得css样式，与其框架进行交互。

（2）页面中js冲突、css冲突

        前期没有统一框架、开发人员分散、前端知识匮乏，所以一些控件基本上都是网上找来得。这就导致了整个项目得引用5花八门。

引用得东西也很多种，就单单jquery就引用了3个版本。到集成得时候发现整个web系统就首页能看，其他得没有好用得。所以大家又花费了些时间清理了冗余得css js 等文件。

（3）头疼得页面切换

 框架是Adminlte得，但是切换页面是大家想出来的。没有统一的设计，都是需要跳转就调用tabpage方法，如果不适用再开发新的，结果导致页面tabpage方法过多，冗余代码也很多。所以这部分大家应当引以为戒。一定要再设计初期把相应的业务场景都想到，形成统一的共识的跳转方式方法。