layui 如何生成垂直侧导航栏

提问 未结
15 184
wuq
wuq 7天前
悬赏:20飞吻
版本:layui 浏览器:
layui 如何生成垂直侧导航栏 走后台查出来的那种
回帖
  • 这个就是获得菜单数据然后用js去生成节点设置到左边菜单栏里面,最后element.render一下就可以了。关键是怎么根据数据生成对应的dom
    0 回复
  • 这个当初我刚用layui的时候也在这卡了好几天
     //监听导航栏点击事件
    element.on('nav(hbkNavbar)', function (elem) {

    // 通过jquery获取该元素的父元素
    var parentElem = $(elem).parent();
    // 使用jquery方法获取具体属性
    var title = $(parentElem).attr("title");
    // 判断是否是父菜单
    if (title == undefined) {
    return false;
    }

    // 判断选项卡数量
    if ($(".layui-tab-title").children().length > 14) {
    layer.msg('开启的选项卡过多,请关闭暂时不用的选项卡!', {
    icon: 5
    });
    return false;
    }

    var url = $(elem).attr("data-url");
    var tabCode = $(parentElem).attr("layid");

    //判断当前tab是否存在,存在就选择,否则就生成新的tab
    var thisTab = $("[lay-id=" + tabCode + "]");
    if (thisTab.length == 0) {
    //添加tab选项卡
    element.tabAdd('tabs', {
    title: title,
    content: '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:90%"></iframe>',
    id: tabCode
    });
    //根据选项卡id改变焦点
    element.tabChange('tabs', tabCode);
    } else {
    //根据选项卡id改变焦点
    element.tabChange('tabs', tabCode);
    }
    });

    // ajax请求获取菜单数据
    $.ajax({
    url: "../menu",
    type: "get",
    dataType: "json",
    success: function (data) {
    var html = getHtml(data);
    $('#admin-navbar-side').html(html);
    // 动态生成之后需要初始化一下才行
    element.render('nav');
    }
    });

    /**
    * 获取html字符串
    * @param {Object} data
    */
    function getHtml(data) {
    //是否是第一个
    var first = true;
    var ulHtml = '<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="hbkNavbar">';
    for (var i = 0; i < data.length; i++) {
    // 如果是第一个菜单自动展开
    if (first) {
    ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
    first = false;
    } else {
    ulHtml += '<li class="layui-nav-item">';
    }
    // 判断有没有子菜单
    if (data[i].childrens !== undefined && data[i].childrens !== null && data[i].childrens.length > 0) {
    ulHtml += '<a href="javascript:;">';
    // 判断有没有图标
    if (data[i].iconName !== undefined && data[i].iconName !== '') {
    ulHtml += '<i class="layui-icon ' + data[i].iconName + '" style="font-size: 20px;"> </i>';
    }
    ulHtml += '<cite>' + data[i].permissionName + '</cite>'
    ulHtml += '</a>';
    ulHtml += '<dl class="layui-nav-child">'
    for (var j = 0; j < data[i].childrens.length; j++) {
    ulHtml += '<dd title="' + data[i].childrens[j].permissionName + '" layid="' + data[i].childrens[j].code + '">';
    ulHtml += '<a href="javascript:;" data-url="' + data[i].childrens[j].href + '">';
    if (data[i].childrens[j].iconName !== undefined && data[i].childrens[j].iconName !== '') {
    ulHtml += '<i class="layui-icon ' + data[i].childrens[j].iconName + '" style="font-size: 20px;"> </i>';
    }
    ulHtml += '<cite>' + data[i].childrens[j].permissionName + '</cite>';
    ulHtml += '</a>';
    ulHtml += '</dd>';
    }
    ulHtml += '</dl>';
    } else {
    var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';
    ulHtml += '<a href="javascript:;" ' + dataUrl + '>';
    if (data[i].iconName !== undefined && data[i].iconName !== '') {
    ulHtml += '<i class="layui-icon ' + data[i].iconName + '" style="font-size: 20px;"> </i>';
    }
    ulHtml += '<cite>' + data[i].permissionName + '</cite>'
    ulHtml += '</a>';
    }
    ulHtml += '</li>';
    }
    ulHtml += '</ul>';

    return ulHtml;
    }
    上面是获取数据、生成导航栏、监听点击事件的代码
    [{
    "permissionId": 1,
    "permissionName": "基本管理",
    "code": "1",
    "parentCode": "ROOT_MENU",
    "resource": null,
    "href": null,
    "iconName": "layui-icon-set-fill",
    "permissionOrder": 1,
    "childrens": [{
    "permissionId": 2,
    "permissionName": "用户管理",
    "code": "101",
    "parentCode": "1",
    "resource": "",
    "href": "basic/user.jsp",
    "iconName": "layui-icon-user",
    "permissionOrder": 2,
    "childrens": null
    }, {
    "permissionId": 7,
    "permissionName": "角色管理",
    "code": "102",
    "parentCode": "1",
    "resource": "",
    "href": "basic/role.jsp",
    "iconName": "layui-icon-auz",
    "permissionOrder": 7,
    "childrens": null
    }, {
    "permissionId": 12,
    "permissionName": "权限管理",
    "code": "103",
    "parentCode": "1",
    "resource": "",
    "href": "basic/permission.jsp",
    "iconName": "layui-icon-component",
    "permissionOrder": 12,
    "childrens": null
    }, {
    "permissionId": 17,
    "permissionName": "日志管理",
    "code": "104",
    "parentCode": "1",
    "resource": "",
    "href": "basic/log.jsp",
    "iconName": "layui-icon-log",
    "permissionOrder": 17,
    "childrens": null
    }, {
    "permissionId": 20,
    "permissionName": "字典管理",
    "code": "105",
    "parentCode": "1",
    "resource": "",
    "href": "basic/dict.jsp",
    "iconName": "layui-icon-read",
    "permissionOrder": 20,
    "childrens": null
    }]
    }]
    这个是我的数据结构
    你参考一下
    0 回复
  • 不过我想知道大家都是用这种拼接html的方法么?应该有更好的方法吧???
    0 回复
  • wuq
    6天前
    @一个幽默的代码 能把你的html代码给我看看嘛?
    0 回复
  • wuq
    6天前
    @岁月小偷 能给我大概的代码吗 新手上路
    0 回复
  • @wuq 嗯嗯,刚好前几天在admin专区上也有人问,所以写了个测试的例子,你可以下载代码下来看看里面的逻辑,用的tpl去递归渲染,支持无限层级。 https://pan.baidu.com/s/1skhbGWPZipg5ELG9ZjxjSw
    0 回复
  • wuq
    6天前
    @岁月小偷
    我这个不走这里是为什么啊

    这是我具体代码,麻烦您看一下
    //html
    <div class="layui-side layui-bg-black">
    <div id="navBar" lay-filter="demo" class="navBar layui-side-scroll"></div>
    </div>
    //js
    layui.config({
    base: 'Public/System/layui.navbar/',//navbar组件js所在目录
    version: new Date().getTime()
    }).use('navbar', function() {
    var navbar = layui.navbar();
    navbar.set({
    elem: '#navBar',
    // url: homeDomain+'System/Resource/nag'//数据源地址
    url: url//数据源地址
    });
    navbar.render();
    navbar.on('click()', function(data) {
    console.log(data);
    console.log("侧边导航");
    // console.log(data.elem);
    // console.log(data.field.title);//标题
    // console.log(data.field.icon);//图标
    // console.log(data.field.href);//调转地址
    layer.msg(data.field.href);
    });
    });


    layui.use('element', function(){
    var element = layui.element;

    //一些事件监听
    // element.on('tab(demo)', function(data){
    // console.log(data);
    // });
    element.on('nav(hbkNavbar)', function (elem) {
    console.log(1234);return;

    // 通过jquery获取该元素的父元素
    var parentElem = $(elem).parent();
    // 使用jquery方法获取具体属性
    var title = $(parentElem).attr("title");
    // 判断是否是父菜单
    if (title == undefined) {
    return false;
    }

    // 判断选项卡数量
    if ($(".layui-tab-title").children().length > 14) {
    layer.msg('开启的选项卡过多,请关闭暂时不用的选项卡!', {
    icon: 5
    });
    return false;
    }

    var url = $(elem).attr("data-url");
    var tabCode = $(parentElem).attr("layid");

    //判断当前tab是否存在,存在就选择,否则就生成新的tab
    var thisTab = $("[lay-id=" + tabCode + "]");
    if (thisTab.length == 0) {
    //添加tab选项卡
    element.tabAdd('tabs', {
    title: title,
    content: '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:90%"></iframe>',
    id: tabCode
    });
    //根据选项卡id改变焦点
    element.tabChange('tabs', tabCode);
    } else {
    //根据选项卡id改变焦点
    element.tabChange('tabs', tabCode);
    }
    });

    // ajax请求获取菜单数据
    $.ajax({
    url: homeDomain+'System/Resource/nag',
    type: "get",
    dataType: "json",
    success: function (data) {
    var html = getHtml(data);
    $('#admin-navbar-side').html(html);
    // 动态生成之后需要初始化一下才行
    element.render('nav');
    }
    });

    /**
    * 获取html字符串
    * @param {Object} data
    */
    function getHtml(data) {
    //是否是第一个
    var first = true;
    var ulHtml = '<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="hbkNavbar">';
    for (var i = 0; i < data.length; i++) {
    // 如果是第一个菜单自动展开
    if (first) {
    ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
    first = false;
    } else {
    ulHtml += '<li class="layui-nav-item">';
    }
    // 判断有没有子菜单
    if (data[i].childrens !== undefined && data[i].childrens !== null && data[i].childrens.length > 0) {
    ulHtml += '<a href="javascript:;">';
    // 判断有没有图标
    if (data[i].iconName !== undefined && data[i].iconName !== '') {
    ulHtml += '<i class="layui-icon ' + data[i].iconName + '" style="font-size: 20px;"> </i>';
    }
    ulHtml += '<cite>' + data[i].permissionName + '</cite>'
    ulHtml += '</a>';
    ulHtml += '<dl class="layui-nav-child">'
    for (var j = 0; j < data[i].childrens.length; j++) {
    ulHtml += '<dd title="' + data[i].childrens[j].permissionName + '" layid="' + data[i].childrens[j].code + '">';
    ulHtml += '<a href="javascript:;" data-url="' + data[i].childrens[j].href + '">';
    if (data[i].childrens[j].iconName !== undefined && data[i].childrens[j].iconName !== '') {
    ulHtml += '<i class="layui-icon ' + data[i].childrens[j].iconName + '" style="font-size: 20px;"> </i>';
    }
    ulHtml += '<cite>' + data[i].childrens[j].permissionName + '</cite>';
    ulHtml += '</a>';
    ulHtml += '</dd>';
    }
    ulHtml += '</dl>';
    } else {
    var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';
    ulHtml += '<a href="javascript:;" ' + dataUrl + '>';
    if (data[i].iconName !== undefined && data[i].iconName !== '') {
    ulHtml += '<i class="layui-icon ' + data[i].iconName + '" style="font-size: 20px;"> </i>';
    }
    ulHtml += '<cite>' + data[i].permissionName + '</cite>';
    ulHtml += '</a>';
    }
    ulHtml += '</li>';
    }
    ulHtml += '</ul>';

    return ulHtml;
    }
    });
    0 回复
  • @wuq 这个~你这个#admin-navbar-side是在哪?看看这个附近的代码,
    0 回复
  • wuq
    6天前
    @岁月小偷 不知道这个id该往哪里写 没有写
    0 回复
  • @wuq 囧,这个id应该就是你左侧导航所处的容器的id,要加上不然拼出来的html,没办法添加到页面的dom中去吗,更不用说事件了额。
    0 回复
  • wuq
    6天前
    @岁月小偷 [泪] 不知道往哪里填
    这么写也不行啊

    这样也不行
    0 回复
  • @wuq 你把admin-navbar-side换成navBar试试看,看你写的应该是这个才对。
    0 回复
  • @wuq
    <%--
    Created by IntelliJ IDEA.
    User: sunjing
    Date: 2018/7/19
    Time: 10:10
    To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
    %>
    <html>
    <head>
    <title></title>
    <!--引入layui css样式表-->
    <link rel="stylesheet" href="<%=basePath%>/static/layui/css/layui.css">
    <!--引入css文件-->
    <link rel="stylesheet" href="<%=basePath%>/static/css/main.css">
    <!--引入layui js文件-->
    <script src="<%=basePath%>/static/layui/layui.js"></script>
    <!--引入js文件-->
    <script src="<%=basePath%>/static/js/main.js"></script>
    <style type="text/css">
    #admin-submenu-c {
    position: absolute;
    width: 17px;
    height: 46px;
    top: 50%;
    left: 200px;
    line-height: 45px;
    background: #393D49;
    color: #F6F6F6;
    z-index: 999;
    }

    body {
    overflow-y: scroll;
    height: 100%;
    }
    </style>

    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
    <!--头部-->
    <div class="layui-header">
    <div class="layui-logo">
    <img alt="" src="../static/image/title_logo.png" width="30" height="40"/><span></span>
    </div>

    <!-- 右侧 -->
    <ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item"><span style="padding-right: 20px">${user.fullname}</span><span
    class="layui-nav-more"></span>
    <dl class="layui-nav-child">
    <dd>
    <a href="javascript:;" id="changePassword">修改密码</a>
    </dd>
    </dl>
    </li>

    <li class="layui-nav-item"><a href="javascript:;" onclick="logout()">退出登录</a></li>

    </ul>
    </div>

    <!--左侧-->
    <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll" id="admin-navbar-side"></div>
    </div>
    <div id="admin-submenu-c" class="">
    <i class="layui-icon layui-icon-prev"></i>
    </div>

    <!--中间主体-->
    <div class="layui-body" id="container">
    <div class="layui-tab" lay-filter="tabs" id="main-tab"
    lay-allowClose="true">
    <ul class="layui-tab-title">
    </ul>
    <div class="layui-tab-content"></div>
    </div>
    </div>

    <!--底部-->
    <div class="layui-footer" align="center">

    </div>
    </div>


    </body>
    </html>
    0 回复
  • wuq
    6天前
    @岁月小偷
    就这样了



    0 回复
  • wuq
    6天前
    @一个幽默的代码 问一下 这个是做的左边的导航栏还是做的点击之后红框的东西?
    0 回复