layui iframe版动态菜单解决方案


DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>xxxxxxxtitle>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
head>
<body class="layui-layout-body">
  
  <div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item layadmin-flexible" lay-unselect>
            <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
              <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible">i>
            a>
          li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;" layadmin-event="refresh" title="刷新">
              <i class="layui-icon layui-icon-refresh-3">i>
            a>
          li>
        ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
              <cite id="userName">物资管理员cite>
            a>
            <dl class="layui-nav-child">
   
              <dd id="updatePassword">dd>
              <hr>
              <dd id="logout" style="text-align: center;"><a style="cursor: pointer">退出a>dd>
            dl>
          li>

        ul>
      div>
      
      
      <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
          <div class="layui-logo" lay-href="home/console.html">
            <span>云酒店平台OTA1.1span>
          div>
          
          <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
                
          ul>
        div>
      div>

      
      <div class="layadmin-pagetabs" id="LAY_app_tabs">
        
        
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
          <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
            <li class="layui-nav-item" lay-unselect>
              <a href="javascript:;">a>
              <dl class="layui-nav-child layui-anim-fadein">
                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页a>dd>
                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页a>dd>
                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页a>dd>
              dl>
            li>
          ul>
        div>
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
          <ul class="layui-tab-title" id="LAY_app_tabsheader">
            <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home">i>li>
          ul>
        div>
      div>
      
      
      
      <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show">
          <iframe src="" frameborder="0" class="layadmin-iframe" id="fIndex">iframe>
        div>
      div>
      
      
      <div class="layadmin-body-shade" layadmin-event="shade">div>
    div>
  div>

  <script src="../layuiadmin/layui/layui.js">script>
  <script>
      //alert(getCookie("token"))
      layui.use('layer', function(){
          var $ = layui.$ //由于layer弹层依赖jQuery,所以可以直接得到
              ,layer = layui.layer;
          var html="";
          var userName="";
          //console.log("token1:"+ getCookie("token"));
          $.ajax({
              type: "POST",
              url: "/selectUserPower"  //这里是你的接口数据 示例 {"msg":"success","code":0,"data":[{"mid":8,"mname":"财务管理","pmid":0,"url":null,"icons":"layui-icon  layui-icon-rmb","sort":0,"childList":[{"mid":9,"mname":"财务视图","pmid":8,"url":"/views/finance/index.html","icons":null,"sort":0,"childList":null},{"mid":12,"mname":"财务配置","pmid":8,"url":"/views/finance/setting.html","icons":null,"sort":0,"childList":null},{"mid":10,"mname":"财务进账","pmid":8,"url":"/views/finance/income.html","icons":null,"sort":1,"childList":null},{"mid":11,"mname":"财务结算","pmid":8,"url":"/views/finance/settlement.html","icons":null,"sort":2,"childList":null}]},{"mid":5,"mname":"酒店管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-tree","sort":1,"childList":[{"mid":6,"mname":"酒店列表","pmid":5,"url":"/views/hotel/hotelList.html","icons":null,"sort":0,"childList":null},{"mid":7,"mname":"酒店导入","pmid":5,"url":"/views/hotel/importHotel.html","icons":null,"sort":0,"childList":null}]},{"mid":1,"mname":"系统管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-set","sort":2,"childList":[{"mid":3,"mname":"权限组管理","pmid":1,"url":"/views/admin/role/userPower.html","icons":null,"sort":0,"childList":null},{"mid":2,"mname":"管理员管理","pmid":1,"url":"/views/admin/user/userList.html","icons":"","sort":1,"childList":null},{"mid":4,"mname":"分类管理","pmid":1,"url":"/views/admin/type/typeList.html","icons":null,"sort":1,"childList":null}]}],"userName":"admin"}
              dataType: "json",
              async: false,
              success: function(res){
                  if(res.code==-1){
                      window.location.href="/views/login.html"  //这里是session失效返回登录的 后台配置 不要在意
                  }else{
                      var data=res.data;
                      userName=res.userName;  //后台传的登录人 不要的话后台可以不传
                      var t=0;
                      for (var i=0;i<data.length;i++){  //主菜单的数据
                          html+='
  • \n'+ ''+data[i]["mname"]+'" lay-direction="2">\n' + ' '+data[i]["icons"]+'">\n' + ' '+data[i]["mname"]+'\n' + ' \n'; var child=data[i]["childList"]; if(child.length!=0){ html+='
    \n'; } for(var j=0;j<child.length;j++){ //二级菜单的数据 如果你有三级菜单的话 我就没法了 if(t==0){ if(j==0){ console.log(child[j]["url"]) t=1; $("#fIndex").attr("src",child[j]["url"]+"?token="+getCookie("token")) } } html+='
    \n' + ' '+child[j]["url"]+'?token='+getCookie("token")+'">'+child[j]["mname"]+'\n' + '
    \n
    ' } if(child.length!=0){ html+='
    \n
    '; } html+='
  • '; } } } }); $("#userName").html(userName); $("#LAY-system-side-menu").html(html) var pw=''+getCookie("token")+'" style="text-align: center;">修改密码
    '; $("#updatePassword").html(pw) }); layui.config({ base: '../layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use('index',function () { var $ = layui.$ $("#logout").click(function () { clearCookie("token"); window.open("/login.html","_top") }) }); script> body> html>



    xxxxxxx