• Layui之新增修改功能

    一、准备工作

     前端代码布局

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

     整体效果图如

     后台代码如dao类

     =============================查询=====================================================================

    package com.zking.dao;

    import java.util.List;
    import java.util.Map;

    import com.zking.entity.User;
    import com.zking.util.BaseDao;
    import com.zking.util.PageBean;
    import com.zking.util.StringUtils;

    public class UserDao extends BaseDao {

        public User login(User user )throws Exception {
            String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";
            List users= super.executeQuery(sql, User.class,null);
            return  users==null||users.size()==0 ?null:users.get(0);
        }
        public List> list(User user,PageBean pagebean) throws Exception {
            String sql="select *, \r\n" + 
                    "(case  rid \r\n" + 
                    "when 1 then '管理员 ' \r\n" + 
                    "when 2 then '发起者 ' \r\n" + 
                    "when 3 then '审批者  ' \r\n" + 
                    "when 4 then '参与者 ' \r\n" + 
                    "when 5 then '会议室管理员' \r\n" + 
                    "else '其他' end) roleName  \r\n" + 
                    "from t_oa_user  where 1=1";
            String name=user.getName();
            if(StringUtils.isNotBlank(name)) {
                sql+=" and name like '%"+name+"%'";
                
            }
            return super.executeQuery(sql, pagebean);
            
        }
        

     修改、删除增加等功能

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

        public int del(User user) throws Exception {
            String sql="delete t_oa_user where id=?";
            return super.executeUpdate(sql, user, new String[] {"id"});
            
        }
       
        
    //增加用户
        public int add(User user) throws Exception {
            String sql="insert into t_oa_user (name,loginName,pwd) values(?,?,?)";
            return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
            
        }
        
        

     UserAction类

    1. package com.zking.web;
    2.  
    3.  
    4.  
    5. import java.util.HashMap;
    6. import java.util.List;
    7. import java.util.Map;
    8.  
    9. import javax.servlet.http.HttpServletRequest;
    10. import javax.servlet.http.HttpServletResponse;
    11.  
    12. import com.zking.dao.UserDao;
    13. import com.zking.entity.User;
    14. import com.zking.framework.ActionSupport;
    15. import com.zking.framework.ModelDriver;
    16. import com.zking.util.PageBean;
    17. import com.zking.util.R;
    18. import com.zking.util.ResponseUtil;
    19.  
    20.  
    21. public class UserAction  extends ActionSupport implements ModelDriver<User>{
    22. 	private User user=new User();
    23. 	private UserDao userdao=new  UserDao();
    24. 	//写一个方法处理前台的请求
    25. 		//作用传参数
    26. 		@Override
    27. 		public String execute(HttpServletRequest req, HttpServletResponse resp) {
    28. 			Map<String , Object> map=new HashMap<String, Object>();
    29. 			if("张三".equals(user.getLoginName())&&"123456".equals(user.getPwd())) {
    30. //			登录成功
    31. 			map.put("code", 200);
    32. 			map.put("msg", "成功");
    33. 		}
    34. 		else {
    35. //			登录失败！
    36. 			map.put("code", 0);
    37. 			map.put("msg", "账户名或者密码有误！");
    38. 		}
    39. 			try {
    40. 				ResponseUtil.writeJson(resp, map);
    41. 			} catch (Exception e) {
    42. 				e.printStackTrace();
    43. 			}
    44. 			return null;
    45. 		}
    46. //		
    47. 	
    48. 	
    49. 	
    50. //	//简化代码
    51. //	@Override
    52. //	public String execute(HttpServletRequest req, HttpServletResponse resp) {
    53. //		Map map = new HashMap();
    54. //		if ("张三".equals(u.getUsername()) && "123456".equals(u.getPassword())) {
    55. //			try {
    56. //				ResponseUtil.writeJson(resp, new R().data("code", 200).data("msg", "成功"));
    57. //			} catch (Exception e) {
    58. //				e.printStackTrace();
    59. //			}
    60. //		} else {
    61. //			try {
    62. //				ResponseUtil.writeJson(resp, new R().data("code", 0).data("msg", "失败"));
    63. //			} catch (Exception e) {
    64. //				e.printStackTrace();
    65. //			}
    66. //
    67. //		}
    68. //		try {
    69. //			ResponseUtil.writeJson(resp, map);
    70. //		} catch (Exception e) {
    71. //			e.printStackTrace();
    72. //		}
    73. //		return null;
    74. //	}
    75. //	
    76. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    77. 	
    78. 		try {
    79. 			
    80. 			User u=userdao.login(user);
    81. 			if(u!=null) {
    82. 				ResponseUtil.writeJson(resp, R.ok(200, "成功"));	
    83. 			}
    84. 			else {
    85. 				ResponseUtil.writeJson(resp, R.ok(0, "用户名或者密码错误"));
    86. 			}
    87. 			
    88. 		} catch (Exception e) {
    89. 			e.printStackTrace();
    90. 			try {
    91. 				ResponseUtil.writeJson(resp, R.ok(0, "用户名或者密码错误"));
    92. 			} catch (Exception e2) {
    93. 				e2.printStackTrace();
    94. 			}
    95. 		}
    96. 		return null;
    97. 	}
    98.  
    99. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    100. 		
    101. 		try {
    102. 			PageBean pagebean=new PageBean();
    103. 			pagebean.setRequest(req);
    104. 			List<Map<String, Object>> users=userdao.list(user, pagebean);
    105. 			ResponseUtil.writeJson(resp, R.ok(0,"用户数据查询成功",pagebean.getTotal()));
    106. 			
    107. 		} catch (Exception e) {
    108. 			e.printStackTrace();
    109. 			try {
    110. 				ResponseUtil.writeJson(resp, R.ok(0, "用户名或者密码错误"));
    111. 			} catch (Exception e2) {
    112. 				e2.printStackTrace();
    113. 			}
    114. 		}
    115. 		return null;
    116. 	}
    117. 	
    118. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    119. 		
    120. 		try {
    121. 			
    122. 			int rs=userdao.add(user);
    123. 			if(rs>0) {
    124. 				ResponseUtil.writeJson(resp, R.ok(200, "用户主增加成功"));	
    125. 			}
    126. 			else {
    127. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询失败"));
    128. 			}
    129. 			
    130. 		} catch (Exception e) {
    131. 			e.printStackTrace();
    132. 			try {
    133. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询失败"));
    134. 			} catch (Exception e2) {
    135. 				e2.printStackTrace();
    136. 			}
    137. 		}
    138. 		return null;
    139. 	}
    140. 	
    141. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    142. 		
    143. 		try {
    144. 			
    145. 			int rs=userdao.del(user);
    146. 			if(rs>0) {
    147. 				ResponseUtil.writeJson(resp, R.ok(200, "用户主删除成功"));	
    148. 			}
    149. 			else {
    150. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    151. 			}
    152. 			
    153. 		} catch (Exception e) {
    154. 			e.printStackTrace();
    155. 			try {
    156. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    157. 			} catch (Exception e2) {
    158. 				e2.printStackTrace();
    159. 			}
    160. 		}
    161. 		return null;
    162. 	}
    163. 	
    164. 	
    165. 	
    166. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    167. 		
    168. 		try {
    169. 			
    170. 			int rs=userdao.edit(user);
    171. 			if(rs>0) {
    172. 				ResponseUtil.writeJson(resp, R.ok(200, "用户主修改成功"));	
    173. 			}
    174. 			else {
    175. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    176. 			}
    177. 			
    178. 		} catch (Exception e) {
    179. 			e.printStackTrace();
    180. 			try {
    181. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    182. 			} catch (Exception e2) {
    183. 				e2.printStackTrace();
    184. 			}
    185. 		}
    186. 		return null;
    187. 	}
    188. 	
    189. 	
    190. 	
    191. 	
    192. 	
    193. 	@Override
    194. 	public User getModel() {
    195. 		return user;
    196. 	}
    197. 		
    198. }

    UserDaoTest测试类

    package com.zking.dao;

    import static org.junit.Assert.*;

    import java.util.List;
    import java.util.Map;

    import org.junit.After;
    import org.junit.Before;
    import org.junit.Test;

    import com.zking.entity.User;
    import com.zking.util.PageBean;

    /**
     * @author lucy
     * junit测试类
     *
     */
    public class UserDaoTest {
            private UserDao userdao=new UserDao();
        @Before
        public void setUp() throws Exception {
        }

        @After
        public void tearDown() throws Exception {
        }

        
        @Test
        public void testLogin() {
            fail("Not yet implemented");
        }

        @Test
        public void testList() {//查询
            PageBean pagebean =new PageBean();
            User user=new User();
            try {
                List> list=userdao.list(user, pagebean);
            for (Map map : list) {
                System.out.println(map);
            }
            } catch (Exception e) {
                e.printStackTrace();
            }
            
        }

        @Test
        public void testEdit() {//修改
            User user =new User();
            user.setName("李哈哈");
            user.setLoginName("lhh");
            user.setPwd("123");
            user.setId(17L);
            try {
                userdao.edit(user);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        @Test
        public void testDel() {//删除
            User user =new User();
            user.setId(17L);
            try {
                userdao.del(user);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        @Test
        public void testAdd() {//增加
            User user =new User();
            user.setName("李哈哈");
            user.setLoginName("lhh");
            user.setPwd("123");
            try {
                userdao.add(user);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        }

     list集合

    二、新增

     userManager.js

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

     header.jsp头部导入

     

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
       






     

        



    前端代码userManager.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
        <%@ include file='/common/header.jsp' %>




           



        


          

            
            

              
            

          

          
          

            

              
              
            

          

          
        

        
        

        
        
        
        


    效果图

    三、修改

     useredit.js

    let layer,form,$;
    layui.use(['layer','form','jquery'],function(){
        layer=layui.layer,form=layui.form,$=layui.jquery;
        initData();
    });

    function initData(){
        console.log(parent.row);
        if(null!=parent.row){
             //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
             //parent.row：表格行对象
             form.val('user',$.extend({}, parent.row||{}));
             //$('#name').attr('readonly','readonly');
        }
    }

    function getData(){
        return form.val('user');
    }

    useredit.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ include file="/common/header.jsp"%>





    用户新增




       

           
           

               
               

                   
               

           

           

               
               

                   
               

           

           

               
               

                   
               

           

           

               
               

                   
               

           

       



     

    四、删除

    userManager.js

    //在页面中的

    中必须配置lay-filter="tb_goods"属性才能触发属性!!!
        table.on('tool(tb)', function (obj) {
            row = obj.data;
            if (obj.event == "edit") {
                open("编辑");
            }else if(obj.event == "del"){
                layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
                  $.post($("#ctx").val()+'/user.action',{
                      'methodName':'del',
                      'id':row.id
                  },function(rs){
                      if(rs.success){
                           //调用查询方法刷新数据
                           query();
                       }else{
                           layer.msg(rs.msg,function(){});
                       }
                  },'json');
                  layer.close(index);
                });
            }else{

            }
        });
        
    }

     

  • 相关阅读:
    [七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
    第一篇：参考资料地址
    【Pandas包】-文章汇总
    Docker Compose和Consul
    计算机毕业设计（附源码）python游戏盒子系统
    电容笔有什么用？电容笔十大品牌排行
    Qt编写物联网管理平台36-通信协议
    推荐一个高效测试用例工具：XMind2TestCase..
    SystemVerilog-决策语句-case语句
    ArrayList和CopyOnWriteArrayList
  • 原文地址：https://blog.csdn.net/qq_66924116/article/details/125891623