AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Layui菜单模块

2023-11-14 72
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Layui菜单模块

                               今天继续有我给大家layui菜单在web中的应用          

                                         一.介绍

1.什么是菜单模块？

Layui是一个轻量级的前端框架，提供了丰富的UI组件和便捷的开发方式，而菜单模块是Layui中的一个核心组件之一，用于创建和管理网页导航菜单。

2.layui菜单模块有什么用？

Layui菜单模块是一种用于创建网页导航菜单的前端组件。具体而言，Layui菜单模块的作用包括：

1. 导航网页页面：可以使用Layui菜单模块创建网页的主导航菜单，使用户能够快速浏览和访问不同页面或功能模块。

2. 多级菜单支持：Layui菜单模块支持创建多级菜单，你可以通过嵌套菜单的方式来构建层级结构的菜单，便于组织和管理大量的菜单项。

3. 菜单事件响应：你可以利用Layui的事件监听机制，为菜单添加自定义的点击事件或其他交互行为，比如弹出窗口、执行相关操作等，以实现更丰富的用户交互效果。

4. 动态菜单生成：Layui菜单模块支持通过异步请求或动态数据生成菜单项，这意味着你可以根据需要动态地生成菜单，灵活地控制菜单的内容和显示。

5. 样式自定义：Layui菜单模块提供了多种样式和主题可供选择，你可以根据自己的需求自定义菜单的外观和样式，以适应不同的应用场景和界面设计。

总结而言，Layui菜单模块可以帮助前端开发人员快速构建出具备良好用户体验的网页导航菜单，实现页面间的导航和功能访问，并且提供了灵活的样式和事件配置，让开发者可以根据项目需求定制需求。

3.为什么layui现在仍然有企业在使用？

Layui作为一个简洁、易用且功能丰富的前端框架，仍然被一些企业所使用，主要有以下几个原因：

1. 轻量级和易用性：Layui的核心理念是“模块化”，它以轻量级、简单易用为设计目标，提供了丰富的UI组件和简洁的API，使得开发人员可以快速上手并进行快速开发。

2. 成熟稳定：Layui发布于2016年，已经经过多年的发展与迭代，拥有一定规模的用户群体和活跃的社区支持。由于其稳定性和成熟性，许多企业选择继续使用Layui来维护和改进他们现有的项目。

3. 兼容性强：Layui在设计和开发过程中考虑了兼容性问题，能够良好地运行在各种浏览器上，包括常见的Chrome、Firefox、Safari等主流浏览器，以及IE10+的版本。

4. 性能表现：Layui经过优化，具有良好的性能表现。它提供了按需加载和异步加载等机制，可以提升页面加载速度，避免资源浪费，提升用户体验。

5. 社区支持和插件丰富：Layui拥有活跃的社区和丰富的第三方插件，你可以从社区获取到各种实用的扩展和解决方案，帮助完成更复杂的功能需求。

综上所述，尽管前端技术发展迅速，Layui仍然有企业在使用，主要是因为它具备易用性、稳定性、兼容性和良好的性能表现等诸多优点，并且拥有社区的支持和插件生态系统。对于一些已有的项目或中小型企业来说，Layui提供了一种成熟、实用的解决方案，能够满足项目的需求。

                           二.将layui菜单栏部署在web中

1.思路

通过sql语句获得所有数据，在将原来的数据关系有平级，变成父子关系，最后在将数据放在jsp中！

2.实操

2.1查看数据库数据，编写实体

package com.zking.entity;
public class Permission {
/*
*lz
**
/
 private  long id;
 private   String  name;
 private    String   description;
 private    String   url;
 private  long pid;
 private    int ismenu;
 private   long   displayno;
public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
  super();
  this.id = id;
  this.name = name;
  this.description = description;
  this.url = url;
  this.pid = pid;
  this.ismenu = ismenu;
  this.displayno = displayno;
}
/**
 * @return the id
 */
public long getId() {
  return id;
}
/* (non-Javadoc)
 * @see java.lang.Object#toString()
 */
@Override
public String toString() {
  return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid=" + pid
      + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
public Permission() {
  super();
}
/**
 * @param id the id to set
 */
public void setId(long id) {
  this.id = id;
}
/**
 * @return the name
 */
public String getName() {
  return name;
}
/**
 * @param name the name to set
 */
public void setName(String name) {
  this.name = name;
}
/**
 * @return the description
 */
public String getDescription() {
  return description;
}
/**
 * @param description the description to set
 */
public void setDescription(String description) {
  this.description = description;
}
/**
 * @return the url
 */
public String getUrl() {
  return url;
}
/**
 * @param url the url to set
 */
public void setUrl(String url) {
  this.url = url;
}
/**
 * @return the pid
 */
public long getPid() {
  return pid;
}
/**
 * @param pid the pid to set
 */
public void setPid(long pid) {
  this.pid = pid;
}
/**
 * @return the ismenu
 */
public int getIsmenu() {
  return ismenu;
}
/**
 * @param ismenu the ismenu to set
 */
public void setIsmenu(int ismenu) {
  this.ismenu = ismenu;
}
/**
 * @return the displayno
 */
public long getdisplayno() {
  return displayno;
}
/**
 * @param displayno the displayno to set
 */
public void setdisplayno(long displayno) {
  this.displayno = displayno;
}
}

2.2编写dao方法

package com.zking.dao;
import java.util.ArrayList;
import java.util.List;
import com.sun.org.apache.bcel.internal.generic.RETURN;
import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
public class PermissionDao extends BaseDao<Permission> {
  public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {
    String sql = "select *from  t_oa_permission  ";
    return super.executeQuery(sql, Permission.class, pageBean);
  }
  /**
   * 将平级转换成父子关系
   * 
   * @throws Exception
   * 
   */
  public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception {
    List<TreeVo<Permission>>lst=new ArrayList<TreeVo<Permission>>();
    List<Permission> list = this.list(permission, pageBean);
        for (Permission p : list) {
          TreeVo<Permission>vo=new TreeVo<>();
          vo.setId(p.getId()+"");
          vo.setText(p.getName());
          vo.setParentId(p.getPid()+"");
          lst.add(vo);
    }
    return   BuildTree.buildList(lst, "-1");
  }
}

2.3TreeVo构建父子关系

通过这个类，可以将同级关系，转化成为父子关系

package com.zking.util;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class TreeVo<T> {
  /**
   * 节点ID
   */
  private String id;
  /**
   * 显示节点文本
   */
  private String text;
  /**
   * 节点状态，open closed
   */
  private Map<String, Object> state;
  /**
   * 节点是否被选中 true false
   */
  private boolean checked = false;
  /**
   * 节点属性
   */
  private Map<String, Object> attributes;
  /**
   * 节点的子节点
   */
  private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
  /**
   * 父ID
   */
  private String parentId;
  /**
   * 是否有父节点
   */
  private boolean hasParent = false;
  /**
   * 是否有子节点
   */
  private boolean hasChildren = false;
  public String getId() {
    return id;
  }
  public void setId(String id) {
    this.id = id;
  }
  public String getText() {
    return text;
  }
  public void setText(String text) {
    this.text = text;
  }
  public Map<String, Object> getState() {
    return state;
  }
  public void setState(Map<String, Object> state) {
    this.state = state;
  }
  public boolean isChecked() {
    return checked;
  }
  public void setChecked(boolean checked) {
    this.checked = checked;
  }
  public Map<String, Object> getAttributes() {
    return attributes;
  }
  public void setAttributes(Map<String, Object> attributes) {
    this.attributes = attributes;
  }
  public List<TreeVo<T>> getChildren() {
    return children;
  }
  public void setChildren(List<TreeVo<T>> children) {
    this.children = children;
  }
  public boolean isHasParent() {
    return hasParent;
  }
  public void setHasParent(boolean isParent) {
    this.hasParent = isParent;
  }
  public boolean isHasChildren() {
    return hasChildren;
  }
  public void setChildren(boolean isChildren) {
    this.hasChildren = isChildren;
  }
  public String getParentId() {
    return parentId;
  }
  public void setParentId(String parentId) {
    this.parentId = parentId;
  }
  public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
    super();
    this.id = id;
    this.text = text;
    this.state = state;
    this.checked = checked;
    this.attributes = attributes;
    this.children = children;
    this.hasParent = isParent;
    this.hasChildren = isChildren;
    this.parentId = parentID;
  }
  public TreeVo() {
    super();
  }
}

2.3构建servelt ，配置xml文件

package com.zking.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.PermissionDao;
import com.zking.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;
public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {
  private Permission permission = new Permission();
  private PermissionDao pd = new PermissionDao();
  public void menus(HttpServletRequest req, HttpServletResponse resp) {
  try {
    List<TreeVo<Permission>> menus = pd.menus( null, null);
  ResponseUtil.writeJson(resp, menus);
  } catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
  }
  @Override
  public Permission getModel() {
    // TODO Auto-generated method stub
    return permission;
  }
}

在其中的ResponseUtil.writeJson(resp, menus);是我们封装的一个方法，

package com.zking.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.PermissionDao;
import com.zking.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;
public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {
  private Permission permission = new Permission();
  private PermissionDao pd = new PermissionDao();
  public void menus(HttpServletRequest req, HttpServletResponse resp) {
  try {
    List<TreeVo<Permission>> menus = pd.menus( null, null);
  ResponseUtil.writeJson(resp, menus);
  } catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
  }
  }
  @Override
  public Permission getModel() {
    // TODO Auto-generated method stub
    return permission;
  }
}

配置xml文件 

<action path="/permission" type="com.zking.web.PermissionAction">
  </action>

2.4在web实现效果

1.静态界面效果

2.动态界面效果

3.代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<!DOCTYPE html PUBLIC >
<html>
<head>
<head>
<meta name="viewport"
  content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>主程序</title>
<meta http-equiv="Content-Language" content="zh-CN">
</head>
<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">layout
        demo</div>
      <!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
  <!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
  lay-header-event="menuLeft"><i
  class="layui-icon layui-icon-spread-left"></i></li>
<!-- Top导航栏 -->
  <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
  <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
  <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
  <li class="layui-nav-item"><a href="javascript:;">nav
      groups</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="">menu 11</a>
      </dd>
      <dd>
        <a href="">menu 22</a>
      </dd>
      <dd>
        <a href="">menu 33</a>
      </dd>
    </dl></li>
</ul>
<!-- 个人头像及账号操作 -->
  <ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
      <a href="javascript:;"> <img
        src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
        class="layui-nav-img"> tester
    </a>
      <dl class="layui-nav-child">
        <dd>
          <a href="">Your Profile</a>
        </dd>
        <dd>
          <a href="">Settings</a>
        </dd>
        <dd>
          <a href="login.jsp">Sign out</a>
        </dd>
      </dl>
    </li>
    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
      <a href="javascript:;"> <i
        class="layui-icon layui-icon-more-vertical"></i>
    </a>
    </li>
  </ul>
</div>
<div class="layui-side layui-bg-black">
  <div class="layui-side-scroll">
    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
      <li class="layui-nav-item layui-nav-itemed"><a class=""
        href="javascript:;">menu group 1</a>
        <dl class="layui-nav-child">
          <dd>
            <a href="javascript:;">menu 1</a>
          </dd>
          <dd>
            <a href="javascript:;">menu 2</a>
          </dd>
          <dd>
            <a href="javascript:;">menu 3</a>
          </dd>
          <dd>
            <a href="">the links</a>
          </dd>
        </dl></li>
      <li class="layui-nav-item"><a href="javascript:;">menu
          group 2</a>
        <dl class="layui-nav-child">
          <dd>
            <a href="javascript:;">list 1</a>
          </dd>
          <dd>
            <a href="javascript:;">list 2</a>
          </dd>
          <dd>
            <a href="">超链接</a>
          </dd>
        </dl></li>
      <li class="layui-nav-item"><a href="javascript:;">click
          menu item</a></li>
      <li class="layui-nav-item"><a href="">the links</a></li>
    </ul>
  </div>
</div>
<div class="layui-body">
  <!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
</div>
<div class="layui-footer">
  <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<script>
//JS 
layui
    .use(
        [ 'element', 'layer', 'util' ],
        function() {
          var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;
          $
              .ajax({
                url : "${pageContext.request.contextPath }/permission.action?methodName=menus",
                dataType : 'json',
                success : function(data) {
                  console.log(data);
                  var htmlar = '';
                  $
                      .each(
                          data,
                          function(i, n) {
                            htmlar += '<li class="layui-nav-item layui-nav-itemed">';
                            htmlar += '<a class=""  href="javascript:;">'
                                + n.text
                                + '</a>';
                            if (n.hasChildren) {
                              var Children = n.Children;
                              htmlar += '<dl class="layui-nav-child">';
                              $
                                  .each(
                                      data,
                                      function(
                                          idx,
                                          node) {
                                        htmlar += '<dd><a href="">'
                                            + node.text
                                            + '</a></dd>';
                                      })
                              htmlar += '</dl>';
                            }
                            htmlar += '</li>';
                          })
                  $("#menu").html(htmlar);
                  element.render('menu');
                }
              });
        });
</script>
</body>
</html>


文章标签：
前端开发
Web App开发
UED
数据格式
XML
默不会开发
目录
相关文章
祈澈菇凉
|
12月前
layui 框架弹出一个界面弹框
layui 框架弹出一个界面弹框
祈澈菇凉
92 0
Ar.小白
|
数据可视化 前端开发 数据管理
LayUI之树形权限菜单
LayUI之树形权限菜单
Ar.小白
102 0
孤留光乩
|
前端开发 数据安全/隐私保护 UED
LayUI之树形菜单（权限管理）
LayUI之树形菜单（权限管理）
孤留光乩
314 0
Love-Java.
|
12月前
|
前端开发 JavaScript Java
Layui实现动态选项卡(超详细)
Layui实现动态选项卡(超详细)
Love-Java.
194 0
你挚爱的强哥
|
6月前
elementUI el-tabs 实现动态选项卡页面效果
elementUI el-tabs 实现动态选项卡页面效果
你挚爱的强哥
1128 0
现在是571
|
6月前
|
JSON 数据库 数据格式
Layui实现树状菜单
Layui实现树状菜单
现在是571
44 0
现在是571
|
6月前
|
JavaScript 前端开发 Java
layui选项卡的实现
layui选项卡的实现
现在是571
71 0
君临沂
|
12月前
|
前端开发 JavaScript Java
Layui的选项卡及菜单
Layui的选项卡及菜单
君临沂
152 0
艳艳耶
|
12月前
|
JavaScript 前端开发 Java
LayUI框架——选项卡
LayUI框架——选项卡
艳艳耶
55 0
不念那年晚春
|
缓存 JavaScript 前端开发
LayUI系列（三）之动态添加选项卡
LayUI系列（三）之动态添加选项卡
不念那年晚春
94 0