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 = $(' <a href="'+menu.controller+'"> <i class="fa fa-dashboard"></i> <span>'+menu.name+'</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul menuUl-id="'+i+'" class="treeview-menu"> </ul>');
          $('[menu-id="'+i+'"]').append(html);

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

              $('[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();
  })

转自：https://windcoder.com/adminlteshixiandongtaicaidan

来源：oschina

链接：https://my.oschina.net/lenglingx/blog/4405855

标签

adminlte

javascript