• LayUI之CRUD

    目录

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

    二、用户管理后台

    三、用户新增

    四、用户编辑

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

    整体页面

     ①先根据路径创建相关的界面，如下

     ②在官网上找到数据表格的代码块，再放到项目中

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

    初步效果：

     ③再从官网表单中找到输入框，并复制粘贴

    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>

    初步效果

     ④将验证邮箱那一块改为按钮

    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.       <div class="layui-input-inline">
    10.         <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交button>
    11.       div>
    12.     div>
    13.   div>

    初步效果

    ⑤将官方中弹出层的代码块复制到项目中即可，暂时不需要用到

    1. layer.open({
    2.     type: 1,
    3.     content: str //注意，如果str是object，那么需要字符拼接。
    4.   })

    二、用户管理后台

    User实体类：

    1. package com.zking.entity;
    2.  
    3. public class User {
    4.     private Long id;
    5.  
    6.     private String name;
    7.  
    8.     private String loginName;
    9.  
    10.     private String pwd;
    11.  
    12.     private Long rid;
    13.  
    14. 	public Long getId() {
    15. 		return id;
    16. 	}
    17.  
    18. 	public void setId(Long id) {
    19. 		this.id = id;
    20. 	}
    21.  
    22. 	public String getName() {
    23. 		return name;
    24. 	}
    25.  
    26. 	public void setName(String name) {
    27. 		this.name = name;
    28. 	}
    29.  
    30. 	public String getLoginName() {
    31. 		return loginName;
    32. 	}
    33.  
    34. 	public void setLoginName(String loginName) {
    35. 		this.loginName = loginName;
    36. 	}
    37.  
    38. 	public String getPwd() {
    39. 		return pwd;
    40. 	}
    41.  
    42. 	public void setPwd(String pwd) {
    43. 		this.pwd = pwd;
    44. 	}
    45.  
    46. 	public Long getRid() {
    47. 		return rid;
    48. 	}
    49.  
    50. 	public void setRid(Long rid) {
    51. 		this.rid = rid;
    52. 	}
    53.  
    54. 	public User() {
    55. 		super();
    56. 		// TODO Auto-generated constructor stub
    57. 	}
    58.  
    59. 	@Override
    60. 	public String toString() {
    61. 		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
    62. 	}
    63.     
    64.     
    65. }

    ①、完成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. 	public User login(User user) throws Exception {
    14. 		String sql="select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
    15. //		根据sql查询符合条件的用户，通常只会返回一条数据
    16. 		List users = super.executeQuery(sql, User.class, null);
    17. 		return users==null||users.size()==0?null:users.get(0);
    18. 		//		return super.executeQuery(sql, clz, pageBean);
    19. 	}
    20. //	查询用户信息及对应的角色，角色是通过case when得来的
    21. 	public List> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
    22. 		String sql="select *,\r\n" + 
    23. 				"(CASE rid \r\n" + 
    24. 				"WHEN 1 THEN '管理员' \r\n" + 
    25. 				"WHEN 2 THEN '发起者' \r\n" + 
    26. 				"WHEN 3 THEN '审批者' \r\n" + 
    27. 				"WHEN 4 THEN '参与者' \r\n" + 
    28. 				"WHEN 5 THEN '会议室管理员' \r\n" + 
    29. 				"ELSE '其他' END \r\n" + 
    30. 				") roleName \r\n" + 
    31. 				"from t_oa_user where 1 = 1";
    32. 		String name = user.getName();
    33. 		if(StringUtils.isNotBlank(name)) {
    34. 			sql+=" and name like '%"+name+"%'";
    35. 		}
    36. //		当实体类的属性完全包含数据库查询出来的列段的时候使用
    37. //		super.executeQuery(sql, User.class, pageBean)
    38. //		返回List>，对应的是连表查询，单个实体类对象不完全包含查询的列段
    39. 		return super.executeQuery(sql, pageBean);
    40. 	}
    41. //	增
    42. 	public int add(User user) throws Exception {
    43. 		String sql="insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    44. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
    45. 	}
    46. //	删
    47. 	public int del(User user) throws Exception {
    48. 		String sql="delete from t_oa_user where id=?";
    49. 		return super.executeUpdate(sql, user, new String[] {"id"});
    50. 	}
    51. //	改
    52. 	public int edit(User user) throws Exception {
    53. 		String sql = "update t_oa_user set name=?, loginName=?, pwd=? where id=?";
    54. 		return super.executeUpdate(sql, user, new String [] {"name","loginName","pwd","id"});
    55. 	}
    56. }

    再用juin进行测试---->UserDaoTest

    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. 	private UserDao userDao=new UserDao();
    18. 	
    19. 	@Before
    20. 	public void setUp() throws Exception {
    21. 	}
    22.  
    23. 	@After
    24. 	public void tearDown() throws Exception {
    25. 	}
    26.  
    27. 	@Test
    28. 	public void testList() {
    29. 		User user=new User();
    30. 		PageBean pageBean=new PageBean();
    31. 		try {
    32. 			List> list = userDao.list(user, pageBean);
    33. 			for (Map map : list) {
    34. 				System.out.println(map);
    35. 			}
    36. 		} catch (Exception e) {
    37. 			e.printStackTrace();
    38. 		}
    39. 	}
    40.  
    41. 	@Test
    42. 	public void testAdd() {
    43. 		User user=new User();
    44. 		user.setName("云鹤衫");
    45. 		user.setLoginName("yhs");
    46. 		user.setPwd("1234");
    47. 		try {
    48. 			userDao.add(user);
    49. 		} catch (Exception e) {
    50. 			e.printStackTrace();
    51. 		}
    52. 	}
    53.  
    54. 	@Test
    55. 	public void testDel() {
    56. 		User user=new User();
    57. 		user.setId(17L);
    58. 		try {
    59. 			userDao.del(user);
    60. 		} catch (Exception e) {
    61. 			e.printStackTrace();
    62. 		}
    63. 	}
    64.  
    65. 	@Test
    66. 	public void testEdit() {
    67. 		User user=new User();
    68. 		user.setName("云鹤衫");
    69. 		user.setLoginName("yhs2");
    70. 		user.setPwd("1234567");
    71. 		user.setId(17L);
    72. 		try {
    73. 			userDao.edit(user);
    74. 		} catch (Exception e) {
    75. 			e.printStackTrace();
    76. 		}
    77. 	}
    78.  
    79. }

     list方法结果：

    add方法结果：

     

       edit方法结果：

    del方法结果：

    将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. 	private User user=new User();
    20. 	private UserDao userDao=new UserDao();
    21.  
    22. //写一个方法除了前台的请求
    23. /*	public String login(HttpServletRequest req, HttpServletResponse resp) {
    24. 		Map map = new HashMap();
    25. 		if("zhangsan".equals(user.getUsername()) && "123456".equals(user.getPassword())) {
    26. 			map.put("code", 200);
    27. 			map.put("msg", "登录成功");
    28. 		}else {
    29. 			map.put("code", 0);
    30. 			map.put("msg", "用户名或密码错误");
    31. 		}
    32. 		try {
    33. 			ResponseUtil.writeJson(resp, map);
    34. 		} catch (Exception e) {
    35. 			// TODO Auto-generated catch block
    36. 			e.printStackTrace();
    37. 		}
    38. 		try {
    39. 			ResponseUtil.writeJson(resp, map);
    40. 		} catch (Exception e) {
    41. 			// TODO Auto-generated catch block
    42. 			e.printStackTrace();
    43. 		}
    44. 		return null;
    45. 	}*/
    46. 	
    47. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    48. 		try {
    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. 				ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
    56. 				req.getSession().setAttribute("user", u);
    57. 			}
    58. 			else {
    59. 				ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));
    60. 			}
    61. 		} catch (Exception e) {
    62. 			e.printStackTrace();
    63. 			try {
    64. 				ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));
    65. 			} catch (Exception e2) {
    66. 				e2.printStackTrace();
    67. 			}
    68. 		}
    69. 		return null;
    70. 	}
    71. 	
    72. 	//用户查询
    73. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    74. 		try {
    75. 			PageBean pageBean=new PageBean();
    76. 			pageBean.setRequest(req);
    77. 			List> users = userDao.list(user, pageBean);
    78. 			//注意：layui中的数据表格的格式
    79. 			ResponseUtil.writeJson(resp, R.ok(0	,"用户数据查询成功",pageBean.getTotal(),user));
    80. 		} catch (Exception e) {
    81. 			e.printStackTrace();
    82. 			try {
    83. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询失败"));
    84. 			} catch (Exception e2) {
    85. 				e2.printStackTrace();
    86. 			}
    87. 		}
    88. 		return null;
    89. 	}
    90. 	//增加
    91. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    92. 		try {
    93. 			//rs是sql语句执行的影响行数
    94. 			int rs=userDao.add(user);
    95. 			if(rs>0) {
    96. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
    97. 			}
    98. 			else {
    99. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
    100. 			}
    101. 		} catch (Exception e) {
    102. 			e.printStackTrace();
    103. 			try {
    104. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
    105. 			} catch (Exception e2) {
    106. 				e2.printStackTrace();
    107. 			}
    108. 		}
    109. 		return null;
    110. 	}
    111. 	
    112. 	//删除
    113. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    114. 		try {
    115. 			//rs是sql语句执行的影响行数
    116. 			int rs=userDao.add(user);
    117. 			if(rs>0) {
    118. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
    119. 			}
    120. 			else {
    121. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    122. 			}
    123. 		} catch (Exception e) {
    124. 			e.printStackTrace();
    125. 			try {
    126. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    127. 			} catch (Exception e2) {
    128. 				e2.printStackTrace();
    129. 			}
    130. 		}
    131. 		return null;
    132. 	}
    133. 	
    134. 	//修改
    135. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    136. 		try {
    137. 			//rs是sql语句执行的影响行数
    138. 			int rs=userDao.add(user);
    139. 			if(rs>0) {
    140. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
    141. 			}
    142. 			else {
    143. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    144. 			}
    145. 		} catch (Exception e) {
    146. 			e.printStackTrace();
    147. 			try {
    148. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    149. 			} catch (Exception e2) {
    150. 				e2.printStackTrace();
    151. 			}
    152. 		}
    153. 		return null;
    154. 	}
    155. 	
    156. 	@Override
    157. 	public User getModel() {
    158. 		return user;
    159. 	}
    160.  
    161. }

    R类：

    1. package com.zking.util;
    2.  
    3. import java.util.HashMap;
    4.  
    5. public class R extends HashMap{
    6. 	public R data(String key, Object value) {
    7. 		this.put(key, value);
    8. 		return this;
    9. 	}
    10. 	
    11. 	public static R ok(int code, String msg) {
    12. 		R r = new R();
    13. 		r.data("success", true).data("code", code).data("msg", msg);
    14. 		return r;
    15. 	}
    16. 	
    17. 	public static R error(int code, String msg) {
    18. 		R r = new R();
    19. 		r.data("success", false).data("code", code).data("msg", msg);
    20. 		return r;
    21. 	}
    22. 	
    23. 	public static R ok(int code, String msg,Object data) {
    24. 		R r = new R();
    25. 		r.data("success", true).data("code", code).data("msg", msg).data("data", data);
    26. 		return r;
    27. 	}
    28. 	
    29. 	public static R ok(int code, String msg, long count, Object data) {
    30. 		R r = new R();
    31. 		r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
    32. 		return r;
    33. 	}
    34. }

    三、用户新增

    主界面：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <%@include file="/common/header.jsp"%>
    4. DOCTYPE html>
    9. 用户管理
    12. 	
    13. 	
    14. 	  
    15. 	    
    16. 	    
    17. 	      
    18.
  • 查询

    •  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. }
    38. //2.点击查询
    39. function query(){
    40. //	console.log($("#ctx").val());
    41. 	table.reload('tb', {
    42.         url: $("#ctx").val()+'/user.action',     //请求地址
    43.         method: 'POST',                    //请求方式，GET或者POST
    44.         loading: true,                     //是否显示加载条（默认 true）
    45.         page: true,                        //是否分页
    46.         where: {                           //设定异步数据接口的额外参数，任意设
    47.         	'methodName':'list',
    48.         	'name':$('#name').val()
    49.         },  
    50.         request: {                         //自定义分页请求参数名
    51.             pageName: 'page', //页码的参数名称，默认：page
    52.             limitName: 'rows' //每页数据量的参数名，默认：limit
    53.         }
    54.    });
    55. }
    56. //3.对话框
    57. function open(title){
    58.     layer.open({
    59.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    60.        title:title,
    61.        area: ['660px', '340px'],   //宽高
    62.        skin: 'layui-layer-rim',    //样式类名
    63.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    64.        btn:['保存','关闭','批量新增','22'],
    65.        yes: function(index, layero){
    66.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    67. //    	   jquery find
    68.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    69.            console.log(data);
    70.            //判断title标题
    71.            let methodName="add";
    72.            if(title=="编辑")
    73.         	   methodName="edit";
    74.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    75.         		   data,function(rs){
    76.         	   if(rs.success){
    77.         		   //关闭对话框
    78.         		   layer.closeAll();
    79.         		   //调用查询方法刷新数据
    80.         		   query();
    81.         	   }else{
    82.         		   layer.msg(rs.msg,function(){});
    83.         	   }
    84.            },'json');
    85.        },
    86.        btn2: function(index, layero){
    87.     	   layer.closeAll();
    88.        },
    89.        btn3: function(index, layero){
    90.     	   layer.msg("批量新增");
    91.     	   return false;
    92.        },
    93.        btn4: function(index, layero){
    94.     	   layer.msg("批量新增22");
    95.        }
    96.     });
    97.  }

     新增界面：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <%@include file="/common/header.jsp"%>
    4. DOCTYPE html>
    9. 用户新增
    14.     
    15.         
    16.         
    17.             
    18.             
    19.                 
    20.             
    21.         
    22.         
    23.             
    24.             
    25.                 
    26.             
    27.         
    28.         
    29.             
    30.             
    31.                 
    32.             
    33.         
    34.         
    35.             
    36.             
    37.                 
    38.             
    39.         
    40.

    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. //		table的数据在父页面 userMange.jsp
    13. //		点击编辑按钮的时候，当前行赋值给予页面userEdit.jsp
    14. 	     form.val('user',$.extend({}, parent.row||{}));
    15. 	     $('#name').attr('readonly','readonly');
    16. 	}
    17. }
    18.  
    19. function getData(){
    20. //	取user from中的值
    21.     return form.val('user');
    22. }

    效果：

     

    四、用户编辑

    更改一下即可

    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. 	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    37. 	table.on('tool(tb)', function (obj) {
    38. 		row = obj.data;
    39. 		if (obj.event == "edit") {
    40. 			open("编辑");
    41. 		}else if(obj.event == "del"){
    42. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    43. 			  $.post($("#ctx").val()+'/user.action',{
    44. 				  'methodName':'del',
    45. 				  'id':row.id
    46. 			  },function(rs){
    47. 				  if(rs.success){
    48. 	        		   //调用查询方法刷新数据
    49. 	        		   query();
    50. 	        	   }else{
    51. 	        		   layer.msg(rs.msg,function(){});
    52. 	        	   }
    53. 			  },'json');
    54. 			  layer.close(index);
    55. 			});
    56. 		}else{
    57.  
    58. 		}
    59. 	});
    60. 	
    61. }
    62. //2.点击查询
    63. function query(){
    64. //	console.log($("#ctx").val());
    65. 	table.reload('tb', {
    66.         url: $("#ctx").val()+'/user.action',     //请求地址
    67.         method: 'POST',                    //请求方式，GET或者POST
    68.         loading: true,                     //是否显示加载条（默认 true）
    69.         page: true,                        //是否分页
    70.         where: {                           //设定异步数据接口的额外参数，任意设
    71.         	'methodName':'list',
    72.         	'name':$('#name').val()
    73.         },  
    74.         request: {                         //自定义分页请求参数名
    75.             pageName: 'page', //页码的参数名称，默认：page
    76.             limitName: 'rows' //每页数据量的参数名，默认：limit
    77.         }
    78.    });
    79. }
    80. //3.对话框
    81. function open(title){
    82.     layer.open({
    83.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    84.        title:title,
    85.        area: ['660px', '340px'],   //宽高
    86.        skin: 'layui-layer-rim',    //样式类名
    87.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    88.        btn:['保存','关闭','批量新增','22'],
    89.        yes: function(index, layero){
    90.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    91. //    	   jquery find
    92.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    93.            console.log(data);
    94.            //判断title标题
    95.            let methodName="add";
    96.            if(title=="编辑")
    97.         	   methodName="edit";
    98.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    99.         		   data,function(rs){
    100.         	   if(rs.success){
    101.         		   //关闭对话框
    102.         		   layer.closeAll();
    103.         		   //调用查询方法刷新数据
    104.         		   query();
    105.         	   }else{
    106.         		   layer.msg(rs.msg,function(){});
    107.         	   }
    108.            },'json');
    109.        },
    110.        btn2: function(index, layero){
    111.     	   layer.closeAll();
    112.        },
    113.        btn3: function(index, layero){
    114.     	   layer.msg("批量新增");
    115.     	   return false;
    116.        },
    117.        btn4: function(index, layero){
    118.     	   layer.msg("批量新增22");
    119.        }
    120.     });
    121.  }
      122. 修改效果：
       
      删除效果：
       
    122. 

                    相关阅读:
      
                    
Jmeter控制RPS                            
      
如何在视频上添加水印？建议收藏这些方法                            
      
SpringBoot：如何优雅地进行响应数据封装、异常处理？                            
      
手写一个PrattParser基本运算解析器2: PrattParser概述                            
      
Python基础运算分享                            
      
linux进程管理                            
      
【JDK 8-集合框架进阶】6.3 foreach                            
      
MySQL主从复制-读写分离                            
      
CentOS7 二进制安装 zabbix_agent 5.0                            
      
幻兽帕鲁游戏搭建（docker）                            
      
                          
                
    123. 
                    原文地址：https://blog.csdn.net/m0_62604616/article/details/125878259
                
      124.