layui之动态展⽰Tree树形菜单及tab页
⽬录
Layui框架简介
layui（谐⾳：类UI) 是⼀款采⽤⾃⾝模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即⽤。其外在极简，却⼜不失饱满的内在，体积轻盈，组件丰盈，从核⼼代码到 API 的每⼀处细节都经过精⼼雕琢，⾮常适合界⾯的快速开发。
动态展⽰树形菜单前端
①⾸先我们需要到官⽅⽹址去下载其框架layui包，导⼊项⽬中。
②在项⽬中引⼊其对应的 js 以及 css
//在这⾥要引⼊⾃⼰项⽬中其对应的css以及js 建议⼤家在前⾯写绝对路径，防⽌搞不清层次关系。
<link rel="stylesheet" href="${tPath }/static/js/layui/css/layui.css" >
//引⼊的顺序不能错
<script src="${tPath }/static/js/layui/layui.js"></script>
③我们先来写jsp界⾯的代码。
在这⾥我把树形菜单的js代码进⾏了封装，以及tab页，这样便于我们错误，我们只需要在这个界⾯引⼊⾃⼰写的树形菜单js代码即可。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html >
<head>
<meta charset="UTF-8">
<title>lt</title>
<link rel="stylesheet" href="${tPath }/static/js/layui/css/layui.css" media="all"> <script src="${tPath }/static/js/layui/layui.js"></script>
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
</head>
<body >
<div class="layui-layout layui-layout-admin " id="app">
<div class="layui-header">
<div class="layui-logo">后台管理界⾯</div>
<!-- 头部区域（可配合layui已有的⽔平导航） -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item"><a href="#" onclick="exit()">退出登录</a></li>
</ul>
</div>
<!-- 左边tree页⾯ -->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll ">
<div id="demo" ></div>
</div>
</div>
<!-- 选项卡要显⽰的地⽅ -->
<div class="layui-body">
<div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
<ul class="layui-tab-title">
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
<div class="layui-footer" align="center" >
<!-- 底部固定区域 -->
© layui - 底部固定区域
</div>
</div>
<script type="text/javascript" src="${tPath }/static/js/layui/layui.all.js"></script> <link rel="stylesheet" href="${tPath }/static/js/layui/css/index.css">
<script type="text/javascript" src="${tPath }/static/js/index.js"></script>
</body>
</html>
这⾥是展⽰树形菜单的样式
①layui.all.js
②index.css
Layui⽤来展⽰树形菜单的js index.js:
$(function () {
$.ajax({
type: "post",
url: "menuAction.action?methodName=treeMenu",
dataType: "json",
/*data: {// 传给servlet的数据,
role_id: MenuHid,
right_code: "-1",
d: new Date()
},*/
success: function (data) {
console.info(data);
<({
elem: '#demo',// 传⼊元素选择器
nodes: data,
// 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 (uURL != null && uURL != "") {// 判断是否需要新增选项卡
element.tabAdd(
'tabs',
{
title: node.name,
content: '<iframe scrolling="yes" frameborder="0" src=" '
+ uURL
+ ' " width="100%" height="100%"></iframe>'// ⽀持传⼊html
,
// width="99%" height="99%"
id: node.id
});
element.tabChange('tabs', node.id);
}
}
}
});
}
});
})
这时候我们前端的代码就写好了
layui下载我们再来进⾏后台的操作，我们先需要对其layui树形菜单的格式进⾏描述（id,name,attributes,children），写⼀个实体类Tree Node
package ity;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class TreeNode {
private String id;
private String name;
private Map<String, Object> attributes = new HashMap<>();
private List<TreeNode> children = new ArrayList<>();
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Map<String, Object> getAttributes() {
return attributes;
}
public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) {
super();
this.id = id;
this.name = name;
this.attributes = attributes;
this.children = children;
}
public TreeNode() {
super();
}
@Override
public String toString() {
return "TreeNode [id=" + id + ", name=" + name + ", attributes=" + attributes + ", children=" + children + "]"; }
}
树形菜单后台代码
②写dao层(操作数据库) ，因为layui树形菜单是json格式，所以我们在dao层需要写递归，来进⾏转换layui所能识别的json格式。
package com.liuting.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import ity.TreeNode;
import com.liuting.util.JsonBaseDao;
import com.liuting.util.JsonUtils;
import com.liuting.util.PageBean;
import com.liuting.util.StringUtils;
public class MenuDao extends JsonBaseDao {
/**
* map ParameterMap
* pageBean 分页
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
List<Map<String,Object>> listMenu = this.listMenu(map, pageBean);
List<TreeNode> treeNodeList=new ArrayList<>();
menuList2TreeNodeList(listMenu, treeNodeList);
return treeNodeList;
}
/**
* 查询menu表的数据
* @param map
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLE xception{
String sql="select * from t_easyui_menu where true";
String ParamVal(map, "id");
if(StringUtils.isNotBlank(id)) {
sql=sql+" and parentid="+id;
}else {
sql= sql+" and parentid =-1";
}
uteQuery(sql, pageBean);
}
/**
* menu表达数据不符合树形展⽰的数据格式
* 需要转成easyui所能识别的数据格式
* @param map
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论