• LayUI之增删改查

    目录

    一、前言

    二、LayUI增删改查的后台代码

            2.1 增加

            2.2 删除

            2.3 修改

    三、LayUI增删改查的前端代码

            3.1 增加

    一、前言

    1.1 前言

    上一篇文章我们一起做了LayUI的动态添加选项卡，这一篇文章我们继续来进行对LayUI的学习，开始编写一下LayUI的增删改查吧！

    1.2 前端代码(数据表格组件)

    这里就先把从官网上演变过来的一些前端代码粘贴过来：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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userManage.js">script>
    9. <title>用户管理title>
    10. head>
    11. <body>
    12. 	
    13. 	<div class="layui-form-item">
    14. 	  <div class="layui-inline">
    15. 	    <label class="layui-form-label">用户名：label>
    16. 	    <div class="layui-input-inline">
    17. 	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    18. 	    div>
    19. 	  div>
    20. 	  
    21. 	  <div class="layui-inline">
    22. 	    <div class="layui-input-inline">
    23. 	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
    24. 	      	<i class="layui-icon layui-icon-search">i>
    25. 	      	查询
    26. 	      button>
    27. 	      <button id="btn_add" type="button" class="layui-btn">新增button>
    28. 	    div>
    29. 	  div>
    30. 	  
    31. 	div>
    32. 	
    33. 	<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;" lay-filter="tb_goods">
    34. 		
    35. 	table>
    36. 	
    37. 	
    38. 	<script type="text/html" id="toolbar">
    39.  		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑button>
    40.  		<button class="layui-btn layui-btn-sm" lay-event="del">删除button>
    41.  		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码button>
    42. 	script>
    43. body>
    44. html>

    1.3 封装JS

    接着我们把我们需要的js全部封装好：userManage.js

    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. //在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    16. table.on('tool(tb)', function (obj) {
    17. 	row = obj.data;
    18. 	if (obj.event == "edit") {
    19. 		open("编辑");
    20. 	}else if(obj.event == "del"){
    21. 		layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    22. 		  $.post($("#ctx").val()+'/user.action',{
    23. 			  'methodName':'del',
    24. 			  'id':row.id
    25. 		  },function(rs){
    26. 			  if(rs.success){
    27.         		   //调用查询方法刷新数据
    28.         		   query();
    29.         	   }else{
    30.         		   layer.msg(rs.msg,function(){});
    31.         	   }
    32. 		  },'json');
    33. 		  layer.close(index);
    34. 		});
    35. 	}else{
    36.  
    37. 	}
    38. });
    39.  
    40. //1.初始化数据表格
    41. function initTable(){
    42. 	table.render({           //执行渲染
    43.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
    44. //        url: 'user.action?methodName=list',     //请求地址
    45.         height: 340,         //自定义高度
    46.         loading: false,      //是否显示加载条（默认 true）
    47.         cols: [[             //设置表头
    48.             {field: 'id', title: '用户编号', width: 120},
    49.             {field: 'name', title: '用户名', width: 120},
    50.             {field: 'loginName', title: '登录账号', width: 140},
    51.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
    52.         ]]
    53.     });
    54. 	
    55. }
    56.  
    57. //2.点击查询
    58. function query(){
    59. 	table.reload('tb', {
    60.         url: $("#ctx").val()+'/user.action',     //请求地址
    61.         method: 'POST',                    //请求方式，GET或者POST
    62.         loading: true,                     //是否显示加载条（默认 true）
    63.         page: true,                        //是否分页
    64.         where: {                           //设定异步数据接口的额外参数，任意设
    65.         	'methodName':'listUserRole',
    66.         	'name':$('#name').val()
    67.         },  
    68.         request: {                         //自定义分页请求参数名
    69.             pageName: 'page', //页码的参数名称，默认：page
    70.             limitName: 'rows' //每页数据量的参数名，默认：limit
    71.         }
    72.    });
    73. }
    74.  
    75. //3.对话框
    76. function open(title){
    77.     layer.open({
    78.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    79.        title:title,
    80.        area: ['660px', '340px'],   //宽高
    81.        skin: 'layui-layer-rim',    //样式类名
    82.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    83.        btn:['保存','关闭'],
    84.        yes: function(index, layero){
    85.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    86.     	   //jQuery.find
    87.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    88.            console.log(data);
    89.            //判断title标题
    90.            let methodName="add";
    91.            if(title=="编辑")
    92.         	   methodName="edit";
    93.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    94.         		   data,function(rs){
    95.         	   if(rs.success){
    96.         		   //关闭对话框
    97.         		   layer.closeAll();
    98.         		   //调用查询方法刷新数据
    99.         		   query();
    100.         	   }else{
    101.         		   layer.msg(rs.msg,function(){});
    102.         	   }
    103.            },'json');
    104.        },
    105.        btn2: function(index, layero){
    106.     	   layer.closeAll();
    107.        }
    108.     });
    109. }
      110. 我们再放上引入的公共页面：header.jsp
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2.     pageEncoding="UTF-8"%>
      3.  
      5. <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
      6.  
      8. <script src="${pageContext.request.contextPath }/static/js/layui/layui.js">script>
      9.  
      11. <base href="${pageContext.request.contextPath }/" />
      12.  
      14. <input id="ctx" value="${pageContext.request.contextPath }" type="hidden"/>
      15.  
      16. <title>玉渊工作室title>
      前端建立好了后，我们看看运行效果：
       
       
      二、LayUI增删改查的后台代码
      2.0 编写Dao方法
      我们首先还是要写一个查询的方法：UserDao--->List
      1. 	/**
      2. 	 * 查询用户信息对应的角色，角色是通过case when得来的
      3. 	 * @param user
      4. 	 * @param pageBean
      5. 	 * @return
      6. 	 * @throws Exception
      7. 	 */
      8. 	public List> list(User user,PageBean pageBean) throws Exception {
      9. 		String sql = "select *\r\n" + 
      10. 				",(case rid \r\n" + 
      11. 				"when 1 then '管理员' \r\n" + 
      12. 				"when 2 then '发起者' \r\n" + 
      13. 				"when 3 then '审批者' \r\n" + 
      14. 				"when 4 then '参与者' \r\n" + 
      15. 				"when 5 then '会议室管理员' \r\n" + 
      16. 				"else '其他角色' end \r\n" + 
      17. 				") roleName \r\n"  + 
      18. 				"from \r\n" + 
      19. 				"t_oa_user where 1=1 ";
      20. 		String name = user.getName();
      21. 		if(StringUtils.isNotBlank(name)) {
      22. 			sql += " and name like '%"+name+"%'";
      23. 		}
      24. 		return super.executeQuery(sql, pageBean);
      25. 	}
      运行测试：
      这里可以看到已经把所有的用户数据都查询出来了~
               2.1 增加
                      我们继续编写增加的方法：Add           
      1.     public int add(User user) throws Exception {
      2. 		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
      3. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
      4. 	}
                      运行测试：
                      
              2.2 删除
      1.     public int del(User user) throws Exception {
      2. 		String sql = "delete from t_oa_user where id = ?";
      3. 		return super.executeUpdate(sql, user, new String[] {"id"});
      4. 	}
              2.3 修改
      1.     public int edit(User user) throws Exception {
      2. 		String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?";
      3. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
      4. 	}
                      运行测试：
                      
       当我们写好了增删改查的Dao方法后，就可以开始编写UserAction啦~
      1. package com.leaf.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.leaf.dao.UserDao;
      11. import com.leaf.entity.User;
      12. import com.leaf.mvc.ActionSupport;
      13. import com.leaf.mvc.ModelDriven;
      14. import com.leaf.util.PageBean;
      15. import com.leaf.util.R;
      16. import com.leaf.util.ResponseUtil;
      17.  
      18. public class UserAction extends ActionSupport implements ModelDriven {
      19.  
      20. 	private User user = new User();
      21. 	
      22. 	private UserDao ud = new UserDao();
      23. 	
      24. 	//写一个方法处理前台的请求
      25. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
      26. 		Map map = new HashMap();
      27. 		try {
      28. 			//调用Dao方法
      29. 			User u = ud.login(user);
      30. 			if(u != null) {
      31. 				//登录成功
      32. 				//ResponseUtil.writeJson(resp, new R().data("code",200).data("msg", "成功"));
      33. 				ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
      34. 			}else {
      35. 				//登录失败
      36. 				//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg", "账号密码错误"));
      37. 				ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));
      38. 			}
      39. 		} catch (Exception e) {
      40. 			e.printStackTrace();
      41. 			try {
      42. 				ResponseUtil.writeJson(resp, R.ok(0, "登录失败"));
      43. 			} catch (Exception e1) {
      44. 				e1.printStackTrace();
      45. 			}
      46. 		}
      47. 		return null;
      48. 	}
      49. 	
      50. 	//查询所有用户的方法
      51. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
      52. 		try {
      53. 			PageBean pageBean = new PageBean();
      54. 			//初始化
      55. 			pageBean.setRequest(req);
      56. 			List> list = ud.list(user, pageBean);
      57. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功" ,pageBean.getTotal() ,user));
      58. 		} catch (Exception e) {
      59. 			e.printStackTrace();
      60. 			try {
      61. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询失败"));
      62. 			} catch (Exception e1) {
      63. 				e1.printStackTrace();
      64. 			}
      65. 		}
      66. 		return null;
      67. 	}
      68. 	
      69. 	//增加的方法
      70. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
      71. 		try {
      72. 			//rs是SQL语句执行的影响行数
      73. 			int rs = ud.add(user);
      74. 			//判断
      75. 			if(rs > 0) {
      76. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
      77. 			}
      78. 			else {
      79. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
      80. 			}
      81. 		} catch (Exception e) {
      82. 			e.printStackTrace();
      83. 			try {
      84. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
      85. 			} catch (Exception e1) {
      86. 				e1.printStackTrace();
      87. 			}
      88. 		}
      89. 		return null;
      90. 	}
      91. 	
      92. 	//删除的方法
      93. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
      94. 		try {
      95. 			//rs是SQL语句执行的影响行数
      96. 			int rs = ud.del(user);
      97. 			//判断
      98. 			if(rs > 0) {
      99. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
      100. 			}
      101. 			else {
      102. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
      103. 			}
      104. 		} catch (Exception e) {
      105. 			e.printStackTrace();
      106. 			try {
      107. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
      108. 			} catch (Exception e1) {
      109. 				e1.printStackTrace();
      110. 			}
      111. 		}
      112. 		return null;
      113. 	}
      114. 	
      115. 	//修改的方法
      116. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
      117. 		try {
      118. 			//rs是SQL语句执行的影响行数
      119. 			int rs = ud.edit(user);
      120. 			//判断
      121. 			if(rs > 0) {
      122. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
      123. 			}
      124. 			else {
      125. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
      126. 			}
      127. 		} catch (Exception e) {
      128. 			e.printStackTrace();
      129. 			try {
      130. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
      131. 			} catch (Exception e1) {
      132. 				e1.printStackTrace();
      133. 			}
      134. 		}
      135. 		return null;
      136. 	}
      137. 	
      138. 	@Override
      139. 	public User getModel() {
      140. 		return user;
      141. 	}
      142. 	
      143. }
      三、LayUI增删改查的前端代码
      写好了后台代码后我们这就来写前端的代码啦，还是一样，一步步来！
              3.1 增加
                      我们需要建立一个增加的页面：userEdit
                      这个页面和编辑共用~
      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="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>
      封装对应的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. 	//取user from中的值
      19.     return form.val('user');
      20. }
      我们增加测试一下~ 
                      
       
      OK，今天的学习笔记分享就到这里啦，我们呢下次再见！！！
    110. 

                    相关阅读:
      
                    
任意文件读取                            
      
Windows版本Node.js简单安装配置详细教程（小白入门必备）                            
      
Window 安装多个版本的 java 并按需切换                            
      
javaScript---箭头函数和普通函数的区别                            
      
【UNR #6 A】面基之路（最短路）                            
      
GO 条件语句                            
      
一、Node.js 环境安装 (详)                            
      
C语言数据类型转换                            
      
【排序算法】图解简单选择排序(图解堪比Debug显示每次循环结果)                            
      
1204、基础查询进阶、连接查询                            
      
                          
                
    111. 
                    原文地址：https://blog.csdn.net/qq_63492318/article/details/125903572
                
      112.