AdminLte3改造为：单iframe，多级动态json菜单

一、下载代码

https://gitee.com/zhou-kang/admin-lte3-i-frame-json_menus

二、运行index.html

三、核心文件menu.js

menu.js中定义了json格式的菜单，并将json转为adminLte的菜单html，可根据需要改在为动态菜单。

pages/test/leaf*.html，是iframe的测试页面，其它文件均是AdminLte3 的原始文件。

• 核心为menu.js文件，必须在jquery引入后使用
• iframe的id为：iframeMain
• 菜单ul的id为menutree

//菜单框架
<div class="sidebar">
  <!-- 侧边栏菜单 -->
  <nav class="mt-2">
   <ul id="menutree"  class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
   </ul>
  </nav>
  <!-- /.sidebar-menu -->
</div>


//iframe框架
  <div  class="content-wrapper" >
    <iframe id="iframeMain" src="http://www.baidu.com" style="margin-left:0px;width:100%;height:100%;border:0";></iframe>
  </div>

菜单json说明

[{
    "text": "首页",
    "icon": "nav-icon fas fa-home",
    "right_text":"新",
    "active":"active",
    "url":"http://www.baidu.com"
},
{
    "text": "第二项",
    "icon": "nav-icon fas fa-home",
    "open":"menu-open",
    "children": [...]
}
}]

/**
* text：是菜单显示的文本内容
* icon：是菜单图片
* right_text：是菜单右侧显示的提示文本，最大长度为3
* active：则默认选中该项，高亮，值只能为active；
* open：菜单是否展开,针对带有children的根节点，值只能为menu-open.
* children：子菜单选项，有该选项，表示该节点为一个根节点，值为菜单项
*/

 

2021年01月07更新，官方最新版本3.1.0已有iframe版本