• LayUI之CRUD

    目录

    一、layui数据表格相关组件官网介绍

     二、用户管理后台代码

    1.开始写dao方法 UserDao

    2.编写UserAction

     三、用户新增

     四、用户编辑

     代码格式：userManage.jsp，userManage.js——userEdit.jsp,userEdit.js

    一、layui数据表格相关组件官网介绍

    首先是官网网址： Layui 开发使用文档 - 入门指南https://layui.org.cn/doc/index.html

     我们主要关于的是用户管理的增删改查

    我们最终要实现的效果如图所示：

    我们去官网里找到跟这个相类似的效果 

    把这个代码赋值到我们新建的userManage.jsp里面body的开始和body结尾中间

    1. <table class="layui-hide" id="test" lay-filter="test">table>
    2.  
    3. <script type="text/html" id="toolbarDemo">
    4.   <div class="layui-btn-container">
    5.     <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据button>
    6.     <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目button>
    7.     <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选button>
    8.   div>
    9. script>
    10.  
    11. <script type="text/html" id="barDemo">
    12.   <a class="layui-btn layui-btn-xs" lay-event="edit">编辑a>
    13.   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除a>
    14. script>
    15.               
    16.           
    17. <script src="//res/layui/dist/layui.js" charset="utf-8">script>
    18.  
    19.  
    20. <script>
    21. layui.use('table', function(){
    22.   var table = layui.table;
    23.   
    24.   table.render({
    25.     elem: '#test'
    26.     ,url:'../../test/table/demo1.json.js'
    27.     ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    28.     ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    29.       title: '提示'
    30.       ,layEvent: 'LAYTABLE_TIPS'
    31.       ,icon: 'layui-icon-tips'
    32.     }]
    33.     ,title: '用户数据表'
    34.     ,cols: [[
    35.       {type: 'checkbox', fixed: 'left'}
    36.       ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
    37.       ,{field:'username', title:'用户名', width:120, edit: 'text'}
    38.       ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
    39.         return ''+ res.email +''
    40.       }}
    41.       ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
    42.       ,{field:'city', title:'城市', width:100}
    43.       ,{field:'sign', title:'签名'}
    44.       ,{field:'experience', title:'积分', width:80, sort: true}
    45.       ,{field:'ip', title:'IP', width:120}
    46.       ,{field:'logins', title:'登入次数', width:100, sort: true}
    47.       ,{field:'joinTime', title:'加入时间', width:120}
    48.       ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    49.     ]]
    50.     ,page: true
    51.   });
    52.   
    53.   //头工具栏事件
    54.   table.on('toolbar(test)', function(obj){
    55.     var checkStatus = table.checkStatus(obj.config.id);
    56.     switch(obj.event){
    57.       case 'getCheckData':
    58.         var data = checkStatus.data;
    59.         layer.alert(JSON.stringify(data));
    60.       break;
    61.       case 'getCheckLength':
    62.         var data = checkStatus.data;
    63.         layer.msg('选中了：'+ data.length + ' 个');
    64.       break;
    65.       case 'isAll':
    66.         layer.msg(checkStatus.isAll ? '全选': '未全选');
    67.       break;
    68.       
    69.       //自定义头工具栏右侧图标 - 提示
    70.       case 'LAYTABLE_TIPS':
    71.         layer.alert('这是工具栏右侧自定义的一个图标按钮');
    72.       break;
    73.     };
    74.   });
    75.   
    76.   //监听行工具事件
    77.   table.on('tool(test)', function(obj){
    78.     var data = obj.data;
    79.     //console.log(obj)
    80.     if(obj.event === 'del'){
    81.       layer.confirm('真的删除行么', function(index){
    82.         obj.del();
    83.         layer.close(index);
    84.       });
    85.     } else if(obj.event === 'edit'){
    86.       layer.prompt({
    87.         formType: 2
    88.         ,value: data.email
    89.       }, function(value, index){
    90.         obj.update({
    91.           email: value
    92.         });
    93.         layer.close(index);
    94.       });
    95.     }
    96.   });
    97. });
    98. script>

    引入我们的header.jsp

    <%@include file="/common/header.jsp" %>

    然后在找个表单这个验证手机的把这段代码复制到body开始后面

     代码块：

    1. class="layui-form-item">
    2.     <div class="layui-inline">
    3.       <label class="layui-form-label">验证手机label>
    4.       <div class="layui-input-inline">
    5.         <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
    6.       div>
    7.     div>
    8.     <div class="layui-inline">
    9.       <label class="layui-form-label">验证邮箱label>
    10.       <div class="layui-input-inline">
    11.         <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
    12.       div>
    13.     div>
    14.   div>

    是不是直接把后面的验证邮箱改为按钮就可以了，我们在去官网里找到按钮，也在表单里面

     代码块：

     <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交button>

    在把之前的代码块改为：

    1. class="layui-form-item">
    2.     <div class="layui-inline">
    3.       <label class="layui-form-label">验证手机label>
    4.       <div class="layui-input-inline">
    5.         <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
    6.       div>
    7.     div>
    8.     <div class="layui-inline">
    9.     <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交button>
    10.     div>
    11.   div>

    最终运行结果为：

     二、用户管理后台代码

    我们要用到的mysql数据库表是t_oa_user表如图所示：

    里面的数据如图所示：

     我们要查询出用户信息及对应的用户角色（用户角色：1 管理员 2 发起者 3 审批者 4 参与者 5 会议室管理员）

    mysql里的SQL语句：

    1. select *
    2. ,(case rid
    3. when 1 then '管理员'
    4. when 2 then '发起者'
    5. when 3 then '审批者'
    6. when 4 then '参与者'
    7. when 5 then '会议室管理员'
    8. else '其他' end) roleName
    9. from
    10. t_oa_user

     运行出来的结果如图所示：

    1.开始写dao方法 UserDao

    UserDao代码块：

    1. package com.zking.dao;
    2.  
    3. import java.sql.SQLException;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import com.zking.entity.User;
    8. import com.zking.util.BaseDao;
    9. import com.zking.util.PageBean;
    10. import com.zking.util.StringUtils;
    11.  
    12. public class UserDao extends BaseDao{
    13. 	
    14. 	public User login(User user) throws Exception {
    15. 		String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";
    16. //		根据sql查询符合条件的用户，通常只会返回一条数据
    17. 		List users = super.executeQuery(sql, User.class, null);
    18. 		return users==null || users.size()==0?null:users.get(0);
    19. //		return super.executeQuery(sql, clz, pageBean);
    20. 	}
    21. 	
    22. //	查询用户信息及对应的角色，角色是通过case when得来的
    23. 	public List> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
    24. 		String sql="select *\r\n" + 
    25. 				",(case rid \r\n" + 
    26. 				"when 1 then '管理员 '\r\n" + 
    27. 				"when 2 then '发起者 '\r\n" + 
    28. 				"when 3 then '审批者 '\r\n" + 
    29. 				"when 4 then '参与者 '\r\n" + 
    30. 				"when 5 then '会议室管理员 '\r\n" + 
    31. 				"else '其他'  end) roleName \r\n" + 
    32. 				"from \r\n" + 
    33. 				"t_oa_user where 1 = 1 ";
    34. //		有可能根据搜索的名字查询
    35. 		String name = user.getName();
    36. 		//判断是否为空
    37. 		if(StringUtils.isNotBlank(name)) {
    38. //			不为空然后就拼接上sql语句
    39. 			sql+=" and name like '%"+name+"%'";
    40. 		}
    41. //		当实体类的属性完全包含数据库查询出来的列段的时候使用
    42. //		super.executeQuery(sql, User.class, pageBean)
    43. //		返回List>，对应的是链表查询，单个实体类对象不完全包含查询的列段
    44. 		return super.executeQuery(sql, pageBean);
    45. 	}
    46. 	
    47. //	新增
    48. 	public int add(User user) throws Exception {
    49. 		String sql="insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    50. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
    51. 	}
    52. 	
    53. //	删除
    54. 	public int del(User user) throws Exception {
    55. 		String sql="delete from t_oa_user where id=?";
    56. 		return super.executeUpdate(sql, user, new String[] {"id"});
    57. 	}
    58. 	
    59. //	修改
    60. 	public int edit(User user) throws Exception {
    61. 		String sql="update t_oa_user set name=?,loginName=?,pwd=? where id=?";
    62. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
    63. 	}
    64. }

     记得要先测试一下否则都不知道能不能出来数据：我们Ctrl+n输入junit选择junit 4 其他下一步然后勾选我们要测试的方法即可：serDaoText代码块：

    1. package com.zking.dao;
    2.  
    3. import static org.junit.Assert.*;
    4.  
    5. import java.sql.SQLException;
    6. import java.util.List;
    7. import java.util.Map;
    8.  
    9. import org.junit.After;
    10. import org.junit.Before;
    11. import org.junit.Test;
    12.  
    13. import com.zking.entity.User;
    14. import com.zking.util.PageBean;
    15.  
    16. public class UserDaoTest {
    17. 	
    18. 	private UserDao userDao = new UserDao();
    19.  
    20. 	@Before
    21. 	public void setUp() throws Exception {
    22. 	}
    23.  
    24. 	@After
    25. 	public void tearDown() throws Exception {
    26. 	}
    27.  
    28. 	@Test
    29. 	public void testList() {
    30. 		User user = new User();
    31. 		PageBean pageBean = new PageBean();
    32. 		try {
    33. 			List> list = userDao.list(user, pageBean);
    34. 			for (Map map : list) {
    35. 				System.out.println(map);
    36. 			}
    37. 		} catch (Exception e) {
    38. 			e.printStackTrace();
    39. 		}
    40. 	}
    41.  
    42. 	@Test
    43. 	public void testAdd() {
    44. 		User user = new User();
    45. 		user.setName("蒋文娟");
    46. 		user.setLoginName("jwj");
    47. 		user.setPwd("1234");
    48. 		try {
    49. 			userDao.add(user);
    50. 		} catch (Exception e) {
    51. 			// TODO Auto-generated catch block
    52. 			e.printStackTrace();
    53. 		}
    54. 	}
    55.  
    56. 	@Test
    57. 	public void testDel() {
    58. 		User user = new User();
    59. 		user.setId(14L);
    60. 		try {
    61. 			userDao.del(user);
    62. 		} catch (Exception e) {
    63. 			// TODO Auto-generated catch block
    64. 			e.printStackTrace();
    65. 		}
    66. 	}
    67.  
    68. 	@Test
    69. 	public void testEdit() {
    70. 		User user = new User();
    71. 		user.setName("蒋文娟2");
    72. 		user.setLoginName("jwj2");
    73. 		user.setPwd("12342");
    74. 		user.setId(14L);
    75. 		try {
    76. 			userDao.edit(user);
    77. 		} catch (Exception e) {
    78. 			// TODO Auto-generated catch block
    79. 			e.printStackTrace();
    80. 		}
    81. 	}
    82.  
    83. }

    我们先测试能不能查询出来所有数据如图所示：

    我们在测试增加方法如图所示：

    我们去mysql数据库里查询一下如图所示：

    2.编写UserAction

    1. package com.zking.web;
    2.  
    3. import java.util.HashMap;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9.  
    10. import com.zking.dao.UserDao;
    11. import com.zking.entity.User;
    12. import com.zking.framework.ActionSupport;
    13. import com.zking.framework.ModelDriver;
    14. import com.zking.util.PageBean;
    15. import com.zking.util.R;
    16. import com.zking.util.ResponseUtil;
    17.  
    18. public class UserAction extends ActionSupport implements ModelDriver{
    19.  
    20. 	private User user = new User();
    21. 	private UserDao userDao = new UserDao();
    22. 	
    23. //	写一个方法处理前台的请求
    24. //	public String login(HttpServletRequest req, HttpServletResponse resp) {
    25. //		Map map = new HashMap();
    26. //		if("zhangsan".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
    27. 			登录成功
    28. //			map.put("code", 200);
    29. //			map.put("msg", "登录成功");
    30. //		}
    31. //		else {
    32. 			登录失败
    33. //			map.put("code", 0);
    34. //			map.put("msg", "账户密码有误");
    35. //		}
    36. //		try {
    37. //			ResponseUtil.writeJson(resp, map);
    38. //		} catch (Exception e) {
    39. //			// TODO Auto-generated catch block
    40. //			e.printStackTrace();
    41. //		}
    42. //		return null;
    43. //	}
    44. 	
    45. 	
    46. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    47. 		try {
    48. //			调用我们的login方法
    49. 			User u = userDao.login(user);
    50. //			通过账户名密码查到了用户记录
    51. 			if(u!=null) {
    52. //				ResponseUtil.writeJson(resp, new R()
    53. //						.data("code",200)
    54. //						.data("msg","登录成功"));
    55. //				这个就是我们刚刚为什么要更换util所以数据我举例的R().java
    56. //				上面的就等价于下面这段代码
    57. 				ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
    58. //				此时我们的session中是包含了我们当前登录的用户id
    59. 				req.getSession().setAttribute("user", u);
    60. 			}
    61. 			else {
    62. 				ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
    63. 			}
    64. 		} catch (Exception e) {
    65. 			e.printStackTrace();
    66. 			try {
    67. 				ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
    68. 			} catch (Exception e1) {
    69. 				// TODO Auto-generated catch block
    70. 				e1.printStackTrace();
    71. 			}
    72. 		}
    73. 		return null;
    74. 	}
    75. 	
    76. //	用户查询
    77. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    78. 		try {
    79. 			PageBean pageBean = new PageBean();
    80. 			pageBean.setRequest(req);
    81. 			List> users = userDao.list(user, pageBean);	
    82. //			注意：layui中的数据格式
    83. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功", pageBean.getTotal(), users));
    84. 		} catch (Exception e) {
    85. 			e.printStackTrace();
    86. 			try {
    87. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询错误"));
    88. 			} catch (Exception e1) {
    89. 				// TODO Auto-generated catch block
    90. 				e1.printStackTrace();
    91. 			}
    92. 		}
    93. 		return null;
    94. 	}
    95. 	
    96. //	用户增加
    97. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    98. 		try {
    99. //			n是sql语句执行的影响行数
    100. 			int n=userDao.add(user);
    101. //			如果大于0说明可以新增
    102. 			if(n>0) {
    103. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
    104. 			}
    105. 			else {
    106. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
    107. 			}
    108. 		} catch (Exception e) {
    109. 			e.printStackTrace();
    110. 			try {
    111. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    112. 			} catch (Exception e1) {
    113. 				// TODO Auto-generated catch block
    114. 				e1.printStackTrace();
    115. 			}
    116. 		}
    117. 		return null;
    118. 	}
    119. 	
    120. //	用户删除
    121. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    122. 		try {
    123. //			n是sql语句执行的影响行数
    124. 			int n=userDao.del(user);
    125. //			如果大于0说明可以删除
    126. 			if(n>0) {
    127. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
    128. 			}
    129. 			else {
    130. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    131. 			}
    132. 		} catch (Exception e) {
    133. 			e.printStackTrace();
    134. 			try {
    135. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    136. 			} catch (Exception e1) {
    137. 				// TODO Auto-generated catch block
    138. 				e1.printStackTrace();
    139. 			}
    140. 		}
    141. 		return null;
    142. 	}
    143. 	
    144. //	用户修改
    145. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    146. 		try {
    147. //			n是sql语句执行的影响行数
    148. 			int n=userDao.edit(user);
    149. //			如果大于0说明可以修改
    150. 			if(n>0) {
    151. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
    152. 			}
    153. 			else {
    154. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    155. 			}
    156. 		} catch (Exception e) {
    157. 			e.printStackTrace();
    158. 			try {
    159. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    160. 			} catch (Exception e1) {
    161. 				// TODO Auto-generated catch block
    162. 				e1.printStackTrace();
    163. 			}
    164. 		}
    165. 		return null;
    166. 	}
    167. 	
    168. 	@Override
    169. 	public User getModel() {
    170. 		// TODO Auto-generated method stub
    171. 		return user;
    172. 	}
    173.  
    174. }

     三、用户新增

     1.改userManage.jsp,目前我们的userManage.jsp是官网上的还没有改然后我们备份一份到时候用的上，下面这段代码块是改好了的直接复制过去就可以了 注意引入的header.jsp要跟你原有的对应

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@include file="/common/header.jsp" %>
    4. html>
    5. <html>
    6. <head>
    7. <meta charset="UTF-8">
    8. head>
    9. <body>
    10. 	
    11. 	<div class="layui-form-item">
    12. 	  <div class="layui-inline">
    13. 	    <label class="layui-form-label">用户名：label>
    14. 	    <div class="layui-input-inline">
    15. 	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    16. 	    div>
    17. 	  div>
    18. 	  
    19. 	  <div class="layui-inline">
    20. 	    <div class="layui-input-inline">
    21. 	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
    22. 	      	<i class="layui-icon layui-icon-search">i>
    23. 	      	查询
    24. 	      button>
    25. 	      <button id="btn_add" type="button" class="layui-btn">新增button>
    26. 	    div>
    27. 	  div>
    28. 	  
    29. 	div>
    30. 	
    31. 	<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;">table>
    32. 	
    33. 	
    34. 	<script type="text/html" id="toolbar">
    35.  		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑button>
    36.  		<button class="layui-btn layui-btn-sm" lay-event="del">删除button>
    37.  		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码button>
    38. 	script>
    39. body>
    40. html>

    当我们运行的时候会出错因为没有js文件所以我们要去写一个js文件然后把我们之前的js复制到userManage.js里面去并且记得userManage.jsp要引入userManage.js

    <script type="text/javascript" src="static/js/system/userManage.js">script>

    注意不要建错位置

    这个userManage.js写什么就写script里面这个我们写好了直接复制

    1. let layer,$,table;
    2. layui.use(['jquery', 'layer', 'table'], function(){
    3. 	layer = layui.layer
    4. 	,$ = layui.jquery
    5. 	,table = layui.table;
    6. 	//初始化数据表格
    7. 	initTable();
    8. 	//绑定查询按钮的点击事件
    9. 	$('#btn_search').click(function(){
    10. 		query();
    11. 	});
    12. });
    13.  
    14.  
    15. //1.初始化数据表格
    16. function initTable(){
    17. 	table.render({           //执行渲染
    18.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
    19. //        url: 'user.action?methodName=list',     //请求地址
    20.         height: 340,         //自定义高度
    21.         loading: false,      //是否显示加载条（默认 true）
    22.         cols: [[             //设置表头
    23.             {field: 'id', title: '用户编号', width: 120},
    24.             {field: 'name', title: '用户名', width: 120},
    25.             {field: 'loginName', title: '登录账号', width: 140},
    26.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
    27.         ]]
    28.     });
    29. 	
    30. }
    31. //2.点击查询
    32. function query(){
    33. 	table.reload('tb', {
    34.         url: $("#ctx").val()+'/user.action',     //请求地址
    35.         method: 'POST',                    //请求方式，GET或者POST
    36.         loading: true,                     //是否显示加载条（默认 true）
    37.         page: true,                        //是否分页
    38.         where: {                           //设定异步数据接口的额外参数，任意设
    39.         	'methodName':'listUserRole',
    40.         	'name':$('#name').val()
    41.         },  
    42.         request: {                         //自定义分页请求参数名
    43.             pageName: 'page', //页码的参数名称，默认：page
    44.             limitName: 'rows' //每页数据量的参数名，默认：limit
    45.         }
    46.    });
    47. }

     注意：这个url我们为什么是注释的因为我们有可能是带条件查询的，如果我们打开的话那么服务器就多请求了一次，所以我们点击查询按钮的时候在查询。

    当我们点击查询的时候出现了一个错误如图所示：

    而我们写的方法是list，所以要把这里改掉

     运行的时候也是可以查询的如图所示：

     这个是什么呢我们为什么要加这个，就是因为可以获取我们的项目名称

    $("#ctx").val()

    我们打印一下如图所示：

    console.log($("#ctx").val());

    接下来就是我们的新增按钮 

    1. //绑定新增按钮的点击事件
    2. 	$('#btn_add').click(function(){
    3. 		row=null;
    4. 		open('新增');
    5. 	});

     把这个复制到userManage.js里面代码块所示：

    1. let layer,$,table;
    2. var row;
    3. layui.use(['jquery', 'layer', 'table'], function(){
    4. 	layer = layui.layer
    5. 	,$ = layui.jquery
    6. 	,table = layui.table;
    7. 	//初始化数据表格
    8. 	initTable();
    9. 	//绑定查询按钮的点击事件
    10. 	$('#btn_search').click(function(){
    11. 		query();
    12. 	});
    13. 	
    14. 	//绑定新增按钮的点击事件
    15. 	$('#btn_add').click(function(){
    16. 		row=null;
    17. 		open('新增');
    18. 	});
    19. });

    我们在去官网里找弹出层这个我们写好了直接复制到usermanage.js里面最后面即可

    1. //3.对话框
    2. function open(title){
    3.     layer.open({
    4.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    5.        title:title,
    6.        area: ['660px', '340px'],   //宽高
    7.        skin: 'layui-layer-rim',    //样式类名
    8.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    9.        btn:['保存','关闭'],
    10.        yes: function(index, layero){
    11.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    12.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    13.            console.log(data);
    14.            //判断title标题
    15.            let methodName="add";
    16.            if(title=="编辑")
    17.         	   methodName="edit";
    18.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    19.         		   data,function(rs){
    20.         	   if(rs.success){
    21.         		   //关闭对话框
    22.         		   layer.closeAll();
    23.         		   //调用查询方法刷新数据
    24.         		   query();
    25.         	   }else{
    26.         		   layer.msg(rs.msg,function(){});
    27.         	   }
    28.            },'json');
    29.        },
    30.        btn2: function(index, layero){
    31.     	   layer.closeAll();
    32.        }
    33.     });
    34.  }

     如果想要一个一个改的话我们就官网里面复制一个表单即可，但这里我们提前写好，注意引入的header.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <%@include file="/common/header.jsp"%>
    4. html>
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js">script>
    9. <title>用户新增title>
    10. head>
    11. <style>
    12. .layui-form-select dl{
    13. 	max-height:150px;
    14. }
    15. style>
    16. <body>
    17. <div style="padding:10px;">
    18.     <form class="layui-form layui-form-pane" lay-filter="user">
    19.         <input type="hidden" name="id"/>
    20.         <div class="layui-form-item">
    21.             <label class="layui-form-label">用户名称label>
    22.             <div class="layui-input-block">
    23.                 <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
    24.             div>
    25.         div>
    26.         <div class="layui-form-item">
    27.             <label class="layui-form-label">用户角色label>
    28.             <div class="layui-input-block">
    29.                 <select name="rid">
    30.                     <option value="">---请选择---option>
    31.                     <option value="1">管理员option>
    32.                     <option value="2">发起者option>
    33.                     <option value="3">审批者option>
    34.                     <option value="4">参与者option>
    35.                     <option value="5">会议管理员option>
    36.                 select>
    37.             div>
    38.         div>
    39.         <div class="layui-form-item">
    40.             <label class="layui-form-label">登录账号label>
    41.             <div class="layui-input-block">
    42.                 <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
    43.             div>
    44.         div>
    45.         <div class="layui-form-item">
    46.             <label class="layui-form-label">登录密码label>
    47.             <div class="layui-input-block">
    48.                 <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
    49.             div>
    50.         div>
    51.     form>
    52. div>
    53. body>
    54. html>

    我们运行一下： 

    跟上面的一样的也要写一个userEdit.js上面的也要引入userEdit.js

     当我们点击新增或者编辑的时候是不是要做数据回显是不是当我们点击那个编辑就要拿到哪一行的值，我们可以看官网如图所示：

     对应我们也写好了userEdit.js代码块：

    1. let layer,form,$;
    2. layui.use(['layer','form','jquery'],function(){
    3. 	layer=layui.layer,form=layui.form,$=layui.jquery;
    4. 	initData();
    5. });
    6.  
    7. function initData(){
    8. 	console.log(parent.row);
    9. 	if(null!=parent.row){
    10. 	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
    11. 	     //parent.row：表格行对象
    12. 	     form.val('user',$.extend({}, parent.row||{}));
    13. 	     $('#name').attr('readonly','readonly');
    14. 	}
    15. }
    16.  
    17. function getData(){
    18.     return form.val('user');
    19. }

    这个什么官方是form.val('example')，我们Ctrl+F，官方取的是form表单里面的值如图所示：

    而我们这个也同理：

     

    1. function getData(){
    2. //	 
    3. //	取user是取的form表单里面的值
    4.     return form.val('user');
    5. }

    当我们点击新增按钮或者编辑按钮是不是打开对话框open把新增界面打开了那么说这个userManage.js是userEdit.jsp父界面，当我们点击编辑的时候是不是要把值给复制上去并且复制给userManage.js里面定义的row

    我们新增一下看看能不能新增

    我们就把原来的删掉换成2.6的版本 

     记得清楚一下缓存Ctrl+shift+delete，我们在新增一下如图所示：

    注意：这里我们就是父页面调用子页面的形式

      jqyery在线手册网址：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

     这个layero就是弹出层里面包含了iframe如图所示： 

     当我点击新增如果这里有多个按钮如图所示：

    看官网如图所示：

    userManage.jsp代码块：

    1. let layer,$,table;
    2. var row;
    3. layui.use(['jquery', 'layer', 'table'], function(){
    4. 	layer = layui.layer
    5. 	,$ = layui.jquery
    6. 	,table = layui.table;
    7. 	//初始化数据表格
    8. 	initTable();
    9. 	//绑定查询按钮的点击事件
    10. 	$('#btn_search').click(function(){
    11. 		query();
    12. 	});
    13. 	
    14. 	//绑定新增按钮的点击事件
    15. 	$('#btn_add').click(function(){
    16. 		row=null;
    17. 		open('新增');
    18. 	});
    19. });
    20.  
    21.  
    22. //1.初始化数据表格
    23. function initTable(){
    24. 	table.render({           //执行渲染
    25.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
    26. //        url: 'user.action?methodName=list',     //请求地址
    27.         height: 340,         //自定义高度
    28.         loading: false,      //是否显示加载条（默认 true）
    29.         cols: [[             //设置表头
    30.             {field: 'id', title: '用户编号', width: 120},
    31.             {field: 'name', title: '用户名', width: 120},
    32.             {field: 'loginName', title: '登录账号', width: 140},
    33.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
    34.         ]]
    35.     });
    36. 	
    37. 	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    38. 	table.on('tool(tb)', function (obj) {
    39. 		row = obj.data;
    40. 		if (obj.event == "edit") {
    41. 			open("编辑");
    42. 		}else if(obj.event == "del"){
    43. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    44. 			  $.post($("#ctx").val()+'/user.action',{
    45. 				  'methodName':'del',
    46. 				  'id':row.id
    47. 			  },function(rs){
    48. 				  if(rs.success){
    49. 	        		   //调用查询方法刷新数据
    50. 	        		   query();
    51. 	        	   }else{
    52. 	        		   layer.msg(rs.msg,function(){});
    53. 	        	   }
    54. 			  },'json');
    55. 			  layer.close(index);
    56. 			});
    57. 		}else{
    58.  
    59. 		}
    60. 	});
    61. 	
    62. 	
    63. 	
    64. }
    65. //2.点击查询
    66. function query(){
    67. //	console.log($("#ctx").val());
    68. 	table.reload('tb', {
    69.         url: $("#ctx").val()+'/user.action',     //请求地址
    70.         method: 'POST',                    //请求方式，GET或者POST
    71.         loading: true,                     //是否显示加载条（默认 true）
    72.         page: true,                        //是否分页
    73.         where: {                           //设定异步数据接口的额外参数，任意设
    74.         	'methodName':'list',
    75.         	'name':$('#name').val()
    76.         },  
    77.         request: {                         //自定义分页请求参数名
    78.             pageName: 'page', //页码的参数名称，默认：page
    79.             limitName: 'rows' //每页数据量的参数名，默认：limit
    80.         }
    81.    });
    82. }
    83.  
    84. //3.对话框
    85. function open(title){
    86.     layer.open({
    87.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    88.        title:title,
    89.        area: ['660px', '340px'],   //宽高
    90.        skin: 'layui-layer-rim',    //样式类名
    91.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    92.        btn:['保存','关闭','批量新增','不关闭'],
    93.        yes: function(index, layero){
    94.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    95. //    	   jquery.find
    96.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    97.            console.log(data);
    98.            //判断title标题
    99.            let methodName="add";
    100.            if(title=="编辑")
    101.         	   methodName="edit";
    102.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    103.         		   data,function(rs){
    104.         	   if(rs.success){
    105.         		   //关闭对话框
    106.         		   layer.closeAll();
    107.         		   //调用查询方法刷新数据
    108.         		   query();
    109.         	   }else{
    110.         		   layer.msg(rs.msg,function(){});
    111.         	   }
    112.            },'json');
    113.        },
    114.        btn2: function(index, layero){
    115.     	   layer.closeAll();
    116.        }
    117.        ,
    118.        btn3: function(index, layero){
    119.     	   layer.msg("批量新增");
    120.        }
    121.        ,
    122.        btn4: function(index, layero){
    123.     	   layer.msg("不关闭");
    124.     	   return false;
    125.        }
    126.        
    127.     });
    128.  }
      129.  运行结果为：
      如果不想关闭就在下面加一个
      return false;
       如图所示：
       四、用户编辑
       
 
      这个是我们最早从官网里面备份了一份的下来的吧
       
 
       
 
      这个我们写好了一份复制到userManage.js里面的initTable里面去
       
 
      1. //1.初始化数据表格
      2. function initTable(){
      3. 	table.render({           //执行渲染
      4.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
      5. //        url: 'user.action?methodName=list',     //请求地址
      6.         height: 340,         //自定义高度
      7.         loading: false,      //是否显示加载条（默认 true）
      8.         cols: [[             //设置表头
      9.             {field: 'id', title: '用户编号', width: 120},
      10.             {field: 'name', title: '用户名', width: 120},
      11.             {field: 'loginName', title: '登录账号', width: 140},
      12.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
      13.         ]]
      14.     });
      15. 	
      16. 	//在页面中的
       
 
 
 
 
 
 

      中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    129. 	table.on('tool(tb)', function (obj) {
    130. 		row = obj.data;
    131. 		if (obj.event == "edit") {
    132. 			open("编辑");
    133. 		}else if(obj.event == "del"){
    134. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    135. 			  $.post($("#ctx").val()+'/user.action',{
    136. 				  'methodName':'del',
    137. 				  'id':row.id
    138. 			  },function(rs){
    139. 				  if(rs.success){
    140. 	        		   //调用查询方法刷新数据
    141. 	        		   query();
    142. 	        	   }else{
    143. 	        		   layer.msg(rs.msg,function(){});
    144. 	        	   }
    145. 			  },'json');
    146. 			  layer.close(index);
    147. 			});
    148. 		}else{
    149.  
    150. 		}
    151. 	});
    152. 	
    153. }
      154.  
       当我们点击编辑的时候如图所示:数据给我们回显了
      这个用户名称不能改的原因是：
       我们修改一下看看能不能修改如图所示：
      这个删除也是用的 
       
      运行一下删除如图所示：
       代码格式：userManage.jsp，userManage.js——userEdit.jsp,userEdit.js
      userManage.jsp代码块：
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2.     pageEncoding="UTF-8"%>
      3.     <%@include file="/common/header.jsp" %>
      4. html>
      5. <html>
      6. <head>
      7. <meta charset="UTF-8">
      8. <script type="text/javascript" src="static/js/system/userManage.js">script>
      9. head>
      10. <body>
      11. 	
      12. 	<div class="layui-form-item">
      13. 	  <div class="layui-inline">
      14. 	    <label class="layui-form-label">用户名：label>
      15. 	    <div class="layui-input-inline">
      16. 	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      17. 	    div>
      18. 	  div>
      19. 	  
      20. 	  <div class="layui-inline">
      21. 	    <div class="layui-input-inline">
      22. 	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
      23. 	      	<i class="layui-icon layui-icon-search">i>
      24. 	      	查询
      25. 	      button>
      26. 	      <button id="btn_add" type="button" class="layui-btn">新增button>
      27. 	    div>
      28. 	  div>
      29. 	  
      30. 	div>
      31. 	
      32. 	<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;">table>
      33. 	
      34. 	
      35. 	<script type="text/html" id="toolbar">
      36.  		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑button>
      37.  		<button class="layui-btn layui-btn-sm" lay-event="del">删除button>
      38.  		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码button>
      39. 	script>
      40. body>
      41. html>
       userManage.js代码块：
      1. let layer,$,table;
      2. var row;
      3. layui.use(['jquery', 'layer', 'table'], function(){
      4. 	layer = layui.layer
      5. 	,$ = layui.jquery
      6. 	,table = layui.table;
      7. 	//初始化数据表格
      8. 	initTable();
      9. 	//绑定查询按钮的点击事件
      10. 	$('#btn_search').click(function(){
      11. 		query();
      12. 	});
      13. 	
      14. 	//绑定新增按钮的点击事件
      15. 	$('#btn_add').click(function(){
      16. 		row=null;
      17. 		open('新增');
      18. 	});
      19. });
      20.  
      21.  
      22. //1.初始化数据表格
      23. function initTable(){
      24. 	table.render({           //执行渲染
      25.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
      26. //        url: 'user.action?methodName=list',     //请求地址
      27.         height: 340,         //自定义高度
      28.         loading: false,      //是否显示加载条（默认 true）
      29.         cols: [[             //设置表头
      30.             {field: 'id', title: '用户编号', width: 120},
      31.             {field: 'name', title: '用户名', width: 120},
      32.             {field: 'loginName', title: '登录账号', width: 140},
      33.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
      34.         ]]
      35.     });
      36. 	
      37. 	//在页面中的
       
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
 

      中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    154. 	table.on('tool(tb)', function (obj) {
    155. 		row = obj.data;
    156. 		if (obj.event == "edit") {
    157. 			open("编辑");
    158. 		}else if(obj.event == "del"){
    159. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    160. 			  $.post($("#ctx").val()+'/user.action',{
    161. 				  'methodName':'del',
    162. 				  'id':row.id
    163. 			  },function(rs){
    164. 				  if(rs.success){
    165. 	        		   //调用查询方法刷新数据
    166. 	        		   query();
    167. 	        	   }else{
    168. 	        		   layer.msg(rs.msg,function(){});
    169. 	        	   }
    170. 			  },'json');
    171. 			  layer.close(index);
    172. 			});
    173. 		}else{
    174.  
    175. 		}
    176. 	});
    177. 	
    178. 	
    179. 	
    180. }
    181. //2.点击查询
    182. function query(){
    183. //	console.log($("#ctx").val());
    184. 	table.reload('tb', {
    185.         url: $("#ctx").val()+'/user.action',     //请求地址
    186.         method: 'POST',                    //请求方式，GET或者POST
    187.         loading: true,                     //是否显示加载条（默认 true）
    188.         page: true,                        //是否分页
    189.         where: {                           //设定异步数据接口的额外参数，任意设
    190.         	'methodName':'list',
    191.         	'name':$('#name').val()
    192.         },  
    193.         request: {                         //自定义分页请求参数名
    194.             pageName: 'page', //页码的参数名称，默认：page
    195.             limitName: 'rows' //每页数据量的参数名，默认：limit
    196.         }
    197.    });
    198. }
    199.  
    200. //3.对话框
    201. function open(title){
    202.     layer.open({
    203.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    204.        title:title,
    205.        area: ['660px', '340px'],   //宽高
    206.        skin: 'layui-layer-rim',    //样式类名
    207.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    208.        btn:['保存','关闭'],
    209.        yes: function(index, layero){
    210.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    211. //    	   jquery.find
    212.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    213.            console.log(data);
    214.            //判断title标题
    215.            let methodName="add";
    216.            if(title=="编辑")
    217.         	   methodName="edit";
    218.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    219.         		   data,function(rs){
    220.         	   if(rs.success){
    221.         		   //关闭对话框
    222.         		   layer.closeAll();
    223.         		   //调用查询方法刷新数据
    224.         		   query();
    225.         	   }else{
    226.         		   layer.msg(rs.msg,function(){});
    227.         	   }
    228.            },'json');
    229.        },
    230.        btn2: function(index, layero){
    231.     	   layer.closeAll();
    232.        }
    233. //       ,
    234. //       btn3: function(index, layero){
    235. //    	   layer.msg("批量新增");
    236. //       }
    237. //       ,
    238. //       btn4: function(index, layero){
    239. //    	   layer.msg("不关闭");
    240. //    	   return false;
    241. //       }
    242.        
    243.     });
    244.  }
      245. userEdit.jsp代码块：
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2. 	pageEncoding="UTF-8"%>
      3. <%@include file="/common/header.jsp"%>
      4. html>
      5. <html>
      6. <head>
      7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      8. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js">script>
      9. <title>用户新增title>
      10. head>
      11. <style>
      12. .layui-form-select dl{
      13. 	max-height:150px;
      14. }
      15. style>
      16. <body>
      17. <div style="padding:10px;">
      18.     <form class="layui-form layui-form-pane" lay-filter="user">
      19.         <input type="hidden" name="id"/>
      20.         <div class="layui-form-item">
      21.             <label class="layui-form-label">用户名称label>
      22.             <div class="layui-input-block">
      23.                 <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
      24.             div>
      25.         div>
      26.         <div class="layui-form-item">
      27.             <label class="layui-form-label">用户角色label>
      28.             <div class="layui-input-block">
      29.                 <select name="rid">
      30.                     <option value="">---请选择---option>
      31.                     <option value="1">管理员option>
      32.                     <option value="2">发起者option>
      33.                     <option value="3">审批者option>
      34.                     <option value="4">参与者option>
      35.                     <option value="5">会议管理员option>
      36.                 select>
      37.             div>
      38.         div>
      39.         <div class="layui-form-item">
      40.             <label class="layui-form-label">登录账号label>
      41.             <div class="layui-input-block">
      42.                 <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
      43.             div>
      44.         div>
      45.         <div class="layui-form-item">
      46.             <label class="layui-form-label">登录密码label>
      47.             <div class="layui-input-block">
      48.                 <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
      49.             div>
      50.         div>
      51.     form>
      52. div>
      53. body>
      54. html>
      userEdit.js代码块：
      1. let layer,form,$;
      2.  
      3. layui.use(['layer','form','jquery'],function(){
      4. 	layer=layui.layer,form=layui.form,$=layui.jquery;
      5. 	initData();
      6. });
      7.  
      8. function initData(){
      9. 	console.log(parent.row);
      10. 	if(null!=parent.row){
      11. 	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
      12. 	     //parent.row：表格行对象
      13. //		table的数据在父页面 userManage.jsp
      14. //		点击编辑按钮的时候，当前行赋值给子页面userEdit.jsp
      15. 	     form.val('user',$.extend({}, parent.row||{}));// null或{name:zs} || {}
      16. 	     $('#name').attr('readonly','readonly');
      17. 	}
      18. }
      19.  
      20. function getData(){
      21. //	 
      22. //	取user是取的form表单里面的值
      23.     return form.val('user');
      24. }
      结构表的方法：————
      结构表的页面： 
    245. 

                    相关阅读:
      
                    
矩阵分析学习笔记（四）：λ矩阵及其Smith标准型                            
      
可观测性神器之 Micrometer                            
      
【2024最新精简版】Redis面试篇                            
      
java入门，登录注册案例                            
      
【Docker Compose】                            
      
go-channel                            
      
自定义类加载器                            
      
基于移动互联网的订餐APP系统设计与实现                            
      
RK3399平台开发系列讲解（FLASH篇）为什么数据要延迟写入FLASH                            
      
StarCoder2-Instruct: 完全透明和可自我对齐的代码生成                            
      
                          
                
    246. 
                    原文地址：https://blog.csdn.net/weixin_67465673/article/details/125890089
                
      247.