• LayUI之CRUD

    目录

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

    二、用户管理后台代码

    三、用户新增

    四、用户编辑及删除

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

    今日要讲的是关于LayUi之用户管理：增删改查，

     我们可以官网，找到弹出层内你需要的效果的代码（如下）：

     新建一个 userManage.jsp ，把源代码复制到body标签内：

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

     

     接着增加一个提交按钮：

     userManager.jsp：

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

    运行效果： 

    二、用户管理后台代码

    今天要涉及到的是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

     运行SQL语句结果如下：

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

     UserDaoTest:

    测试查询所有：

    1.  
    2. public class UserDaoTest {
    3. 	private UserDao UserDao=new UserDao();
    4. 	
    5.  
    6. 	@Test
    7. 	public void testList() {
    8. 		User user=new User();
    9. 		PageBean pageBean=new PageBean();
    10. 		try {
    11. 			List<Map<String, Object>> list = UserDao.list(user, pageBean);
    12. 			for (Map<String, Object> map : list) {
    13. 				System.out.println(map);
    14. 			}
    15. 		} catch (Exception e) {
    16. 			// TODO Auto-generated catch block
    17. 			e.printStackTrace();
    18. 		}
    19. 	}
    20.  
    21.  
    22.  
    23. }

    打印结果： 

     测试增加方法：

    1. @Test
    2. 	public void testAdd() {
    3. 		User user=new User();
    4. 		user.setName("颜家阳");
    5. 		user.setLoginName("yjy");
    6. 		user.setPwd("1108");
    7. 		try {
    8. 			UserDao.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("love颜家阳");
    5. 		user.setLoginName("loveyjy");
    6. 		user.setPwd("20021108");
    7. 		user.setId(19L);
    8. 		try {
    9. 			UserDao.add(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(13L);
    5. 		try {
    6. 			UserDao.del(user);
    7. 		} catch (Exception e) {
    8. 			// TODO Auto-generated catch block
    9. 			e.printStackTrace();
    10. 		}
    11. 	}

    运行： 

     进数据库核实：

    编写  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<User>{
    19. 	private User user=new User();
    20. 	private UserDao userDao=new UserDao();
    21. 	
    22. //	写一个方法处理前台的请求
    23. 	
    24. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    25. 		try {
    26. 			User u = userDao.login(user);
    27. 			//通过账户名密码查到了用户记录
    28. 			if(u!=null) {
    29. //		登录成功	
    30. //				ResponseUtil.writeJson(resp, new R()
    31. //						.data("code", 200)
    32. //						.data("msg", "登录成功"));
    33. 			ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
    34. 			req.getSession().setAttribute("user", u);
    35. 			}else {
    36. //		登录失败	
    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 e2) {
    47. 				e2.printStackTrace();
    48. 			}
    49. 		}
    50. 		return null;
    51. 	}
    52. 	
    53. //	用户查询
    54. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    55. 		try {
    56. 			PageBean pageBean=new PageBean();
    57. 			pageBean.setRequest(req);
    58. 			List<Map<String, Object>> users = userDao.list(user, pageBean);
    59. //		注意：layui中的数据表格的格式
    60. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
    61. 		} catch (Exception e) {
    62. 			e.printStackTrace();
    63. 			try {
    64. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
    65. 			} catch (Exception e2) {
    66. 				e2.printStackTrace();
    67. 			}
    68. 		}
    69. 		return null;
    70. 	}
    71. 	
    72. //	增加用户
    73. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    74. 		try {
    75. //			rs是sql语句执行的影响行数
    76. 			int rs = userDao.add(user);
    77. 			if(rs>0) {
    78. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据增加成功"));
    79. 			}else {
    80. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据增加失败"));
    81. 			}
    82. 		} catch (Exception e) {
    83. 			e.printStackTrace();
    84. 			try {
    85. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
    86. 			} catch (Exception e2) {
    87. 				e2.printStackTrace();
    88. 			}
    89. 		}
    90. 		return null;
    91. 	}
    92. 	
    93. //	删除用户
    94. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    95. 		try {
    96. //			rs是sql语句执行的影响行数
    97. 			int rs = userDao.add(user);
    98. 			if(rs>0) {
    99. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
    100. 			}else {
    101. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    102. 			}
    103. 		} catch (Exception e) {
    104. 			e.printStackTrace();
    105. 			try {
    106. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    107. 			} catch (Exception e2) {
    108. 				e2.printStackTrace();
    109. 			}
    110. 		}
    111. 		return null;
    112. 	}
    113. 	
    114. //	修改用户
    115. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    116. 		try {
    117. //			rs是sql语句执行的影响行数
    118. 			int rs = userDao.add(user);
    119. 			if(rs>0) {
    120. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
    121. 			}else {
    122. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    123. 			}
    124. 		} catch (Exception e) {
    125. 			e.printStackTrace();
    126. 			try {
    127. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    128. 			} catch (Exception e2) {
    129. 				e2.printStackTrace();
    130. 			}
    131. 		}
    132. 		return null;
    133. 	}
    134. 	
    135. 	@Override
    136. 	public User getModel() {
    137. 		return user;
    138. 	}
    139. 	
    140. }

    三、用户新增

    userManage.jsp:

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="/common/header.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>
    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. 	//绑定新增按钮的点击事件
    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.        
    94.     });
    95.  }

    userEdit.jsp: 

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="/common/header.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 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. 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的数据在父页面userManger.jsp
    13. //		点击编辑按钮的时候，当前行赋值给子页面userEdit.jsp
    14. 	     form.val('user',$.extend({}, parent.row||{}));//null||{}
    15. 	     $('#name').attr('readonly','readonly');
    16. 	}
    17. }
    18.  
    19. function getData(){
    20. //	
    21. //	取user form中的值
    22.     return form.val('user');
    23. }

    运行效果： 

     

    点击新增： 

     

     新增成功！！！（如下图）

     

    四、用户编辑及删除

    userManage.js:

    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.  

       
    25. 

                    相关阅读:
      
                    
Vue-3.1缓存组件keep-alive                            
      
Window对象的说明》                            
      
Vue Class Component在项目中的使用                            
      
Java项目：SSM课堂听课记录管理系统                            
      
MySQL 安装报错的解决方法                            
      
python开发环境搭建——pycharm和jupyternotebook                            
      
nodejs--开发自己的项目——2.1——注册用户信息                            
      
SpringCloud系列：服务网关组件Gateway                            
      
python进阶（25）协程                            
      
zabbix监控                            
      
                          
                
    26. 
                    原文地址：https://blog.csdn.net/weixin_65808248/article/details/125878173
                
      27.