Layui菜单模块

这篇具有很好参考价值的文章主要介绍了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查看数据库数据,编写实体Layui菜单模块,layui,前端,javascript

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.静态界面效果

Layui菜单模块,layui,前端,javascript

 2.动态界面效果

Layui菜单模块,layui,前端,javascript文章来源地址https://www.toymoban.com/news/detail-555584.html

 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>
















到了这里,关于Layui菜单模块的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Layui之动态树 左侧树形菜单栏 详细全面

    ⭐ฅʕ•̫͡•ʔฅ本期看点:该篇是运用Layui框架来编写后台树形菜单栏,并且结合MySql来编写完成 目录 一.效果图 二.具体步骤  2.1 数据库   2.2 树形导航栏     第一个类:Treevo              第二个类:BuildTree: 2.3  Dao方法         2.3.1 basedao                

    2024年02月15日
    浏览(32)
  • layui(5)——内置模块分页模块

    模块加载名称: laypage laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染: 通过核心方法: laypage.render(options) 来设置基础参数。由于使用非常简单,本篇直接罗列核心接口的参数选项 参数选项 说明 类型 默认值 elem 指向

    2024年02月09日
    浏览(36)
  • layui(6)——上传文件模块

    到此为止!!!! 其他可以参考layui学习文档   Layui 开发使用文档 - 入门指南

    2024年02月11日
    浏览(40)
  • 前端框架Layui的使用讲解(Layui搭建登录注册页面)

    目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面(公用页面) jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭建注册页面 静态效果图 jsp页面搭建 Servlet页面编写 最

    2024年02月15日
    浏览(42)
  • layui(3)——内置模块弹出层

      使用模块 layer 参数有: type :layer提供了5种层类型。可传入的值有:0(信息框,默认)   1(页面层)    2(iframe层)    3(加载层)     4(tips层) title   :标题  自定义标题区域样式,那么你可以title: [\\\'文本\\\', \\\'\\\'],数组第二项可以写任意css样式 content   :内容

    2024年02月08日
    浏览(52)
  • layui框架学习(33:流加载模块)

      Layui中的流加载模块flow主要支持信息流加载和图片懒加载两部分内容,前者是指动态加载后续内容,示例的话可以参考csdn个人博客主页,鼠标移动到页面底部时自动加载更多内容,而后者是指页面显示图片时才会延迟加载图片信息。   flow模块支持图片懒加载,也即延

    2024年02月15日
    浏览(42)
  • 【前端】layui前端框架学习笔记

    【前端目录贴】 参考视频 :LayUI 参考笔记 :https://blog.csdn.net/qq_61313896/category_12432291.html 官网:http://layui.apixx.net/index.html 国人16年开发的框架,拿来即用,门槛低 … Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,

    2024年04月23日
    浏览(50)
  • layui框架学习(45: 工具集模块)

      layui的工具集模块util支持固定条、倒计时等组件,同时提供辅助函数处理时间数据、字符转义、批量事件处理等操作。   util模块中的fixbar函数支持设置固定条(2.7版本的帮助文档中叫固定块),是指固定在页面一侧的工具条元素,不随页面滚动条滚动,默认在页面右

    2024年02月07日
    浏览(58)
  • layui框架学习(42:文件上传模块-上)

      之前学习asp.net core编程入门教程时结合layui测试过文件上传《基于ASP.Net Core和Layui的多文件上传》,但没有认真学习过layui的文件上传模块,本文开始,计划分两章学习并记录文件上传模块中的属性、事件及函数的使用方法。   layui中的文件上传模块支持单文件上传、多

    2024年02月11日
    浏览(47)
  • layui(4)——内置模块日期与时间选择

    通过核心方法: laydate.render(options) 来设置基础参数,也可以通过方法: laydate.set(options) 来设定全局基础参数. 类型: String/DOM ,默认值: 无 必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象 类型: String ,默认值: date 用于单独提供不同的选择器类型,可

    2024年02月10日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包