LayUi之数据表格的增删改查（内含完整源代码）

是辉辉啦

已于 2023-07-30 15:53:10 修改

阅读量5.9k

点赞数 6

分类专栏： LayUi 文章标签： layui 前端 javascript

于 2023-07-14 22:20:52 首次发布

本文链接：https://blog.csdn.net/m0_74315688/article/details/131732429

版权

LayUi 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

一.数据表格是什么

二.数据表格在什么时候使用（常见使用场景）

userManage.jsp（数据展示&模糊查询&删除界面）

userManage.js（对应界面的js）

一.数据表格是什么

layui是一个基于web前端的UI框架，它提供了一系列简洁、易用的UI组件，包括数据表格（table）组件。数据表格是layui框架中用于展示和处理表格数据的组件
在layui中，数据表格（table）组件可以通过简单的HTML结构和一些配置参数来创建。你可以在HTML中定义表格的基本结构，然后使用JavaScript代码初始化并配置表格组件。同时，你也可以通过代码动态地添加、修改和删除表格中的数据
数据表格组件支持多种功能和样式配置，例如：分页、排序、筛选、编辑、格式化等。你可以根据自己的需求和设计要求，选择合适的配置参数来展示和处理表格数据

二.数据表格在什么时候使用（常见使用场景）

1. 数据管理和浏览：
数据表格常用于展示和管理后台系统的数据，如用户管理、订单管理、商品管理等。它可以以表格形式呈现数据，同时提供分页、排序、筛选等功能，方便用户快速浏览和操作数据
2. 报表和统计：
数据表格也是生成报表和统计数据的常见工具。它可以将复杂的数据按照规定的行和列格式化展示，帮助用户更直观地理解和分析数据
3. 数据导出和导入：
数据表格组件通常提供了导出和导入数据的功能，可以将表格中的数据以Excel、CSV等格式导出，也可以通过导入功能将外部数据导入到表格中进行处理和展示
4. 数据编辑和操作：
数据表格可以支持用户对表格中的数据进行编辑和操作，比如修改数据、删除数据、批量操作等。通过配置相应的列类型和操作按钮，可以实现表格的交互性和数据处理功能
5. 数据展示和比较：
数据表格可以将多个数据源或多个维度的数据进行对比和展示。它可以根据需求设置可排序、可筛选的列，帮助用户对数据进行比较和分析

总的来说，数据表格在许多需要展示、管理、分析和操作大量数据的场景下非常有用。它提供了一种直观、交互式的方式来处理和展示数据，让用户能够高效地进行数据管理和数据分析工作

三.怎么完成数据表格与数据库进行数据交互

效果展示

①新增

②删除

③修改

项目层级

表结构

还记得我们之前所讲到的行转列吗这一篇将用到它啦!在此表中有一个rid，但是我们在界面上需要展示的是角色名，而不是id。所以我们用到行转列来将其进行转换（效果如下图）

实体类

package com.wh.entity;

public class User {
private long id;
private String name;
private String loginName;
private String pwd;
private long rid;

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

public User(long id, String name, String loginName, String pwd, long rid) {
	super();
	this.id = id;
	this.name = name;
	this.loginName = loginName;
	this.pwd = pwd;
	this.rid = rid;
}

public User(String name, String loginName, String pwd, long rid) {
	super();
	this.name = name;
	this.loginName = loginName;
	this.pwd = pwd;
	this.rid = rid;
}


public User(String name, String loginName, String pwd) {
	super();
	this.name = name;
	this.loginName = loginName;
	this.pwd = pwd;
}

public long getId() {
	return id;
}

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

public String getName() {
	return name;
}

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

public String getLoginName() {
	return loginName;
}

public void setLoginName(String loginName) {
	this.loginName = loginName;
}

public String getPwd() {
	return pwd;
}

public void setPwd(String pwd) {
	this.pwd = pwd;
}

public long getRid() {
	return rid;
}

public void setRid(long rid) {
	this.rid = rid;
}

@Override
public String toString() {
	return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
}



}

工具类

还有一部分工具类在layui入门的那一篇博文中！！！

LayUi基础入门【附有案例从0到1详解】http://t.csdn.cn/JeBe0

为什么我们需要用到下面这个叫做'R'的工具类呢？我们可以

先观察一下数据表格中用到的数据，其中有’code‘，’msg‘以及data，于是在这个工具类中我便重载了多个方法，用来回显适合的数据！！

package com.zking.util;

import java.util.HashMap;
/**
 * 输出符合数据表格的数据的工具类
 * @author W
 *
 */
public class R extends HashMap{
	public R data(String key, Object value) {
		this.put(key, value);
		return this;
	}
	
	public static R ok(int code, String msg) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.data("success", false).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R ok(int code, String msg,Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("data", data);
		return r;
	}
	
	public static R ok(int code, String msg, long count, Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
		return r;
	}
}

这个BaseDao中有两个重载的查询方法，其原因与用途如下👇👇

1.当实体类的属性与数据库的字段相同的时候使用 ➡List<User> BaseDao中的这一个方法
2.当实体类的属性与数据库的字段不同使用➡List<Map<String, Object>>（有可能是通过行转列查出角色名的方法，也可能是连表查询的方法，总之就是数据库字段与实体类属性值不对等的情况下使用）

package com.zking.util;

import java.lang.reflect.Field;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 所有Dao层的父类 BookDao UserDao OrderDao ...
 * 
 * @author W
 *
 * @param <T>
 */
public class BaseDao<T> {

	/**
	 * 适合多表联查的数据返回
	 * @param sql
	 * @param pageBean
	 * @return
	 * @throws SQLException
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 */
	public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean)
			throws SQLException, InstantiationException, IllegalAccessException {

		List<Map<String, Object>> list = new ArrayList<>();
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = null;
		ResultSet rs = null;

		/*
		 * 是否需要分页？ 无需分页（项目中的下拉框，查询条件教员下拉框，无须分页） 必须分页（项目中列表类需求、订单列表、商品列表、学生列表...）
		 */
		if (pageBean != null && pageBean.isPagination()) {
			// 必须分页（列表需求）
			String countSQL = getCountSQL(sql);
			pst = con.prepareStatement(countSQL);
			rs = pst.executeQuery();
			if (rs.next()) {
				pageBean.setTotal(String.valueOf(rs.getObject(1)));
			}

			// 挪动到下面，是因为最后才处理返回的结果集
			// -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
			// -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
			// -- countSql=select count(1) from (sql) t 符合条件的总记录数
			String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
			pst = con.prepareStatement(pageSQL);
			rs = pst.executeQuery();
		} else {
			// 不分页（select需求）
			pst = con.prepareStatement(sql);// 符合条件的所有数据
			rs = pst.executeQuery();
		}

		// 获取源数据
		ResultSetMetaData md = rs.getMetaData();
		int count = md.getColumnCount();
		Map<String, Object> map = null;
		while (rs.next()) {
			map = new HashMap<>();
			for (int i = 1; i <= count; i++) {
//				map.put(md.getColumnName(i), rs.getObject(i));
				map.put(md.getColumnLabel(i), rs.getObject(i));
			}
			list.add(map);
		}
		return list;

	}

	/**
	 * 
	 * @param sql
	 * @param attrs
	 *            map中的key
	 * @param paMap
	 *            jsp向后台传递的参数集合
	 * @return
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 */
	public int executeUpdate(String sql, String[] attrs, Map<String, String[]> paMap) throws SQLException,
			NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = con.prepareStatement(sql);
		for (int i = 0; i < attrs.length; i++) {
			pst.setObject(i + 1, JsonUtils.getParamVal(paMap, attrs[i]));
		}
		return pst.executeUpdate();
	}

	/**
	 * 批处理
	 * @param sqlLst
	 * @return
	 */
	public static int executeUpdateBatch(String[] sqlLst) {
		Connection conn = null;
		PreparedStatement stmt = null;
		try {
			conn = DBAccess.getConnection();
			// 设置不自动提交
			conn.setAutoCommit(false);
			for (String sql : sqlLst) {
				stmt = conn.prepareStatement(sql);
				stmt.executeUpdate();
			}
			conn.commit();
		} catch (Exception e) {
			try {
				conn.rollback();
			} catch (SQLException e1) {
				e1.printStackTrace();
				throw new RuntimeException(e1);
			}
			e.printStackTrace();
			throw new RuntimeException(e);
		} finally {
			DBAccess.close(conn, stmt, null);
		}
		return sqlLst.length;
	}

	/**
	 * 通用的增删改方法
	 * 
	 * @param book
	 * @throws Exception
	 */
	public int executeUpdate(String sql, T t, String[] attrs) throws Exception {
		// String[] attrs = new String[] {"bid", "bname", "price"};
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = con.prepareStatement(sql);
		// pst.setObject(1, book.getBid());
		// pst.setObject(2, book.getBname());
		// pst.setObject(3, book.getPrice());
		/*
		 * 思路： 1.从传进来的t中读取属性值 2.往预定义对象中设置了值
		 * 
		 * t->book f->bid
		 */
		for (int i = 0; i < attrs.length; i++) {
			Field f = t.getClass().getDeclaredField(attrs[i]);
			f.setAccessible(true);
			pst.setObject(i + 1, f.get(t));
		}
		return pst.executeUpdate();
	}

	/**
	 * 通用分页查询
	 * 
	 * @param sql
	 * @param clz
	 * @return
	 * @throws Exception
	 */
	public List<T> executeQuery(String sql, Class<T> clz, PageBean pageBean) throws Exception {
		List<T> list = new ArrayList<T>();
		Connection con = DBAccess.getConnection();
		;
		PreparedStatement pst = null;
		ResultSet rs = null;

		/*
		 * 是否需要分页？ 无需分页（项目中的下拉框，查询条件教员下拉框，无须分页） 必须分页（项目中列表类需求、订单列表、商品列表、学生列表...）
		 */
		if (pageBean != null && pageBean.isPagination()) {
			// 必须分页（列表需求）
			String countSQL = getCountSQL(sql);
			pst = con.prepareStatement(countSQL);
			rs = pst.executeQuery();
			if (rs.next()) {
				pageBean.setTotal(String.valueOf(rs.getObject(1)));
			}

			// 挪动到下面，是因为最后才处理返回的结果集
			// -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
			// -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
			// -- countSql=select count(1) from (sql) t 符合条件的总记录数
			String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
			pst = con.prepareStatement(pageSQL);
			rs = pst.executeQuery();
		} else {
			// 不分页（select需求）
			pst = con.prepareStatement(sql);// 符合条件的所有数据
			rs = pst.executeQuery();
		}

		while (rs.next()) {
			T t = clz.newInstance();
			Field[] fields = clz.getDeclaredFields();
			for (Field f : fields) {
				f.setAccessible(true);
				f.set(t, rs.getObject(f.getName()));
			}
			list.add(t);
		}
		return list;
	}

	/**
	 * 将原生SQL转换成符合条件的总记录数countSQL
	 * 
	 * @param sql
	 * @return
	 */
	private String getCountSQL(String sql) {
		// -- countSql=select count(1) from (sql) t 符合条件的总记录数
		return "select count(1) from (" + sql + ") t";
	}

	/**
	 * 将原生SQL转换成pageSQL
	 * 
	 * @param sql
	 * @param pageBean
	 * @return
	 */
	private String getPageSQL(String sql, PageBean pageBean) {
		// (this.page - 1) * this.rows
		// pageSql=sql limit (page-1)*rows,rows
		return sql + " limit " + pageBean.getStartIndex() + "," + pageBean.getRows();
	}
}

配置文件以及公共页面都在layui入门的那一篇博文中👇👇