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)点赞哦!