Web笔记··By/蜜汁炒酸奶

AdminLTE实现动态菜单

bootstrapAdminLTE
12913 132

前言

本篇内容基于上一篇AdminLTE实现局部刷新，在完成局部刷新后，不满足其左侧菜单栏的写死状态，希望后期能从数据库读取动态生成，故有了本篇尝试。

AdminLTE实现局部刷新

正文

目前依旧是在adminlte.js中做的修改。

菜单JSON样式

  var menuJson=[{
      "name": "用户管理",
      "controller":"#",
      "child": [{
          "name": "用户概览",
          "controller":"user/home.do",
      },{
          "name": "添加用户",
          "controller":"user/add.do",
      }]
  },{
      "name": "文章管理",
      "controller":"#",
      "child": [{
          "name": "文章概览",
          "controller":"post/home.do",
      },{
          "name": "添加文章",
          "controller":"post/add.do",
      }]
  }];

菜单初始化方法menuInit

这里面涉及到对菜单的拼接填充等操作 
 function menuInit() {
      var menu = null;
      var html = null;
      var chidLen = null;
      var child = null;
      for (var i = 0; i < menuJson.length; i++) {
          menu = menuJson[i];
          if(i==0){
              html = $(' <li menu-id="' + i + '" class="active treeview "><li>');
          }else{
              html = $(' <li menu-id="' + i + '" class="treeview "><li>');
          }

      $(".sidebar .sidebar-menu").append(html);

      html = $(' &lt;a href="'+menu.controller+'"&gt; &lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; &lt;span&gt;'+menu.name+'&lt;/span&gt; &lt;span class="pull-right-container"&gt; &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt; &lt;/span&gt; &lt;/a&gt; &lt;ul menuUl-id="'+i+'" class="treeview-menu"&gt; &lt;/ul&gt;');
      $('[menu-id="'+i+'"]').append(html);

      chidLen = menu.child.length;
      for (var j=0;j&lt;chidLen;j++){
          child = menu.child[j];
          if(i==0&amp;&amp;j==0){
              html = $('&lt;li class="active"&gt;&lt;a href="javascript:void(0);" menu-controller="'+child.controller+'"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt; '+child.name+'&lt;/a&gt;&lt;/li&gt;');
          }else{
              html = $('&lt;li class=""&gt;&lt;a href="javascript:void(0);" menu-controller="'+child.controller+'"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt; '+child.name+'&lt;/a&gt;&lt;/li&gt;');
          }

          $('[menuUl-id="'+i+'"]').append(html);
      }
  }
  $(Selector.data).each(function () {
      Plugin.call($(this))
  })
  $(".sidebar-menu li:first ul li:first a").click();

}

菜单初始化方法menuInit调用位置

该出是替换了原本菜单的初始化方法。可通过查询 Tree Data API 到达。 
  // Tree Data API
  // =============
  $(window).on('load', function () {
      menuInit();
  })

后记

关键代码已全部贴出，一般略微看看是可以自己写出来的。最后的代码demo是用于给伸手党哒。
为照顾纯前端同学，地址已改为纯前端实现。

-2017-08-21

DEMO下载

tip：若评论后看不到，刷新下就可以了。

[ttr2v]

AdminLTEDEMO

[/ttr2v]

源码加群也可直接获取啦：

官方群
预览
除特别注明外，本站所有文章均为 竹风清语 原创，转载请注明出处来自： adminlteshixiandongtaicaidan
License CC BY-SA 4.0 以商业目的使用本网站原创内容需获许可，非商业目的使用授权遵循CC BY-NC 4.0
Loading comments...
132 条评论
  • W
    12022-01-09 05:46:41

    111

  • W
    12022-01-09 05:46:25

    看看怎么样

  • W
    zuiya2020-12-10 08:00:00

    看看怎么样

  • W
    huskier2020-11-17 08:00:00

    学习下，多谢！

  • W
    hzzdong2020-10-22 08:00:00

    学习下，多谢！

  • W
    sunrifei2020-10-04 08:00:00

    看起来很简单！

  • W
    geo3342020-05-21 08:00:00

    学习

  • W
    18502656@qq.com2019-08-11 08:00:00

    zdh39077 thx,正需要

example
预览