LayUi之树形结构的详解（附有全案例代码）

已于 2023-07-30 15:53:40 修改
阅读量3.1k 收藏 10
点赞数 10
分类专栏： LayUi 文章标签： layui 前端 javascript
于 2023-07-12 10:34:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74315688/article/details/131675065
版权

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于LayUi的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一. 什么是树形结构

二.树形结构在什么时候使用（常见使用场景）

三.怎么完成树形结构中的数据交互 (思路)

1. 设计数据库表结构：

2. 插入数据：

3. 查询数据：

4. 处理层级关系：

5.编写servlet

6.jsp界面接收数据

7.最终效果展示

四.详细案例解析

实现效果

思路

表结构

实体类

工具类

配置文件

公共页面（引入的文件）

jsp界面

dao

servlet

上篇我们已经对LayUi有了一个基本的了解，并且使用它做出了两个简单的小案例，那么本篇，我们就来看看它其中的动态树组件吧！

其中还是有用到自定义mvc框架，不懂的小伙伴可以点击下方链接查看
自定义MVC框架【上篇】http://t.csdn.cn/giVlE

自定义MVC框架【中篇】--框架实现http://t.csdn.cn/pzCMx
自定义MVC框架【下篇】--运用框架完成增删改查http://t.csdn.cn/RHgke

一. 什么是树形结构

  • 树形结构是一种层次化的数据结构，采用分层的方式来组织和表示数据。它由节点（node）和边（edge）组成，节点代表数据的存储单元，边代表节点之间的关系
    • 树形结构中有一个根节点（root），它是整个树的起点，根节点可以有多个子节点（child node），每个子节点又可以有自己的子节点，如此递归下去，形成树状的结构。每个节点可以有任意数量的子节点，但一个节点只有一个父节点（除了根节点）。没有子节点的节点被称为叶节点（leaf node），而有子节点的节点称为内部节点
    • 树形结构可以用来表示各种实际问题，如文件系统的目录结构、组织机构的层级关系等。它具有良好的扩展性和灵活性，在查找、插入和删除等操作上具有较高的效率

二.树形结构在什么时候使用（常见使用场景）

  • 1. 文件系统：操作系统中的文件系统通常使用树形结构来组织文件和目录的层次关系。每个目录可以包含多个子目录和文件，形成一棵文件树
  • 2. 组织机构：组织机构中的层级关系常常可以使用树形结构来表示，如企业组织结构、学校院系结构等。每个部门或学院可以有多个子部门或学系，形成组织机构的分层关系
  • 3. 数据分类和分类索引：树形结构可以用于对数据进行分类和分类索引，如图书分类系统、商品分类系统等。每个分类可以有多个子分类，构建出数据的层级分类结构，方便数据的管理和检索
  • 4. XML和HTML文档：XML和HTML文档中的标签元素可以形成树形结构的层次关系，通过父子关系来表示不同元素之间的层级关系
  • 5. 数据库索引：数据库中的索引可以使用树形结构来组织，如B树和B+树等索引结构。这些树形结构可以加速数据库的查询操作
  • 6. 算法和数据结构：许多常见的算法和数据结构都基于树形结构，如二叉树、AVL树、红黑树等。这些树形结构可用于高效地实现搜索、排序和存储等操作
  • 7. 路由和网络拓扑：网络中的路由和网络拓扑结构常常使用树形结构来表示，通过节点和边的关系来描述设备之间的连接和通信路径
  • 8. AI决策树和推荐系统：在人工智能领域，决策树被广泛应用于分类和预测问题，通过递归地划分特征空间来进行决策。推荐系统中也可以使用树形结构来组织用户和物品之间的关系

这些只是树形结构的一些常见使用场景，实际上，树形结构在很多领域都有着重要的应用价值，可以更好地组织和表示复杂的关系和层级结构

三.怎么完成树形结构中的数据交互 (思路)

  • 1. 设计数据库表结构：

    • 首先需要设计合适的数据库表结构来存储树形结构的数据。通常可以使用两种方法来表示树型结构的数据库表设计：邻接表模型和嵌套集模型。邻接表模型使用一张表，每行记录代表一个节点，通过一个外键来表示父节点与子节点之间的关系。嵌套集模型使用两个字段来表示每个节点的左右边界，通过这些边界值可以确定节点的子节点

  • 2. 插入数据：

    • 将树形结构的数据插入到数据库表中。可以按照规定的表结构，逐个节点地插入到相应的表中，确保每个节点的数据与其父节点正确关联

  • 3. 查询数据：

    • 可以使用SQL等查询语言来从数据库中获取树形结构的数据。根据具体的需求，可以使用递归查询、连接查询或者子查询等方式来获得树形结构中的节点及其关系
    • package com.wh.dao;

import java.util.ArrayList;
import java.util.List;

import com.wh.entity.Permission;
import com.wh.entity.User;
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);
		}	
}

  • 4. 处理层级关系：

    • 根据查询出来的数据，可以根据节点之间的层级关系来构建树形结构，并进行进一步的处理。可以使用编程语言中的数据结构或者自定义类来表示和操作树形结构
    • package com.wh.dao;

import java.util.ArrayList;
import java.util.List;

import com.wh.entity.Permission;
import com.wh.entity.User;
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>{
	//将原数据转换成有层级关系的数据（借助自定义 工具类TreeVo完成）
	public List<TreeVo<Permission>> menus( Permission permission, PageBean pageBean) throws Exception {
		List<TreeVo<Permission>> menus = new ArrayList<>();
		List<Permission> list = this.list(permission, pageBean);
		for (Permission p : list) {
			TreeVo<Permission> tv = new TreeVo<>();
			tv.setId(p.getId()+"");
			tv.setParentId(p.getPid()+"");
			tv.setText(p.getName());
			menus.add(tv);
		}
//		return menus;
		return BuildTree.buildList(menus, "-1");//-1是顶级节点的id
	}
		
		
}

  • 5.编写servlet

    • package com.wh.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.wh.dao.PermissionDao;
import com.wh.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
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) {
					e.printStackTrace();
				}
	}
	@Override
	public Permission getModel() {
		return permission;
	}

}

  • 6.jsp界面接收数据

    • <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
  <%@include file="/common/head.jsp" %>
</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.$;
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });
  
}); */

/* 树形菜单 */
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',
 		method: 'post',
		success: function(data) {
			console.info(data)
			var content=' ';
			$.each(data,function(i,n){
				content+=' <li class="layui-nav-item layui-nav-itemed"> ';
				content+='		<a class="" href="javascript:;">'+n.text+'</a> ';  
				
				if(n.hasChildren){
				var children =n.children;
				content+='<dl class="layui-nav-child"> ';
				$.each(children,function(idx,nodes){
					content+=' <dd><a href="javascript:;">'+nodes.text+'</a></dd> ';
				})
				content+='</dl>';
				}
				
				content+=' </li>';
			
			})
			
			$("#menu").html(content);
			 element.render();		
		}
	 })
});
	  




</script>
<script type="text/javascript">

</script>
</body>
</html>

  • 7.最终效果展示

四.详细案例解析

实现效果

思路

  1. 先要从layui的文档中找到树形菜单的样式，将其粘贴过来使用
  2. 观察树形菜单➡所需数据【json&&有层级关系的数据】
  3. 将原本的数据查询出来，借助工具类将其转换成我们所需要的数据
  4. 将所需要的数据进行循环遍历
    1. 外层循环：一级菜单
    2. 内层循环：二级菜单（需要与一级菜单的id相比，一样便遍历）

表结构

实体类

package com.wh.entity;

public class Module {
private int id;
private int pid;
private String name;
private String icon;
private String url;
private int sort;

public Module() {
	// TODO Auto-generated constructor stub
}

public Module(int id, int pid, String name, String icon, String url, int sort) {
	super();
	this.id = id;
	this.pid = pid;
	this.name = name;
	this.icon = icon;
	this.url = url;
	this.sort = sort;
}

public int getId() {
	return id;
}

public void setId(int id) {
	this.id = id;
}

public int getPid() {
	return pid;
}

public void setPid(int pid) {
	this.pid = pid;
}

public String getName() {
	return name;
}

public void setName(String name) {
	this.name = name;
}

public String getIcon() {
	return icon;
}

public void setIcon(String icon) {
	this.icon = icon;
}

public String getUrl() {
	return url;
}

public void setUrl(String url) {
	this.url = url;
}

public int getSort() {
	return sort;
}

public void setSort(int sort) {
	this.sort = sort;
}

@Override
public String toString() {
	return "Module [id=" + id + ", pid=" + pid + ", name=" + name + ", icon=" + icon + ", url=" + url + ", sort=" + sort
			+ "]";
}




}

工具类

package com.zking.util;
 
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
 
/**
 * 提供了一组获得或关闭数据库对象的方法
 * 
 */
public class DBAccess {
	private static String driver;
	private static String url;
	private static String user;
	private static String password;
 
	static {// 静态块执行一次，加载 驱动一次
		try {
			InputStream is = DBAccess.class
					.getResourceAsStream("config.properties");
 
			Properties properties = new Properties();
			properties.load(is);
 
			driver = properties.getProperty("driver");
			url = properties.getProperty("url");
			user = properties.getProperty("user");
			password = properties.getProperty("pwd");
 
			Class.forName(driver);
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}
 
	/**
	 * 获得数据连接对象
	 * 
	 * @return
	 */
	public static Connection getConnection() {
		try {
			Connection conn = DriverManager.getConnection(url, user, password);
			return conn;
		} catch (SQLException e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}
 
	public static void close(ResultSet rs) {
		if (null != rs) {
			try {
				rs.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}
 
	public static void close(Statement stmt) {
		if (null != stmt) {
			try {
				stmt.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}
 
	public static void close(Connection conn) {
		if (null != conn) {
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}
 
	public static void close(Connection conn, Statement stmt, ResultSet rs) {
		close(rs);
		close(stmt);
		close(conn);
	}
 
	public static boolean isOracle() {
		return "oracle.jdbc.driver.OracleDriver".equals(driver);
	}
 
	public static boolean isSQLServer() {
		return "com.microsoft.sqlserver.jdbc.SQLServerDriver".equals(driver);
	}
	
	public static boolean isMysql() {
		return "com.mysql.cj.jdbc.Driver".equals(driver);
	}
 
	public static void main(String[] args) {
		Connection conn = DBAccess.getConnection();
		System.out.println(conn);
		DBAccess.close(conn);
		System.out.println("isOracle：" + isOracle());
		System.out.println("isSQLServer：" + isSQLServer());
		System.out.println("isMysql：" + isMysql());
		System.out.println("数据库连接(关闭)成功");
	}
}
package com.zking.util;
 
import java.lang.reflect.Field;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/*
 * 通用的增删改以及查询
 */
public class BaseDao<T> {
	/**
	 * @author W
	 * 
	 * 通用版分页查询
	 * @param sql sql语句
	 * @param clas 指定对象类类
	 * @param pageBean 分页工具类
	 * @return list 结果集
	 * @throws Exception
	 */
	public List<T> executeQuery (String sql,Class clas,PageBean pageBean) throws Exception{
		Connection conn = null;//连接对象
		PreparedStatement ps = null;//执行对象
		ResultSet rs = null;//结果集对象
		List<T> list= new ArrayList<T>();//集合
		/**
		 * 是否分页？
		 */
		if(pageBean!=null&&pageBean.isPagination()) {//如果分页的工具类传进来了【不为空】，并且分页工具类的是否分页的方法的返回值是true时
			//那么便定义分页的sql语句和符合条件的总记录数
			String countSql=getCountSql(sql);//符合条件的总记录数的sql
			conn = DBAccess.getConnection();//获取连接对象
			ps = conn.prepareStatement(countSql);//执行sql语句
			rs=ps.executeQuery();//获取结果集对象
			if(rs.next()) {
				pageBean.setTotal(rs.getObject("n").toString());//结果集查询的结果设置到分页工具类的总记录的方法中
			}
			String pageSql=getPageSql(sql,pageBean);//分页的sql
			conn = DBAccess.getConnection();//获取连接对象
			ps = conn.prepareStatement(pageSql);//执行sql语句
			rs=ps.executeQuery();//获取结果集对象
		}else {
			conn = DBAccess.getConnection();//获取连接对象
			ps = conn.prepareStatement(sql);//执行sql语句
			rs=ps.executeQuery();//获取结果集对象
		}
		while(rs.next()) {
			T t= (T) clas.newInstance();//类类
			Field[] fields = clas.getDeclaredFields();//拿到特定实体的所有的属性
			for (Field field : fields) {//遍历所有的属性
				field.setAccessible(true);//打开权限通道，可以拿到私有的属性
				field.set(t, rs.getObject(field.getName()));//为指定的实体对象更改指定的属性
			}
			list.add(t);//将其加入到集合中
		}
		return list;//返回集合
	}
 
	/**
	 * 符合条件的总记录数
	 * @param sql 查询的sql语句
	 * @return 符合条件的总记录数的sql语句
	 */
	private String getCountSql(String sql) {
		return " select count(1) as n from ( "+sql+" ) t";//sql语句
	}
 
	/**
	 * 分页的sql语句
	 * @param sql 查询的sql语句
	 * @param pageBean 分页工具类
	 * @return 分页的sql语句
	 */
	private String getPageSql(String sql, PageBean pageBean) {
		return sql+" limit  "+pageBean.getStartIndex()+", "+pageBean.getRows();//sql语句
	}
	
	
	
	
	/**
	 * @author W
	 * 通用的增删改
	 */
	public int executeUpdate (T t,String sql,String [] attr) throws Exception{
		Connection conn = DBAccess.getConnection();//获取连接对象
		PreparedStatement ps =conn.prepareStatement(sql);//执行sql语句
		for (int i = 0; i < attr.length; i++) {//遍历装有对象属性的数组
			Field field = t.getClass().getDeclaredField(attr[i]);//动态实例化并拿到此对象中所有属性
			field.setAccessible(true);//打开获取私有属性的通道
			ps.setObject(i+1, field.get(t));//为占位符赋值
		}
		return ps.executeUpdate();
	}
 
}
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();
	}

}
package com.zking.util;
 
import java.io.PrintWriter;
 
import javax.servlet.http.HttpServletResponse;
 
import com.fasterxml.jackson.databind.ObjectMapper;
/*
*jaso格式数据的转换与回显
*/
 
public class ResponseUtil {
 
	public static void write(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}
	
	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
		ObjectMapper om = new ObjectMapper();
//		om.writeValueAsString(o)代表了json串
		write(response, om.writeValueAsString(o));
	}
}

配置文件

#oracle9i
#driver=oracle.jdbc.driver.OracleDriver
#url=jdbc:oracle:thin:@localhost:1521:ora9
#user=test
#pwd=test
 
 
#sql2005
#driver=com.microsoft.sqlserver.jdbc.SQLServerDriver
#url=jdbc:sqlserver://localhost:1423;DatabaseName=test
#user=sa
#pwd=sa
 
 
#sql2000
#driver=com.microsoft.jdbc.sqlserver.SQLServerDriver
#url=jdbc:microsoft:sqlserver://localhost:1433;databaseName=unit6DB
#user=sa
#pwd=888888
 
#mysql5
#driver=com.mysql.jdbc.Driver
#url=jdbc:mysql://127.0.0.1:3306/mybatis_ssm?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT
#user=mybatis_ssm
#pwd=xiaoli
 
#mysql8
driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/mybatis_ssm?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT&useSSL=true
user=root
pwd=123456
 
 
 
<?xml version="1.0" encoding="UTF-8"?>
<config>
	
	<action path="/user" type="com.wh.web.UserAction">
	</action>
	
	
	<action path="/permission" type="com.wh.web.PermissionAction">
	</action>

	<action path="/module" type="com.wh.web.ModuleAction">
	</action>
</config>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
 <display-name>T269_mvc_crud</display-name>
  <servlet>
  	<servlet-name>mvc</servlet-name>
  	<servlet-class>com.zking.framework.DispatchServlet</servlet-class>
  	<init-param>
  		<param-name>configurationLocation</param-name>
  		<param-value>/mvc.xml</param-value>
  	</init-param>
  </servlet>
  <servlet-mapping>
  	<servlet-name>mvc</servlet-name>
  	<url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

公共页面（引入的文件）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<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">
<meta http-equiv="Content-Language" content="zh-CN">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" type="text/css" media="all">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>

jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
  <%@include file="/common/head.jsp" %>
</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;">树形结构的演示-是辉辉啦！！</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.$;
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });
  
}); */

/* 树形菜单 */
layui.use(['element', 'layer', 'util'], function(){
	  var element = layui.element
	  ,layer = layui.layer
	  ,util = layui.util
	  ,$ = layui.$;
	  
	 $.ajax({
		 url:"${pageContext.request.contextPath}/module.action?methodName=menus",
 		dataType:'json',
 		method: 'post',
		success: function(data) {
			console.info(data)
			var content=' ';
			$.each(data,function(i,n){
				content+=' <li class="layui-nav-item layui-nav-itemed"> ';
				content+='		<a class="" href="javascript:;">'+n.text+'</a> ';  
				
				
				if(n.hasChildren){
				var children =n.children;
				content+='<dl class="layui-nav-child"> ';
				$.each(children,function(idx,nodes){
					content+=' <dd><a href="javascript:;">'+nodes.text+'</a></dd> ';
				})
				content+='</dl>';
				}
				
				content+=' </li>';
			
			})
			
			$("#menu").html(content);
			 element.render(); 		
		}
	 })
});
	  




</script>
<script type="text/javascript">

</script>
</body>
</html>

dao

package com.wh.dao;

import java.util.ArrayList;
import java.util.List;

import com.wh.entity.Module;
import com.wh.entity.Permission;
import com.wh.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;

public class ModuleDao extends BaseDao<Module>{
	//查询所有
		public List< Module> list(  Module  module, PageBean pageBean) throws Exception {
	  String sql="select * from t_module";
			return super.executeQuery(sql,  Module.class, pageBean);
		}
	
	
	//将原数据转换成有层级关系的数据（借助自定义 工具类TreeVo完成）
	public List<TreeVo< Module>> menus(  Module  module, PageBean pageBean) throws Exception {
		List<TreeVo<Module>> menus = new ArrayList<>();
		List<Module> list = this.list(module, pageBean);
		for (Module m : list) {
			TreeVo<Module> tv = new TreeVo<>();
			tv.setId(m.getId()+"");
			tv.setParentId(m.getPid()+"");
			tv.setText(m.getName());
			menus.add(tv);
		}
//		return menus;
		return BuildTree.buildList(menus, "-1");//-1是顶级节点的id
	}
		
		
}

servlet

package com.wh.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.wh.dao.ModuleDao;
import com.wh.dao.PermissionDao;
import com.wh.entity.Module;
import com.wh.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;

public class ModuleAction extends ActionSupport implements ModelDriver< Module>{
private  Module  module = new  Module();
private  ModuleDao md = new  ModuleDao();

	public void menus(HttpServletRequest req, HttpServletResponse resp) {
				try {
					List<TreeVo< Module>> menus = md.menus(null, null);
					ResponseUtil.writeJson(resp, menus);
				} catch (Exception e) {
					e.printStackTrace();
				}
	}
	@Override
	public  Module getModel() {
		return  module;
	}

}

      好啦，今天的分享就到这了，希望能够帮到你呢！😊😊         

是辉辉啦
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
详解layui中的树形关于取值传值问题
08-28
layui 中的树形控件取值传值问题详解 layui 是一个流行的前端 JavaScript 库，提供了许多有用的控件和功能，其中树形控件是其中一个非常实用的控件。然而，在使用 layui 的树形控件时，开发者可能会遇到取值传值...
java数据结构排序算法之树形选择排序详解
08-30
java数据结构排序算法之树形选择排序详解 树形选择排序是一种高效的排序算法，它可以降低比较次数，提高排序效率。下面我们将详细介绍树形选择排序的原理、实现技巧与相关注意事项。 树形选择排序的原理： 树形...
Layui动态树详解
m0_74018330的博客
07-12 2476
Layui动态树详解一、什么是动态树形？二、Layui动态树形基本使用三、动态加载数据4.案列1.实体类2.dao方法3.子实现类4.jsp页面 前言 在前端开发过程中，树形控件是比较常用的控件之一。而Layui框架中，也提供了基于jQuery的树形控件。除了普通的静态树形外，Layui还提供了动态树形。在本篇博客中，我将详细介绍Layui的动态树形控件。 一、什么是动态树形？ 动态树形是指树形结构中的节点是动态生成的，而不是在页面初始化时就固定好的。在用户进行某些操作（如展开或折叠节点、勾选或取消勾
使用记录：layUI的treeTable树结构表格的使用
weixin_64096823的博客
06-21 365
layUI的treeTable树结构表格的使用记录，参考各位大神也没弄成简易版的，最后改嵌套式父子结构成功。
Layui之动态树(树形菜单)详解
ChatYU的博客
07-12 3395
树形菜单的展示及编写，菜单栏的级别
数据结构：树(Tree)【详解】
热门推荐
UniqueUnit的博客
02-26 16万+
树 一、知识框架 二、考纲内容 树的基本概念 二叉树 二叉树的定义及其主要特征；二叉树的顺序存储结构和链式存储结构；二叉树的遍历；线索二叉树的基本概念和构造 树、森林 树的存储结构；森林与二叉树的转换；树和森林的遍历 树与二叉树的应用 二叉排序树；平衡二叉树；哈夫曼树和哈弗编码 三、树的基本概念 1、树的定义 树是n（n>=0）个结点的有限集。当n = 0时，称为空树。在任意一棵非空树中应满足： 有且仅有一个特定的称为根的结点。 当n>1时，其余节点可分为m（m>
LayUI树形表格treetable使用详解
小马同学
04-29 14万+
LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 layui.config({ base : 'static/layui/' }).extend({ treetable : 'treetable-lay/treetab...
LayUi基础入门【附有案例从0到1详解】
m0_74315688的博客
07-11 4321
不怎么怎么使用LayUi？一篇文章保姆级教学，让你一秒学会使用LayUi！！
Layui实现TreeTable(树形数据表格)
RoyRaoHR的博客
10-21 1万+
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee：ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。 优化结果： 原页面 treetable实现的页面 实现 下载引入treetable.js 我用的版本是
LayUi之选项卡的详解（附源码讲解）
m0_74315688的博客
07-12 1630
怎么用LayUi完成选项卡的效果？怎么做出对应的案例？一篇全部解决，手把手教学！！
mysql树形查询详解
qq_34462698的博客
01-25 6224
使用的核心函数 FIND_IN_SET() 原表 sql create table `dept` ( `code` varchar (255), `name` varchar (255), `parent_code` varchar (255) ); insert into `dept` (`code`, `name`, `parent_code`) values('C105','总公司',null); insert into `dept` (`code`, `name`, `p
java之TreeUtils生成一切对象树形结构
mayfly_hml的博客
04-02 3791
  项目中经常会遇到各种需要以树形结构展示的功能，比较常见的，如菜单树，分类树，部门树等等，如果为每种类型都遍历递归生成树形结构返回给前端，显得有些冗余且麻烦，并且其实逻辑都是一致的，只是遍历的对象不同而已，故其实可以通过面向接口思维，来实现这种通用工具类的实现。 TreeNode用来表示每个树节点的抽象，即需要生成树的对象需要实现此接口。 /** * 树节点父类，所有需要使用{@l...
layui扩展组件之树形下拉多选组件
12-19
**layui扩展组件之树形下拉多选组件详解** 在前端开发中，用户界面的交互性和易用性是至关重要的。layui是一个轻量级、模块化的前端框架，它提供了丰富的组件来帮助开发者快速构建优雅的网页应用。在这个场景中，...
jQuery纵向树形结构图菜单代码.zip
09-23
《jQuery纵向树形结构图菜单代码详解》 在网页开发中，树形结构图菜单是一种常见且实用的设计，尤其在展示层级关系时效果显著。本文将深入解析标题为"jQuery纵向树形结构图菜单代码.zip"的压缩包内容，帮助读者理解...
Python金融大数据挖掘与分析全流程详解-学习笔记及案例代码.zip
06-05
Python金融大数据挖掘与分析全流程详解-学习笔记及案例代码.zip Python金融大数据挖掘与分析全流程详解-学习笔记及案例代码.zip Python金融大数据挖掘与分析全流程详解-学习笔记及案例代码.zip Python金融大数据挖掘...
Layui修改表格分页为英文
qq_46517733的博客
07-24 379
主要记录初次使用Layui没有好好看官方文档踩坑，修改了源码才发现可以自定义使用的Layui版本2.9.14。
怎么在使用select2时，覆盖layui的下拉框样式
qq_36973384的博客
07-24 278
* 改变边框样式 *//* 蓝色边框 *//* 改变边框圆角 *//* 改变背景色 *//* 白色背景 *//* 改变字体样式 *//* 可以在这里添加更多的样式，比如padding, margin, color等 *//* 内边距 *//* 外边距 *//* 注意：改变下拉列表（即选项列表）的样式通常是不可能的，因为它是由浏览器控制的 */
Layui Selcet选择框动态选择问题
最新发布
m0_66648798的博客
07-24 514
时隔多日我也是重新回归写作，高考已经完毕，我将继续我的文章创作，今天我将分享的是我在开发我自己的一个新项目所遇到的问题，这里预告一下我的新项目: VitaApi管理系统 这个系统可以看作是萌新源api管理系统的延续，算是续作吧，也是我为了完成高考前想要写一套不错的api管理系统的愿望，大家后续可以关注一下进展，如果项目完工我也会在各大平台发布通知的。
layui框架轮播图效果代码详解
05-04
Layui框架提供了多种轮播图效果，其中常用的是基于carousel模块的轮播效果。下面详细介绍一下如何使用Layui实现轮播图效果。 1. 引入Layui库 在HTML文件中引入Layui库的CSS和JS文件，例如： ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 编写HTML结构 在HTML文件中编写轮播图的HTML结构，例如： ```html <div class="layui-carousel" id="test1"> <div carousel-item> <div>轮播1</div> <div>轮播2</div> <div>轮播3</div> <div>轮播4</div> <div>轮播5</div> </div> </div> ``` 其中，`layui-carousel`是轮播图的父容器，`test1`是轮播图的ID，`carousel-item`是轮播图的子容器，包含了多个轮播项。 3. 初始化轮播图 在JavaScript文件中，使用Layui的carousel模块初始化轮播图，例如： ```javascript layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1', width: '100%', height: '500px', interval: 5000, arrow: 'always', indicator: 'inside', autoplay: true }); }); ``` 其中，`elem`指定轮播图的ID，`width`和`height`分别指定轮播图的宽度和高度，`interval`指定轮播的间隔时间，`arrow`指定箭头显示的方式，`indicator`指定指示器显示的位置，`autoplay`指定是否自动播放。 4. 完整代码示例 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui轮播图效果代码详解</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-carousel" id="test1"> <div carousel-item> <div><img src="https://cdn.pixabay.com/photo/2016/01/05/17/51/apple-1122538_960_720.jpg" alt=""></div> <div><img src="https://cdn.pixabay.com/photo/2015/03/26/09/40/technology-690119_960_720.jpg" alt=""></div> <div><img src="https://cdn.pixabay.com/photo/2017/05/31/18/38/industry-236580_960_720.jpg" alt=""></div> <div><img src="https://cdn.pixabay.com/photo/2016/11/19/17/14/breakfast-1846110_960_720.jpg" alt=""></div> </div> </div> <script src="layui/layui.js"></script> <script> layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1', width: '100%', height: '500px', interval: 5000, arrow: 'always', indicator: 'inside', autoplay: true }); }); </script> </body> </html> ``` 以上就是使用Layui框架实现轮播图效果的详细代码解析。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是辉辉啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值