• LayUI之CRUD(增删改查)

    目录

    前言

     一、前端静态模板 

    二、用户管理后台代码

    查看表（MySQL数据库）

    表结构：

     实体类

     Dao方法(UserDao)：

    查询

    增加

    删除

    修改

    测试后台dao方法(Junit)

     UserDaoTest:

    查询

    增加

    修改

    删除

    web

    三、用户管理前台代码

    UserManage.jsp页面

     userManage.js

     用户管理界面效果

    增加

     编辑和修改

    修改运行效果：

    删除效果：

    前言

    本篇我们将使用LayUI界面实现用户的增删改查

     一、前端静态模板 

    首先，我们进入LayUI官网找相对应的模板，点击查看代码

     新建一个 userManage.jsp ，把源代码直接copy到我们的项目界面中：

     

    然后再找个表单复制源代码：

     接着增加一个提交按钮：

    userManage.jsp 成效：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="../../common/head.jsp" %>
    4. 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.   <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="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="l ayui-input demo-phone"  value="请输入要查找的用户名">
    16.       div>
    17.       <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查找button>
    18.     div>
    19.   div>
    20. <table class="layui-hide" id="test" lay-filter="test">table>
    21.  
    22. <script type="text/html" id="toolbarDemo">
    23.   <div class="layui-btn-container">
    24.     <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据button>
    25.     <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目button>
    26.     <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选button>
    27.   div>
    28. script>
    29.  
    30. <script type="text/html" id="barDemo">
    31.   <a class="layui-btn layui-btn-xs" lay-event="edit">编辑a>
    32.   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除a>
    33. script>
    34.               
    35.           
    37. <script src="//unpkg.com/layui@2.7.5/dist/layui.js">script>
    38.  
    39.  
    40. <script>
    41. layui.use('table', function(){
    42.   var table = layui.table;
    43.   
    44.   table.render({
    45.     elem: '#test'
    46.     ,url:'/static/json/table/demo1.json'
    47.     ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    48.     ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    49.       title: '提示'
    50.       ,layEvent: 'LAYTABLE_TIPS'
    51.       ,icon: 'layui-icon-tips'
    52.     }]
    53.     ,title: '用户数据表'
    54.     ,cols: [[
    55.       {type: 'checkbox', fixed: 'left'}
    56.       ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
    57.       ,{field:'username', title:'用户名', width:120, edit: 'text'}
    58.       ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
    59.         return ''+ res.email +''
    60.       }}
    61.       ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
    62.       ,{field:'city', title:'城市', width:100}
    63.       ,{field:'sign', title:'签名'}
    64.       ,{field:'experience', title:'积分', width:80, sort: true}
    65.       ,{field:'ip', title:'IP', width:120}
    66.       ,{field:'logins', title:'登入次数', width:100, sort: true}
    67.       ,{field:'joinTime', title:'加入时间', width:120}
    68.       ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    69.     ]]
    70.     ,page: true
    71.   });
    72.   
    73.   //头工具栏事件
    74.   table.on('toolbar(test)', function(obj){
    75.     var checkStatus = table.checkStatus(obj.config.id);
    76.     switch(obj.event){
    77.       case 'getCheckData':
    78.         var data = checkStatus.data;
    79.         layer.alert(JSON.stringify(data));
    80.       break;
    81.       case 'getCheckLength':
    82.         var data = checkStatus.data;
    83.         layer.msg('选中了：'+ data.length + ' 个');
    84.       break;
    85.       case 'isAll':
    86.         layer.msg(checkStatus.isAll ? '全选': '未全选');
    87.       break;
    88.       
    89.       //自定义头工具栏右侧图标 - 提示
    90.       case 'LAYTABLE_TIPS':
    91.         layer.alert('这是工具栏右侧自定义的一个图标按钮');
    92.       break;
    93.     };
    94.   });
    95.   
    96.   //行工具事件
    97.   table.on('tool(test)', function(obj){
    98.     var data = obj.data;
    99.     //console.log(obj)
    100.     if(obj.event === 'del'){
    101.       layer.confirm('真的删除行么', function(index){
    102.         obj.del();
    103.         layer.close(index);
    104.       });
    105.     } else if(obj.event === 'edit'){
    106.       layer.prompt({
    107.         formType: 2
    108.         ,value: data.email
    109.       }, function(value, index){
    110.         obj.update({
    111.           email: value
    112.         });
    113.         layer.close(index);
    114.       });
    115.     }
    116.   });
    117. });
    118. /* 
    119. layer.open({
    120. 	  title: '在线调试'
    121. 	  ,content: '配置各种参数，试试效果'
    122. 	});     
    123. 	   */
    124. script>
    125.  
    126. body>
    127. html>

    运行效果：

    二、用户管理后台代码

    查看表（MySQL数据库）

    t_oa_user表：

    有用户信息，就不给大家看他们的了，我就展示我的。

    表结构：

     

    要查询出用户信息及对应的角色

    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
    9. )roleName
    10. from 
    11. t_oa_user

    查询结果：

     实体类

    User：

    1. package com.oyang.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. }

     Dao方法(UserDao)：

    查询

    1. 	//查询用户信息及对应的角色，角色是通过case when得来的
    2. 	public List> list(User user,PageBean pageBean) throws Exception{
    3. 		String sql="select * \r\n" + 
    4. 				",(case rid \r\n" + 
    5. 				"when 1 then '管理员' \r\n" + 
    6. 				"when 2 then '发起者' \r\n" + 
    7. 				"when 3 then '审批者' \r\n" + 
    8. 				"when 4 then '参与者' \r\n" + 
    9. 				"when 5 then '会议室管理员 ' \r\n" + 
    10. 				"else '其他' end \r\n" + 
    11. 				") roleName \r\n" + 
    12. 				"from \r\n" + 
    13. 				"t_oa_user where 1=1 ";
    14. 		String name = user.getName();
    15. 		if(StringUtils.isNotBlank(name)){
    16. 			sql += " and name like '%"+name+"'%";
    17. 		}
    18. 		
    19. //		当实体类的属性完全包含数据库查询出来的列段的时候使用
    20. //		super.executeQuery(sql, clz, pageBean);
    21. //		返回List>,对应的是联表查询，单个实体类对象不完全包含查询的列段
    22. 		return super.executeQuery(sql, pageBean);
    23. 	}

    增加

    1. 	//增加
    2. 	public int add(User user) throws Exception {
    3. 		String sql="insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    4. 		return super.executeUpdate(sql, user,new String[] {"name","loginName","pwd"});
    5. 	}

    删除

    1. //删除
    2. 	public int del(User user) throws Exception {
    3. 		String sql="delete from t_oa_user where id=?";
    4. 		return super.executeUpdate(sql, user,new String[] {"i d"});
    5. 	}

    修改

    1. 	//修改
    2. 	public int edit(User user) throws Exception {
    3. 		String sql="update t_oa_user set name=?,loginName=?,pwd=? where id=?)";
    4. 		return super.executeUpdate(sql, user,new String[] {"name","loginName","pwd","id"});
    5. 	}

    测试后台dao方法(Junit)

     UserDaoTest:

    查询

    1. package com.oyang.dao;
    2.  
    3. import static org.junit.Assert.*;
    4.  
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. import org.junit.After;
    9. import org.junit.Before;
    10. import org.junit.Test;
    11.  
    12. import com.oyang.entity.User;
    13. import com.oyang.util.PageBean;
    14.  
    15. public class UserDaoTest {
    16. 	UserDao ud=new UserDao();
    17. 	@Before
    18. 	public void setUp() throws Exception {
    19. 	}
    20.  
    21. 	@After
    22. 	public void tearDown() throws Exception {
    23. 	}
    24.  
    25. 	@Test
    26. 	public void testList() {
    27. 		User user=new User();
    28. 		PageBean pageBean =new PageBean();
    29. 		try {
    30. 			List> list = ud.list(user, pageBean);
    31. 			for (Map map : list) {
    32. 				System.out.println(map);
    33. 			}
    34. 		} catch (Exception e) {
    35. 			// TODO Auto-generated catch block
    36. 			e.printStackTrace();
    37. 		}
    38. 	}
    39. }

    增加

    1. 	@Test
    2. 	public void testAdd() {
    3. 		User user=new User();
    4. 		user.setName("oy");
    5. 		user.setLoginName("oyx");
    6. 		user.setPwd("123");
    7. 		try {
    8. 			ud.add(user);
    9. 		} catch (Exception e) {
    10. 			// TODO Auto-generated catch block
    11. 			e.printStackTrace();
    12. 		}
    13. }

    修改

    1.     @Test
    2. 	public void testEdit() {
    3. 		User user=new User();
    4. 		user.setName("欧阳");
    5. 		user.setLoginName("oyangx");
    6. 		user.setPwd("123");
    7. 		user.setId(14L);
    8. 		try {
    9. 			ud.edit(user);
    10. 		} catch (Exception e) {
    11. 			// TODO Auto-generated catch block
    12. 			e.printStackTrace();
    13. 		}
    14. 	}

    删除

    1.     @Test
    2. 	public void testDel() {
    3. 		User user=new User();
    4. 		user.setId(14L);
    5. 		try {
    6. 			ud.del(user);
    7. 		} catch (Exception e) {
    8. 			// TODO Auto-generated catch block
    9. 			e.printStackTrace();
    10. 		}
    11. 	}

    web

    UserAction：

    1. package com.oyang.web;
    2.  
    3. import java.io.IOException;
    4. import java.util.HashMap;
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10.  
    11. import com.oyang.dao.UserDao;
    12. import com.oyang.entity.User;
    13. import com.oyang.framework.ActionSupport;
    14. import com.oyang.framework.ModelDriver;
    15. import com.oyang.util.PageBean;
    16. import com.oyang.util.R;
    17. import com.oyang.util.ResponseUtil;
    18.  
    19.  
    20. public class UserAction extends ActionSupport implements ModelDriver{
    21. 	
    22. 	private User user=new User();
    23. 	private UserDao udao=new UserDao();
    24.  
    25. 	//用户登录	
    26. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    27. 		try {
    28. 			User u = udao.login(user);
    29. 			//通过账户名密码查到了用户记录
    30. 		if(u!=null) {
    31. 			/*ResponseUtil.writeJson(resp, new R()
    32. 					.data("code", 200)
    33. 					.data("msg", "登录成功"));*/
    34. 			ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
    35. 		}
    36. 		else {
    37. 			/*ResponseUtil.writeJson(resp, new R()
    38. 					.data("code", 0)
    39. 					.data("msg", "账户密码错误"));*/
    40. 			ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
    41. 		}
    42. 		} catch (Exception e) {
    43. 			e.printStackTrace();
    44. 			try {
    45. 				ResponseUtil.writeJson(resp, R.error(0, "登录失败"));
    46. 			} catch (Exception e1) {
    47. 				// TODO Auto-generated catch block
    48. 				e1.printStackTrace();
    49. 			}
    50. 		}
    51. 		return null;
    52. 	}
    53. 	
    54. 	
    55. 	//用户查询
    56. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    57. 		try {
    58. 			PageBean pageBean=new PageBean();
    59. 			pageBean.setRequest(req);
    60. 			List> users = udao.list(user, pageBean);
    61. 			//注意：LayUI中数据表格的格式
    62. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),user));
    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. 	//用户增加
    78. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    79. 		try {
    80. 			//rs是sql语句执行的影响行数
    81. 			int rs = udao.add(user);
    82. 			if(rs>0) {
    83. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
    84. 			}
    85. 			else {
    86. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
    87. 			}
    88. 		} catch (Exception e) {
    89. 			e.printStackTrace();
    90. 			try {
    91. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    92. 			} catch (Exception e1) {
    93. 				// TODO Auto-generated catch block
    94. 				e1.printStackTrace();
    95. 			}
    96. 		}
    97. 		return null;
    98. 	}
    99. 		
    100. 	//用户删除
    101. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    102. 		try {
    103. 			//rs是sql语句执行的影响行数
    104. 			int rs = udao.del(user);
    105. 			if(rs>0) {
    106. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
    107. 			}
    108. 			else {
    109. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    110. 			}
    111. 		} catch (Exception e) {
    112. 			e.printStackTrace();
    113. 			try {
    114. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    115. 			} catch (Exception e1) {
    116. 				// TODO Auto-generated catch block
    117. 				e1.printStackTrace();
    118. 			}
    119. 		}
    120. 		return null;
    121. 	}
    122. 		
    123. 	//用户修改
    124. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    125. 		try {
    126. 			//rs是sql语句执行的影响行数
    127. 			int rs = udao.add(user);
    128. 			if(rs>0) {
    129. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
    130. 			}
    131. 			else {
    132. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    133. 			}
    134. 		} catch (Exception e) {
    135. 			e.printStackTrace();
    136. 			try {
    137. 				ResponseUtil.writeJson(resp, R.error(0, "用户修改新增失败"));
    138. 			} catch (Exception e1) {
    139. 				// TODO Auto-generated catch block
    140. 				e1.printStackTrace();
    141. 			}
    142. 		}
    143. 		return null;
    144. 	}
    145. 			
    146. 	
    147. 	
    148. 	@Override
    149. 	public User getModel() {
    150. 		// TODO Auto-generated method stub
    151. 		return user;
    152. 	}
    153.  
    154. }

    三、用户管理前台代码

    UserManage.jsp页面

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="../../common/head.jsp" %>
    4. 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. <script 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代码，小编把js代码封装成js文件，直接在页面中导入js文件即可

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

     用户管理界面效果

    增加

    界面：

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

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

    增加界面效果：

    执行结果：

     编辑和修改

    1. //在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    2. 	table.on('tool(tb)', function (obj) {
    3. 		row = obj.data;
    4. 		if (obj.event == "edit") {
    5. 			open("编辑");
    6. 		}else if(obj.event == "del"){
    7. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    8. 			  $.post($("#ctx").val()+'/user.action',{
    9. 				  'methodName':'del',
    10. 				  'id':row.id
    11. 			  },function(rs){
    12. 				  if(rs.success){
    13. 	        		   //调用查询方法刷新数据
    14. 	        		   query();
    15. 	        	   }else{
    16. 	        		   layer.msg(rs.msg,function(){});
    17. 	        	   }
    18. 			  },'json');
    19. 			  layer.close(index);
    20. 			});
    21. 		}else{
    22.  
    23. 		}
    24. 	});
      25.  
 
      修改运行效果：
       
 
      修改前绑值：
       
 
       
 
       修改信息：
       
 
       
 
      修改后：
       
 
       
 
      删除效果：
       
 
       
 
      删除后：
       
 
       
 
      可以看见，数据也变回了11条。
       

       
 
        OK，今日的分享就到此结束啦，如果对个位看官有帮助的话可以留下免费的赞哦(收藏或关注也行),如果文章中有什么问题或不足以及需要改正的地方可以私信博主，博主会做出改正的。个位看官，小陽在此跟大家说拜拜啦！
       

    25. 

                    相关阅读:
      
                    
HTTP协议简介                            
      
《Python编程无师自通》读书笔记                            
      
（四）Vue之数据绑定                            
      
Electron常见问题 63 - sentry上传自定义pdb符号表                            
      
牛客网：设计LRU缓存结构 设计LFU缓存结构                            
      
Golang的数组、切片、映射                            
      
各个大学的校训                            
      
图像新型拼接                            
      
web：[RoarCTF 2019]Easy Calc                            
      
《算法系列》之模拟                            
      
                          
                
    26. 
                    原文地址：https://blog.csdn.net/weixin_65211978/article/details/125903575
                
      27.