El marco front-end Layui realiza el ejemplo de gestión de usuario de efecto de tabla dinámica (operación CRUD en la tabla - con código fuente)

News 2023-07-19 08:18:39 views: null

Tabla de contenido

I. Introducción

1. ¿Qué es un formulario?

2. Alcance del uso del formulario

2. Realización de casos

1. Análisis de casos

① Encuentre el código fuente del documento de acuerdo con los requisitos

②El resultado de la consulta no tiene este atributo en la entidad

Escritura de capa 2.dao

①Clase de herramienta BaseDao

②Escrito por UserDao

3. Escritura de servlet

①Introducción a las herramientas R

②Escritura de acción de usuario

4. construcción de página jsp

①userManage.jsp

 ②userEdit.jsp

③userManage.js

④userEdit.js

5. Demostración del efecto del caso

① consulta

② Añadir

③ modificar

④ eliminar

I. Introducción

Pestaña dinámica de Layui y uso de iframe (con código fuente)

En el último uso de la pestaña de uso compartido de Layui del marco front-end, puede ver que la ruta no se puede encontrar haciendo clic a la izquierda y a la derecha (porque no se ha escrito), por lo que esta vez en función del último contenido, agregue, elimine, modifique y verifique que la página de administración de usuarios funcione.

Debido a que la página de URL aquí no se ha escrito en mi proyecto, por lo que 404 es inevitable, ¡no se preocupe por eso! ! !

1. ¿Qué es un formulario?

Tabla (Table) es un método de visualización de datos de uso común en el desarrollo web, que se utiliza para presentar datos estructurados en forma de filas y columnas. Las tablas se componen de celdas, y cada celda puede contener texto, imágenes, enlaces y más.

La tabla en HTML está definida por la etiqueta <table>, <tr> representa la fila de la tabla y <td> representa la celda de la tabla. Puede usar la etiqueta <th> para definir el encabezado de la tabla (header) .

Aquí hay un ejemplo de una tabla HTML simple:

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>20</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>22</td>
  </tr>
</table>

En este ejemplo, la tabla tiene dos columnas (nombre y edad), la primera fila es el encabezado y las siguientes dos filas son las filas de datos. El contenido de cada celda está contenido en etiquetas <td>, mientras que las celdas de encabezado usan etiquetas <th>.

Al usar tablas, podemos organizar y mostrar claramente una gran cantidad de datos, como listas de empleados, listas de precios de productos básicos, horarios de cursos, etc. Puede usar CSS para diseñar la tabla, ajustar el estilo del borde, el color de fondo, el estilo de fuente, etc. de la tabla para cumplir con los requisitos de diseño específicos.

Cabe señalar que cuando se utiliza una tabla, se debe seleccionar una estructura de datos y un método de diseño apropiados de acuerdo con las necesidades específicas. En algunos casos, el uso de tablas puede no ser la mejor solución y puede considerar usar otros métodos de presentación de datos, como listas, diseños de tarjetas, etc.

2. Alcance del uso del formulario

Las tablas se usan ampliamente en diferentes escenarios en el desarrollo web. Las siguientes son algunas áreas de uso común de las tablas:

  • 1. Visualización de datos : las tablas son una forma común de visualización de datos, adecuada para mostrar colecciones de datos estructurados. Por ejemplo, las tablas se pueden usar para presentar datos de cara al usuario, como listas de empleados, catálogos de productos, información de pedidos, etc.
  • 2. Análisis de datos : las tablas se pueden usar para presentar, comparar y analizar datos en forma tabular. Los datos se pueden comprender e interpretar mejor clasificando, filtrando y calculando tablas. Las herramientas de análisis de datos y los sistemas de informes suelen utilizar tablas para presentar los resultados.
  • 3. Clasificación y comparación : las tablas se pueden usar para comparar atributos o métricas de diferentes elementos para clasificar y clasificar. Por ejemplo, puede usar una tabla para mostrar la clasificación de los atletas, los puntajes de las pruebas de los estudiantes, etc. Las tablas pueden ordenar los datos según campos específicos para facilitar la búsqueda y la comparación.
  • 4. Entrada de formulario : los formularios se utilizan a menudo en escenarios en los que los usuarios ingresan y editan datos. Por ejemplo, puede usar formularios para crear formularios de registro, encuestas y más. Cada celda de la tabla puede contener varios campos de entrada (como cuadros de texto, casillas de verificación, menús desplegables, etc.) para facilitar la entrada y el envío de datos por parte del usuario.
  • 5. Horarios y horarios : Las tablas se pueden utilizar para mostrar horarios, horarios de clases, horarios de reuniones, etc. Cada celda puede representar un período de tiempo y cada fila representa un punto en el tiempo o una entidad (como una persona, un lugar, etc.).
  • 6. Diseño receptivo : la tabla se puede diseñar de manera adaptativa a través de CSS y técnicas de diseño receptivo, de modo que pueda mantener un buen efecto de visualización en diferentes tamaños de pantalla. Las tablas más grandes se pueden mostrar en dispositivos de pantalla pequeña mediante el uso de funciones como desplazamiento, columnas ocultas, ancho adaptable y más.

Cabe señalar que la complejidad y la legibilidad de los datos deben tenerse en cuenta al utilizar tablas. Para grandes conjuntos de datos o estructuras de datos complejas, se pueden utilizar capacidades de paginación, filtrado y búsqueda para mejorar la experiencia del usuario. Además, el uso razonable de estilos y efectos interactivos puede mejorar la usabilidad y la estética de las tablas.

2. Realización de casos

1. Análisis de casos

① Encuentre el código fuente del documento de acuerdo con los requisitos

Layui 

Esta vez, el componente que usamos es una tabla, así que busque el contenido del componente deseado en el sitio web oficial y realice la operación "cv".

②El resultado de la consulta no tiene este atributo en la entidad

Podemos observar que hay un campo rid (identidad de rol) en la tabla, pero cuando se muestran los datos, los números deben convertirse en los caracteres correspondientes, por lo que cuando consultamos la tabla, debemos agregar un campo para mostrar el identidad de rol, pero nuestro eclipse No existe tal atributo en la entidad. Si encuentra este tipo de problema después de escribir otro, aún será problemático escribirlo, por lo que podemos usar la colección Map para guardar datos.

Se explicarán más detalles lentamente durante el proceso de escritura. ¡Disfrute del código escrito por el editor a continuación! ! !

Escritura de capa 2.dao

①Clase de herramienta BaseDao

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 Administrator
 *
 * @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();
	}
}

Consejos:

Combinado con los requisitos del caso anterior, executeQuery se reconstruye aquí, y se puede encontrar que el valor devuelto aquí ya no es una entidad de colección sino una colección de mapas almacenada en la colección de listas, de modo que incluso si hay más campos, no No es necesario volver a escribir nuestra clase de entidad, solo llame a En este método, use Map para el almacenamiento.

②Escrito por UserDao

package com.xw.dao;

import java.util.List;
import java.util.Map;

import com.xw.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

/**
 * 用户
 * 
 * @author 索隆
 *
 */
public class UserDao extends BaseDao<User> {
	// 分页模糊查询
	public List<User> list(User user, PageBean pageBean) throws Exception {
		// sql语句编写
		String sql = "select * from t_oa_user where 1=1";
		// 获取参数
		long id = user.getId();
		String name = user.getName();
		// 进行参数非空判断
		if (StringUtils.isNotBlank(name)) {
			sql += " and name like '%" + name + "%'";
		}
		// 如果bid不等于0说明传递过来了bid,此时的bid是有值的
		if (id != 0) {
			sql += "and id=" + id;
		}
		return super.executeQuery(sql, User.class, pageBean);
	}

	// 新增
	public int add(User User) throws Exception {
		int n=0;
		// sql语句编写
		String sql = "insert into t_oa_user (name,loginName,pwd)values(?,?,?)";
		 n = super.executeUpdate(sql, User, new String[] { "name", "loginName", "pwd" });
		return n;
	}

	// 删除
	public int del(User User) throws Exception {
		// sql语句编写
		String sql = "delete from t_oa_user where id=?";
		return super.executeUpdate(sql, User, new String[] { "id" });
	}

	// 修改
	public int edit(User User) throws Exception {
		// sql语句编写
		String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id=?";
		return super.executeUpdate(sql, User, new String[] { "name", "loginName", "pwd", "id" });
	}

	// 登录校验
	public User login(User User) throws Exception {
		// sql语句编写
		String sql = "select * from t_oa_user where loginName='" + User.getLoginName() + "' and pwd='" + User.getPwd()+ "' ";
		List<User> list = super.executeQuery(sql, User.class, null);
		if (list != null && list.size() == 1) {
			return list.get(0);
		} else {
			return null;
		}
	}

	
	//不包含原表字段的分页模糊查询
	public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
		// sql语句编写
		String sql = "select u.*,\r\n" + 
				"(CASE \r\n" + 
				"	WHEN u.rid='1' THEN	'管理员'\r\n" + 
				"	WHEN u.rid='2' THEN	'发起者'\r\n" + 
				"	WHEN u.rid='3' THEN	'审批者'\r\n" + 
				"	WHEN u.rid='4' THEN	'参与者'\r\n" + 
				"	WHEN u.rid='5' THEN	'会议室管理员'\r\n" + 
				"\r\n" + 
				"	ELSE\r\n" + 
				"		'其他'\r\n" + 
				"END ) rname\r\n" + 
				"from t_oa_user u WHERE 1=1";
		// 获取参数
		String name = user.getName();
		// 进行参数非空判断
		if (StringUtils.isNotBlank(name)) {
			sql += " and name like '%" + name + "%'";
		}
		return super.executeQuery(sql,pageBean);
	}

}

Nota: El retorno aquí es el executeQuery refactorizado, ¡no lo confundas! !

3. Escritura de servlet

①Introducción a las herramientas R

Podemos verificar cómo se ve el formato JSON que se muestra en el contenido de la tabla del sitio web oficial y encontrar que tiene los siguientes atributos:

codigo,mensaje,cuenta,datos

  • código: solo se puede completar "0" (reglas de Layui de otras personas)
  • mag: no tiene un significado real, puedes completarlo a voluntad
  • recuento: el número de registros encontrados
  • datos: contenido de la entidad

Si queremos mostrar datos en la página, debemos cumplir con su formato JSON. Podemos usar la clase de herramienta R para simplificar nuestro código. De lo contrario, debemos crear manualmente una colección de mapas y agregar atributos con .put cada vez que nos encontremos con esto. escenario forma de crear datos.

package com.zking.util;

import java.util.HashMap;

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;
	}
}

 Aquí también refactorizamos el método ok muchas veces, para que podamos usarlo en diferentes escenarios.

②Escritura de acción de usuario

package com.xw.web;

import java.util.List;
import java.util.Map;

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

import com.xw.entity.User;
import com.xw.dao.UserDao;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class Useraction extends ActionSupport implements ModelDriver<User> {
	User user = new User();
	UserDao userdao = new UserDao();

	/**
	 * 登录验证
	 * 
	 * @param req
	 * @param resp
	 * @throws Exception
	 */
	public void login(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		User login = userdao.login(user);
		// 保存域对象
		if (login != null) {
			HttpSession session = req.getSession();
			session.setAttribute("user", login);
		}
		ResponseUtil.writeJson(resp, login);

	}


	/**
	 * 注册新增用户
	 * 
	 * @param req
	 * @param resp
	 * @throws Exception
	 */
	public void register(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		int i = userdao.add(user);
		if (i > 0) {
			ResponseUtil.writeJson(resp, i);
		} else {
			ResponseUtil.writeJson(resp, null);
		}
	}
	
	
	
	/**带分类管理的模糊查询
	 * @param req
	 * @param resp
	 * @throws Exception
	 */
	public void UserRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		// 初始化pageBean
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		//调用带分页查询的方法
		List<Map<String, Object>> userRole = userdao.userRole(user, pageBean);
		//利用R工具类制造出符合要求的json格式数据
		 ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole));

	}
	
	
	/**删除用户
	 * @param req
	 * @param resp
	 * @throws Exception
	 */
	public void del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		//调用删除的方法
		int del = userdao.del(user);
		//利用R工具类制造出符合要求的json格式数据
		 ResponseUtil.writeJson(resp, R.ok(0, "删除成功"));

	}
	
	
	/**修改用户
	 * @param req
	 * @param resp
	 * @throws Exception
	 */
	public void edit(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		//调用修改的方法
		int del = userdao.edit(user);
		//利用R工具类制造出符合要求的json格式数据
		 ResponseUtil.writeJson(resp, R.ok(0, "修改成功"));

	}
	
	
	/**新增用户
	 * @param req
	 * @param resp
	 * @throws Exception
	 */
	public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		//调用新增的方法
		int del = userdao.add(user);
		//利用R工具类制造出符合要求的json格式数据
		 ResponseUtil.writeJson(resp, R.ok(0, "新增成功"));

	}
	
	
	

	@Override
	public User getModel() {
		return user;
	}

}

4. construcción de página jsp

Asegúrese de prestar atención a nuestra jerarquía

①userManage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ include file="/common/static.jsp"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<script type="text/javascript" src="static/js/system/userManage.js"></script>
</head>

<body>
<!-- 搜索栏 -->
	<div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">用户名：</label>
	    <div class="layui-input-inline">
	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-inline">
	    <div class="layui-input-inline">
	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
	      	<i class="layui-icon layui-icon-search"></i>
	      	查询
	      </button>
	      <button id="btn_add" type="button" class="layui-btn">新增</button>
	    </div>
	  </div>
	  
	</div>
 
<table class="layui-hide" id="test" lay-filter="test"></table>
 

 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
          
 
<script>

</script>

</body>
</html>

 ②userEdit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/static.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/js/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl{
	max-height:150px;
}
</style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="user">
        <input type="hidden" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
                <select name="rid">
                    <option value="">---请选择---</option>
                    <option value="1">管理员</option>
                    <option value="2">发起者</option>
                    <option value="3">审批者</option>
                    <option value="4">参与者</option>
                    <option value="5">会议管理员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
</html>

Separar el código lógico de la página JSP

③userManage.js

var table,$,layer;
var row;

layui.use(['table','jquery','layer'], function(){
  table = layui.table
  ,layer=layui.layer
  ,$=layui.jquery;
  
  initTable();
  
  //为查询按钮设置点击事件
  $("#btn_search").click(function(){
	  query();
  })
  
  //为新增按钮设置点击事件
  $("#btn_add").click(function(){
	  row=null;
	  edit('新增');
  })
  
});

//新增/修改的点击事件
function edit(title){
	  layer.open({
	       type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
	       title:title,
	       area: ['660px', '340px'],   //宽高
	       skin: 'layui-layer-rim',    //样式类名
	       content:  'jsp/system/userEdit.jsp', //书本编辑页面
	       btn:['保存','关闭'],
	       yes: function(index, layero){
	    	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
	           let data= $(layero).find("iframe")[0].contentWindow.getData();
	           console.log(data);
	           //判断title标题
	           let methodName="add";
	           if(title=="编辑")
	        	   methodName="edit";
	           $.post('user.action?methodName='+methodName,
	        		   data,function(rs){
	        	   if(rs.success){
	        		   //关闭对话框
	        		   layer.closeAll();
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
	           },'json');
	       },
	       btn2: function(index, layero){
	    	   layer.closeAll();
	       }
	    });
}



//查询的点击事件
function query(){
	//表格的重载
	table.reload('test', {
		  where: { //设定异步数据接口的额外参数，任意设
		    name: $("#name").val()
		  }
	//默认limit需要改成我们自己工具类的名字
		,request: {
	    pageName: 'page ' //页码的参数名称，默认：page
	    ,limitName: 'rows' //每页数据量的参数名，默认：limit
	  }
		}); //只重载数据
}




//将分页查询方法封装
function initTable(){
	 table.render({
		    elem: '#test'
		    ,url:'user.action?methodName=UserRole'
		    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
		      title: '提示'
		      ,layEvent: 'LAYTABLE_TIPS'
		      ,icon: 'layui-icon-tips'
		    }]
		    ,title: '用户数据表'
		    ,cols: [[
		      {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
		      ,{field:'loginName', title:'账户名', width:120, edit: 'text'}
		      ,{field:'name', title:'真实姓名', width:150, edit: 'text', templet: function(res){
		        return '<em>'+ res.name +'</em>'
		      }}
		      ,{field:'pwd', title:'密码', width:80, edit: 'text', sort: true}
		      ,{field:'rname', title:'身份', width:100}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		    ]]
		    ,page: true
		  });
		  
		  
		  
		  //监听行工具事件
		  table.on('tool(test)', function(obj){
		     row = obj.data;
		    if(obj.event === 'del'){
		    	  layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
					  $.post('user.action',{
						  'methodName':'del',
						  'id':row.id
					  },function(rs){
						  if(rs.success){
			        		   //调用查询方法刷新数据
			        		   query();
			        	   }else{
			        		   layer.msg(rs.msg,function(){});
			        	   }
					  },'json');
					  layer.close(index);
					});
		    } else if(obj.event === 'edit'){
		    	 edit('编辑');
		    }
		  });
}

④userEdit.js

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});

function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}

function getData(){
    return form.val('user');
}

5. Demostración del efecto del caso

① consulta

 

② Añadir

 

③ modificar

 

④ eliminar

 

Mi intercambio está aquí, ¡bienvenido al área de comentarios para discutir y comunicarnos! !

Si lo encuentras útil, por favor dale me gusta ♥ ♥

Supongo que te gusta

Origin blog.csdn.net/weixin_74318097/article/details/131732594
Recomendado
Clasificación
Diario
Más
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)

Code World

© 2018 codetd.com