如何动态设置左侧导航内容。

提问 未结
3 487
salmon8881
悬赏:20飞吻
版本:layui layuiAdmin.std-v1.0.0-beta9 浏览器:
有没有完整的 后台管理api?
回帖
  • 不知道你们layuiAdmin有没有提供,不过即使没有其实方法很多种,但是都是一个原理,就是根据一些逻辑生成出需要的html代码添加到dom节点中最后element.render一下就o了,至于具体实现这个就多种多样了,比如可以定义模板引擎,根据新增的菜单的特性(加到根节点跟叶子节点的逻辑有点区别)得到html代码,或者用js解析都行,然后再封装出自己的处理逻辑就ok了。比如刚写的一个小例子。
    https://pan.baidu.com/s/1SgvgK9SMomeT2hXA3SIWqw
    0 回复
  • 递归。后台按照登陆人的权限查找出菜单,前台递归显示就好,你这是std(iframe)版本,建议使用模板引擎处理页面渲染。当然你也可以用js拼接。另外:layuiAdmin支持这个菜单树结构,返回规定格式的json即可,详情请自己查阅开发文档
    0 回复
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HSMS</title>
    <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">
    #include("/html/common/include/_css.html")
    </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" id="topMenu">

    </ul>
    <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
    <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>

    <li class="layui-nav-item" lay-unselect>
    <a lay-href="html/message/index.html" layadmin-event="message" lay-text="消息中心">
    <i class="layui-icon layui-icon-notice"></i>
    <!-- 如果有新消息,则显示小圆点 -->
    <span class="layui-badge-dot"></span>
    </a>
    </li>
    <li class="layui-nav-item layui-hide-xs" lay-unselect>
    <a href="javascript:;" layadmin-event="theme">
    <i class="layui-icon layui-icon-theme"></i>
    </a>
    </li>
    <li class="layui-nav-item layui-hide-xs" lay-unselect>
    <a href="javascript:;" layadmin-event="note">
    <i class="layui-icon layui-icon-note"></i>
    </a>
    </li>
    <li class="layui-nav-item" lay-unselect>
    <a href="javascript:;">
    <cite>贤心</cite>
    </a>
    <dl class="layui-nav-child">
    <dd><a lay-href="set/user/info.html">基本资料</a></dd>
    <dd><a lay-href="set/user/password.html">修改密码</a></dd>
    <hr>
    <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
    </dl>
    </li>
    <li class="layui-nav-item layui-hide-xs" lay-unselect>
    <a href="javascript:;" layadmin-event="about"><i
    class="layui-icon layui-icon-more-vertical"></i></a>
    </li>
    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
    <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
    </li>
    </ul>
    </div>

    <!-- 侧边菜单 -->
    <div class="layui-side layui-side-menu">
    <div class="layui-side-scroll">
    <a class="layui-logo" layadmin-event="flexible" title="侧边伸缩">
    <!--<span>layuiAdmin</span>-->
    <img src="layuiadmin/layui/css/modules/layer/default/logo.png" id="LAY_app_flexible">
    </a>
    <!--基础设置-->
    <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-prev" layadmin-event="leftPage"></div>
    <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
    <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="html/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="html/home/console.html" frameborder="0" class="layadmin-iframe" id="BoxBox">
    </iframe>
    </div>
    </div>

    <!-- 辅助元素,一般用于移动设备下遮罩 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
    </div>
    #include("/html/common/include/_js.html")
    <script>

    var data=[{name:"模块1",menu:"basicSetting",id:"1",pid:"0"},{name:"模块2",menu:"Cashier",id:"2",pid:"0"},{name:"二级菜单1",menu:"humanResources",id:"3",pid:"1"},{name:"三级菜单1",menu:"Office",id:"4",pid:"3"},{name:"三级菜单2",menu:"Stock",id:"5",pid:"3"},{name:"二级菜单2",menu:"Finance",id:"6",pid:"1"},{name:"三级菜单2",menu:"superMmanagemen",id:"7",pid:"6"},{name:"2级菜单1",menu:"superMmanagemen",id:"8",pid:"2"},{name:"2级菜单2",menu:"superMmanagemen",id:"9",pid:"2"},{name:"三级菜单1",menu:"superMmanagemen",id:"10",pid:"8"},{name:"三级菜单2",menu:"superMmanagemen",id:"11",pid:"8"}];
    //var data=#(data);
    var view="";

    layui.config({
    base: '../layuiadmin/' //静态资源所在路径
    }).extend({
    index: 'lib/index' //主入口模块
    }).use(['index','layer', 'element', 'jquery', 'form'],function(){
    element =layui.element
    ,table = layui.table
    ,form = layui.form
    ,layer =layui.layer
    ,$ = layui.jquery;
    var seId;
    layui.each(data,function(index,item){
    if(index==0 && item.pid==0){
    view +='<li class="layui-nav-item layui-this" data-menu="'+item.menu+'"><a href="javascript:;" onclick="showChild('+item.id+')" id="'+item.id+'" title="设置"><i class="iconfont"></i>'+item.name+'</a></li>';
    seId=item.id;
    }else if(item.pid==0){
    view +='<li class="layui-nav-item" data-menu="'+item.menu+'"><a href="javascript:;" onclick="showChild('+item.id+')" title="设置"><i class="iconfont"></i>'+item.name+'</a></li>';
    }
    })
    $('#topMenu').html(view);
    element.init();
    element.render('nav');


    showChild=function(id) {
    var navActive = $('[lay-filter="layadmin-system-side-menu"]');
    //var navActive = navElem.find('.layui-this');
    var view="";
    var f = document.getElementById("LAY-system-side-menu");
    var childs = f.childNodes;
    for(var i = childs.length - 1; i >= 0; i--) {
    f.removeChild(childs[i]);
    }

    layui.each(data,function(index,item){
    if(item.pid==id && item.pid!=0){

    view='<li class="layui-nav-item"><a href="javascript:void(0);" id="'+item.id+'" onclick="alert('+this.id+')" name="node'+1+'">' + item.name + '</a>';

    $.each(data,function(a,iteam){

    if(this.pid==item.id){

    view+='<dl class="layui-nav-child"><dd><a href="javascript:void(0);" onclick="alert('+this.id+')" name="node'+1+'">' + this.name + '</a></dd></dl>';
    }
    })
    view+="</li>";
    navActive.append(view);
    }

    })
    element.render('nav', 'layadmin-system-side-menu');
    };

    $('#'+seId).click();

    });
    </script>
    </body>
    </html>


    我没有很好的整理代码,可能会有更好的算法,但是这个功能是出来了。
    0 回复