hibernate+Struts2+layui写的树形菜单_element.on('nav(demo)-CSDN博客

本文链接：https://blog.csdn.net/qq_42694534/article/details/84726970

layUI学会的了就很简单，下面是界面的效果
在这里插入图片描述
前台代码：注意是要到jquery.min.js的包,用jquery-3.3.1.js的话是没用的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</head>
<script>
	layui.use('element', function() {
		var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
		//监听导航点击
		element.on('nav(demo)', function(elem) {
			//console.log(elem)
			layer.msg(elem.text());
		});
	});
</script>
<body>
	<div class="layui-side layui-bg-green ">
		<div class="layui-side-scroll ">
			<div id="demo" lay-filter="test">
				<div style="background-color:black;height:62px;">
					<a href="#" onclick="exit()">退出</a>
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-body"> 
		<div class="layui-tab" lay-filter="tabs" id="tabs"
			lay-allowClose="true">
			//这里是选项卡
			<ul class="layui-tab-title"></ul>
			<div class="layui-tab-content" style="height: 100px;"></div>
		</div>
	</div>
</body>
//这里的样式要写入哦！不然就不是竖着的了
<style type="text/css">
.layui-tree li i {
	color: rgba(255, 255, 255, .7);
	display: none;
}

.layui-tree li a cite {
	color: rgba(255, 255, 255, .7)
}

.layui-tree li .layui-tree-spread {
	display: block;
	position: absolute;
	right: 30px;
}

.layui-tree li {
	line-height: 45px;
	position: relative;
}

.layui-tree li ul {
	margin-left: 0;
	background: rgba(0, 0, 0, .3);
}

.layui-tree li ul a {
	padding-left: 20px;
}

.layui-tree li a {
	height: 45px;
	border-left: 5px solid transparent;
	box-sizing: border-box;
	width: 100%;
}

.layui-tree li a:hover {
	background: #4E5465;
	color: #fff;
	border-left: 5px solid #009688;
}

.layui-tree li a.active {
	background: #009688;
}
</style>
</html>

这里是返回来的json数据，要注意格式哦
在这里插入图片描述

这里是配置映射文件，树形菜单需要建立起关系

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC 
    "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
    "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
	<!-- name：类的权限定名，table :指定的类所对应的表 -->
	<class name="com.zking.entity.Right" table="sys_right">
		<id name="id" type="java.lang.String" column="right_code">
			<!-- 程序员自己控制：assigned，数据库自己控制：identity(标识列、自动增长列)sequence -->
			<!-- hibernate控制：increment uuid/uuid.hex -->
			<generator class="uuid"></generator>
		</id> 
		<!-- name为实体类的列名，type为所对应的数据类型，column为数据库的字段名 -->
		<property name="fid" type="java.lang.String"
			column="right_type"></property>
		<property name="name" type="java.lang.String"
			column="right_text"></property>
		<property name="url" type="java.lang.String"
			column="right_url"></property>
		<property name="right_tip" type="java.lang.String"
			column="right_tip"></property>

		<!-- 当前节点与父节点是多对一的关系 -->
		<many-to-one name="right"
			class="com.zking.entity.Right" column="right_parent_code"></many-to-one>
		<!-- 当前节点与父节点是一对多的关系 lazy="false"  -->
		<set name="children"  lazy="false"   >
			<key column="right_parent_code"></key>
			<one-to-many class="com.zking.entity.Right" />
		</set>

	</class>
</hibernate-mapping>

js文件

$(function () { 
    $.ajax({
        type: "post",
        url: "/CRM/sy/rightAction_all.action",//数据接口
        dataType: "json",
        data: {
        	right_code: "0",
            d: new Date()
        }, async: false,
        success : function(data) { 
			console.log(data);
			var node=data.rows;
			layui.tree({
				elem : '#demo' ,// 传入元素选择器
				nodes : data.rows,
//				spread:true,
				click : function(node) {// 点击tree菜单项的时候
					var element = layui.element;
				    var exist=$("li[lay-id='"+node.id+"']").length;//判断是不是用重复的选项卡
					if (exist > 0) {
						element.tabChange('tabs', node.id);// 切换到已有的选项卡
					} else {
						if (node.url != null) {// 判断是否需要新增选项卡
							element.tabAdd('tabs',{
								title : node.name,
								content : '<iframe scrolling="no" frameborder="0" src="'+"/CRM"+ node.url + '" width="99%" height="99%"></iframe>',// 支持传入html
								id : node.id
							});
							element.tabChange('tabs', node.id);
						}
					}
				}
			});
		}
 

    });
})

然后action直接调用到方法就可以啦！
小编的这篇博客如果对你有帮助的话，记得d(ﾟ∀ﾟd)点赞哦!